MyBB Community Forums

Full Version: Category Background Color & Image(w/opacity xx%)
You're currently viewing a stripped down version of our content. View the full version with proper formatting.
So what I want is a different background image per category with each background image having a different opacity so the image blends nicely with a different background base color that is different per category as well.

So like one catgory will have a black background, with an image on top of that with the image having an opacity of lets say 42% that blends nicely with its black background.

Thanks guys! Big Grin
You can add id="c_{$forum['fid']}" to table in forumbit_depth1_cat.

After that in global.css you can style category by adding #c_x (x is an id of category)

Example styling

Quote:#c_5 {
background-color:#ffffff;
border:1px solid #000000;
color:black;
}

#c_12 {
background-color:red;
border:1px solid #cc3300;
color:white;
}

If tborder has any background image / padding/ margin / position references you will need to correct that in #c_x styling.
(2012-04-15, 09:29 AM)Johnny S Wrote: [ -> ]You can add id="c_{$forum['fid']}" to table in forumbit_depth1_cat.

After that in global.css you can style category by adding #c_x (x is an id of category)

Example styling

Quote:#c_5 {
background-color:#ffffff;
border:1px solid #000000;
color:black;
}

#c_12 {
background-color:red;
border:1px solid #cc3300;
color:white;
}

If tborder has any background image / padding/ margin / position references you will need to correct that in #c_x styling.

Still nothing and now my category titles font is small for some reason Sad
I'll use this image as reference.

For styling thead ,trow1,trow2 and tcat in each category you will need to add appropriate class after #cat_x

For example in global.css you will style forum category with id 5
Quote:#c_5 .thead {
padding:5px;
height:28px;
line-height:28px;
color:white;
background-color:black;
font-size:14px;
}

#c_5 .tcat{
padding:3px;
color:black;
background-color:white;
}

#c_5 .trow1{
background-color:red;
color:black;
}

For styling category header (thead) you have to add (where x is your category id)

Quote:#c_x .thead{

}

in global.css and define font-size,font-color ,margin,padding bg image,color and other properties inside that class.
(2012-04-15, 02:01 PM)Johnny S Wrote: [ -> ]I'll use this image as reference.

For styling thead ,trow1,trow2 and tcat in each category you will need to add appropriate class after #cat_x

For example in global.css you will style forum category with id 5
Quote:#c_5 .thead {
padding:5px;
height:28px;
line-height:28px;
color:white;
background-color:black;
font-size:14px;
}

#c_5 .tcat{
padding:3px;
color:black;
background-color:white;
}

#c_5 .trow1{
background-color:red;
color:black;
}

For styling category header (thead) you have to add (where x is your category id)

Quote:#c_x .thead{

}

in global.css and define font-size,font-color ,margin,padding bg image,color and other properties inside that class.

Ok I will try now thank you and we see what happens Smile