SimplePortal

Development => Feature Requests => Topic started by: ♦ Ninja ZX-10RR ♦ on November 28, 2014, 05:52:42 PM

Title: Custom css for blocks
Post by: ♦ Ninja ZX-10RR ♦ on November 28, 2014, 05:52:42 PM
I know that there is a menu to insert the custom css style for blocks (title and body)... But an option to call a custom css class would be possible?
Let me explain:
I go to index.css/portal.css and I create a new css class and put its properties in there just the way I would do it via the box in the block menu page. However, in this way you could easily add :hover :focus :active :visited properties without setting a #sp_main {class:hover} which would affect ALL blocks instead of having the chance to customize each one of them.
Please ask me more informations if the request is not clear, I will post my workaround right after so that you might understand even better:
Code: [Select]
#sp_main h3.catbg, #sp_main td div.cat_bar
{
background-color: #152DC6;
border-top-left-radius: 15px;
border-top-right-radius: 15px;
border-bottom-left-radius: 0px;
border-bottom-right-radius: 0px;
color: #FFFFFF;
}
Title: Re: Custom css for blocks
Post by: [SiNaN] on November 28, 2014, 05:58:15 PM
If I understand your request correctly, the current interface already allows you to enter your custom CSS class for each block. See the attached screenshot.
Title: Re: Custom css for blocks
Post by: ♦ Ninja ZX-10RR ♦ on November 28, 2014, 05:59:54 PM
Yes, exactly, but it doesn't (or at least no clues on how to do that, the documentation about this is way too short IMHO, no examples provided...) allow me to put an :hover, :visited, :active or a :focus effect for the block. That's what I mean. I still haven't put a code to highlight the windowbg, and I thought about asking it after asking in other 2 places without finding an answer (that's also what brought me here in the first place along with my first topic).
Title: Re: Custom css for blocks
Post by: [SiNaN] on November 28, 2014, 06:07:51 PM
Add the following at the end of portal.css file:

Code: [Select]
.test
{
background-color: red;
}
.test:hover
{
background-color: blue;
}

Then set the Custom Body Class of a block as "test" (without quotation marks). View the block and try hovering over it.

Basically, you just need to assign the CSS class to the element (the block in this case) and then you can use whatever pseudo-class (e.g. :hover) you want on that CSS class in your CSS file.
Title: Re: Custom css for blocks
Post by: ♦ Ninja ZX-10RR ♦ on November 28, 2014, 06:20:38 PM
Oh! This is awesome! After this if you want you can move the topic wherever you want, it's not a feature request anymore :D so awesome, thanks! I would find this *extremely* useful!
With those replies you basically changed the fact that I was stuck with the configuration of the site, now I can move forward! Many many thanks!

The only thing I might say would be to add a lot of things to the documentation, the explanation of that menu is not clear at all to a newbie (and I am a SimplePortal newbie!) :P there could be many more or less legit ways in which you could put the code and it doesn't work, believe me before asking I tried really hard and spent hours on this... I wish I knew it was so easy ;D
Title: Re: Custom css for blocks
Post by: [SiNaN] on November 28, 2014, 06:35:46 PM
You're welcome. I'll just move this to the English Support board.

Yeah, there are lots of cool little things about SimplePortal and it's really powerful but people are fooled by the name. Some examples:

http://simpleportal.net/index.php?topic=12560.msg62521;topicseen#msg62521
http://simpleportal.net/index.php?topic=3990.0
http://simpleportal.net/index.php?topic=5332.0

I'm not the most qualified person to write the documentation though (read through the help text for the Custom Display Options if would like to know why) and I prefer to hide them well, then impress people when they ask about it. :P
Title: Re: Custom css for blocks
Post by: ♦ Ninja ZX-10RR ♦ on November 28, 2014, 06:55:10 PM
And I am DEFINITELY impressed. Wow. I think that setting up the site will take a long while but hell it will look freaking awesome. Those things are seriously impressive. Also the installation... It's crazy. Think that I had I guess 123 mods and I installed SimplePortal, I was thinking "oh screw it I will have to painfully run into some thousands of manual edits to make this" and instead... Just 2 little ones. And they were just ridiculously easy... I am impressed and the last mod that was impressive to me has been SimpleDesk, a long while ago... This one definitely impressed me as well. So many things, the articles, the pages, the blocks, all the customization... And not a single error in the error log from such an enormous mod.
One word: congratulations. Seriously, congratulations. When my project will take off I am planning to donate to this thing, it saved me thousand of hours of headaches to build a site from scratch... And this even changes its layout according to the selected theme if configured correctly... I am amazed, with no words, and this is not a thing that happens often, believe me.
Thanks again, sorry for the little off topic, just wanted to let you know that :)
SimplePortal 2.3.8 © 2008-2024, SimplePortal