SimplePortal

Support => English Support => Topic started by: aegersz on September 30, 2016, 05:21:25 AM

Title: is there an easy way to change the background and title color of all blocks ?
Post by: aegersz on September 30, 2016, 05:21:25 AM
Hi, i want to make all the SimplePortal block titles and backgrounds the same colour.

I know about .Themes/default/css/portal.css but is there something easier that does them all at once ?

Title: Re: is there an easy way to change the background and title color of all blocks ?
Post by: emanuele on October 06, 2016, 04:10:00 PM
SP blocks titles are cat_bar and catbg (the same classes as SMF).
Changing the background of these two classes (pay attention because the way SMF does that is using an image, so you may need to have a look around) would do. You could add the code at the end of your index.css, maybe with an !important attribute to be sure it is applied.
If instead you need to change only the blocks, you may find useful the sp_block_section and alike classes (check around with your browser's development tools for all of them, because they depend on the placement of the block) as first selectors.
Title: Re: is there an easy way to change the background and title color of all blocks ?
Post by: ♦ Ninja ZX-10RR ♦ on October 06, 2016, 07:20:22 PM
Code-wise...
Code: [Select]
div.sp_block_section div.cat_bar, div.sp_block_section div.catbg { background: insertamazingcolor; }
Title: Re: is there an easy way to change the background and title color of all blocks ?
Post by: aegersz on October 09, 2016, 11:00:02 PM
thanks guys, i used CSS and as per your help, i found div.sp_block in .Themes/default/css/portal.css and it did the trick to change all the backgrounds to a subtle color, i added:

I added the following background so that it now looks like this:
 
Code: [Select]
div.sp_block
{
        overflow: auto;
        padding: 0 0.5em;
        background: #FBF8EF;
}
Title: Re: is there an easy way to change the background and title color of all blocks ?
Post by: aegersz on October 10, 2016, 02:49:06 PM
... but how do you change the colour of the title of the block's background ?

like on this site, I see pale yellow - what would be the CSS code ? i tried the ones you suggested but I'm just not understanding well enough.
Title: Re: is there an easy way to change the background and title color of all blocks ?
Post by: {OCS}MasterSeal on October 10, 2016, 04:37:38 PM
Maybe try this link in the SP Documentation. At the bottom it explains how to edit and change specific block properties using CSS.

http://simpleportal.net/index.php?action=docs;area=block_editor

Hopefully this will help and you do not have to edit the raw files etc.
Title: Re: is there an easy way to change the background and title color of all blocks ?
Post by: aegersz on October 10, 2016, 10:39:09 PM
Code-wise...
Code: [Select]
div.sp_block_section div.cat_bar, div.sp_block_section div.catbg { background: insertamazingcolor; }

i'm still unable to change the color of ALL block title bars in one go.

when i view the page source, i see div.sp_block_section and cat_bar and catbg but was unable to code the appropriate CSS statements correctly.
i see:

Code: [Select]
<div class="sp_block_section">
<div class="cat_bar">
<h3 class="catbg">

but how does that translate into CSS ? i read the w3schools guide but that didn't help ... please, where am i screwing up ?

i tried div.cat_bar and div.catbg but it only affected the side and bottom borders, still no joy with the actual title. i must admit, i don't really know what i am doing yet.
Title: Re: is there an easy way to change the background and title color of all blocks ?
Post by: aegersz on October 11, 2016, 03:01:08 AM
i added this to the end of BOTH index.css and portal.css:

Code: [Select]
.cat_bar
{
background: #E1E121;
}.catbg
{
        background: #F1E121;
        !important;
}

but it makes no difference at all ... your thoughts, please ?

i took emmanuel's advice and went for index.css and he mentions the use of images to set the background color (which confused me more). i just can't override the existing styles.

what i'm really asking is how does *this site* get it's nice two-tone yellowish block background ?

Perhaps i need to build a theme instead ?
Title: Re: is there an easy way to change the background and title color of all blocks ?
Post by: aegersz on October 11, 2016, 03:49:12 PM
SMF support gave me the advice i wanted.

it's all in http://www.simplemachines.org/community/index.php?topic=549207

thanks for the help guys and emmanuel's advice about the png file was excellent.
Title: Re: is there an easy way to change the background and title color of all blocks ?
Post by: {OCS}MasterSeal on October 12, 2016, 06:18:09 PM
Glad you got it sorted! There's also ways to do effects using CSS to images as well. That's a bit more advanced but it's out there FYI.

Cheers!

D
SimplePortal 2.3.8 © 2008-2024, SimplePortal