Development > Feature Requests

Custom css for blocks

(1/2) > >>

♦ Ninja ZX-10RR ♦:
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: ---#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;
}
--- End code ---

[SiNaN]:
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.

♦ Ninja ZX-10RR ♦:
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).

[SiNaN]:
Add the following at the end of portal.css file:


--- Code: ---.test
{
background-color: red;
}
.test:hover
{
background-color: blue;
}
--- End code ---

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.

♦ Ninja ZX-10RR ♦:
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

Navigation

[0] Message Index

[#] Next page