Category Title CSS Edits. Question

Quote from kbarg

I would like to modify the Title of a Category, and add a background to it, some other forum software call it a "category strip". I was curious as to what class this was.

I would also like to disable the Open/Close Arrow. I would like all categories to remain open.

Thank you.

" 'Modifying the Title of a Category, and add a background to it ... ' "

kbarg - do you mean like there would be a solid COLOR background that the TITLE of the Category is superimposed on?

If so, I would be interested in this also; but I would want it for specific Category Titles - not every Title.

Hopefully someone can tell both of us how to manage these modifications ...... oh Rich, where are you ????

Quote from Alexander Ebert

CSS

.wbbDepth1.wbbCategory > header {
    // background-color for the category
    background-color: #f00;
    // gets rid of the border at its bottom
    border-bottom-width: 0;
    // prevent the text from sticking to the left boundary
    padding-left: 10px;
    
    // removes the collapse button
    .collapsibleButton {
        display: none;
    }
    
    // adjusts the color of the category name
    a {
        color: #fff;
    }
}

Display More

That's what it looks like (YMMV):

Thanks Alexander Ebert for the reply / CSS Code

I can't speak for kbarg ........ but for me, no.

I will stay with what I have because the only change I would like is for a background color of a SPECIFIC "highlighted Title" of my choosing;

and I would not want the color of the "highlighted Category Title" to also be for the forums which follow under that chosen highlighted title.

Ruff Seas i have understand , i go to your site

if you want change the category by exemple background color

.wbbBoardList  > header {
    background-color: red;
}

this code is to change all the category

if you want change only one category , you must find the data-board-id for your category , press F12 on your browser

use the arrow to point on the category and you must find the data-board id , you see it on my picture

.wbbBoardList [data-board-id="1"] > header {
    background-color: red;
}

this code change only the category with the data-board-id =1

i hope , i understand your problem

Quote from marcbelgique

Ruff Seas i have understand , i go to your site

if you want change the category by exemple background color

Code

.wbbBoardList  > header {
    background-color: red;
}

this code is to change all the category

if you want change only one category , you must find the data-board-id for your category , press F12 on your browser

use the arrow to point on the category and you must find the data-board id , you see it on my picture

Code

.wbbBoardList [data-board-id="1"] > header {
    background-color: red;
}

this code change only the category with the data-board-id =1

i hope , i understand your problem

Display More

Thanks for the information, marcbelgique -

I will try this code later today and get back here to let you know how it worked out.

Quote from marcbelgique

Ruff Seas i have understand , i go to your site

if you want change the category by exemple background color

Code

.wbbBoardList  > header {
    background-color: red;
}

this code is to change all the category

if you want change only one category , you must find the data-board-id for your category , press F12 on your browser

use the arrow to point on the category and you must find the data-board id , you see it on my picture

Code

.wbbBoardList [data-board-id="1"] > header {
    background-color: red;
}

this code change only the category with the data-board-id =1

i hope , i understand your problem

Display More

Thank you marcbelgique !

I just made the change in Styles for my "header" #1, using your CSS Code above.

I changed the color though to #BFF3F7 - as the text remains easy to read in the Header while at the same time placing emphasis on the text.

If I want to make the same high-lighted text with regard to a Category Title which appears under a Header, do I change: > header {

TO: > category {

or do I use a different word ?

can I have a screen copy of what you want to change with a arrow , i don't understand exactly what you want ...

Quote from marcbelgique

can I have a screen copy of what you want to change with a arrow , i don't understand exactly what you want ...

OKAY marcbelgique, I have attached a screen shot showing exactly what I want:

for just the background of the title category

.wbbBoardList [data-board-id="1"] > header >a{
    background-color: red;
}

For the line

.wbbBoardContainer[data-board-id="2"] > div > div > div > h3 {
    background-color: black;
}

Quote from marcbelgique

for just the background of the title category

Code

.wbbBoardList [data-board-id="1"] > header >a{
    background-color: red;
}

For the line

Code

.wbbBoardContainer[data-board-id="2"] > div > div > div > h3 {
    background-color: black;
}

Thank you, marcbelgique !

CSS Code you submitted works perfectly.

Display More