Replacing the category strip with image(s)

[Bain]

Hello,

I am working on a skin for the Coast to Coast AM Forum and was wondering if there was a way to replace the category strip in: .nodeList .categoryStrip

And have images shown in its place. Each separate category node would have its own unique category strip header. I assume it would work similar to how icons are replaced?

 

[Paul B]

This is one way of doing it - add this to EXTRA.css

.node.category.level_1.node_2 .categoryText {
background-color: #CC0000;
}

Change the node number for each category node id.
Amend the CSS to suit.

You will need to make changes to the other CSS which affects the category strip, such as removing the background image, etc.

 

[Paul B]

An alternative method is to do this:

.nodeList .categoryStrip {
background: none !important;
border: none !important;
border-radius: none !important;
}

.node.category.level_1.node_2 {
background-color: #CC0000;
}

First remove all the styling from the category strip and then re-apply it individually.

 

[Akrion]

Brogan is dead on. I am doing this exact approach in my current project. I do wish there was a configurable way of doing this outside of matching the node ids.

 

[Paul B]

Damn!

I really, really want to do this but I'm absolutely hopeless with graphics

I think I'll persevere though as done correctly it can really add another dimension to a forum home page.

 

[Shelley]

Damn!

I really, really want to do this but I'm absolutely hopeless with graphics

I think I'll persevere though as done correctly it can really add another dimension to a forum home page.

Well since you posted that css it's just motivated me into doing just that. Damn you brogan and your excellent tidbits of information.

 

[Renada]

An alternative method is to do this:

.nodeList .categoryStrip {
background: none !important;
border: none !important;
border-radius: none !important;
}

.node.category.level_1.node_2 {
background-color: #CC0000;
}

First remove all the styling from the category strip and then re-apply it individually.

Gawd now you have me faffing around with my categories. I've changed the colour of the category strips using the above code. How would I be able to style the rest of the category - i.e. the speech bubbles, forum name links, last post background to match?

This is the code I have so far:

/* Category strips */

.node.category.level_1.node_3 .categoryStrip {
background-color: #CC0000;
}

.node.category.level_1.node_11 .categoryStrip {
background-color: #FEFFB8;
}

.node.category.level_1.node_22 .categoryStrip {
background-color: #FFDDEE;
}

I've done it this way because I don't want ALL the categories changing.

Thanks for any help

Renada

 

[Renada]

An alternative method is to do this:

.nodeList .categoryStrip {
background: none !important;
border: none !important;
border-radius: none !important;
}

.node.category.level_1.node_2 {
background-color: #CC0000;
}

First remove all the styling from the category strip and then re-apply it individually.

Hi,

Okay I've worked out some more but I've run into a problem. This is my code for one category.

.node.category.level_1.node_3 .categoryStrip {
background-color: #CC0000;
}

.node.category.level_1.node_3 .nodeIcon {
    background-image: url("styles/default/xenforo/widgets/forum_unread1.png");
}

.node.category.level_1.node_3 .node .nodeLastPost {
    background-color: #CC0000;
}

1) Can you tell me how to put that all together or do I need the 3 separate instances of css? That will be a lot of css to keep track of over several categories if so, but that's ok

2) I've managed to change the speech bubble colour but I think this now makes the image hard coded so it won't change to "read" when all the messages are read. Is this correct? If yes, what do I do to correct that so that it changes to light/dark depending on whether or not there are read/unread messages?

3) I have it setup so that if you click the category name the page refreshes with just the selected category and its list of forums. (not like here where it just scrolls down to the category you click). Thing is, when I click on the category title now the new page still refreshes to give me just that category and its forums but it has reverted to all the original colours so it's ignoring all the new css entries even though the main forum page is showing the new colours. What did I do wrong?

Regards,
Renada

 

[Bain]

Brogan-

Thanks for the help. I appreciate it! Will that also work for subcategories by placing in level_2 and so on?
Also, is it possible to increase the category title (font size) and have it centered?

 

[Paul B]

Apologies for not responding to this thread, I've been a little busy lately.

I'll see what I can do with regards to answering each question soon.

Anyone else is free to chime in though

 

[dtmcl]

could this be applied to individual nodes instead of categories?

 

[ArnyVee]

Any new techniques or updates that folks can share? I wanted to do this for one of my sites that I'd like to bring over to xF.

 

[Shelley]

Any new techniques or updates that folks can share? I wanted to do this for one of my sites that I'd like to bring over to xF.

It's basically the same way as brogan posted. Below is the way I did it when styling Urban Fantastic though you may have to adjust the title and sub title position depending on your height of the category image.Just insert that in your EXTRA.CSS Template.

fieldset .nodeList.sectionMain .node.category.level_1.node_4 .categoryText {
    background: url("@imagePath/xenforo/gradients/4.png") no-repeat scroll right center transparent;
    height: 40px;
}
fieldset .nodeList.sectionMain .node.category.level_1.node_10 .categoryText {
    background: url("@imagePath/xenforo/gradients/10.png") no-repeat scroll right center transparent;
    height: 40px;
}
fieldset .nodeList.sectionMain .node.category.level_1.node_14 .categoryText {
    background: url("@imagePath/xenforo/gradients/14.png") no-repeat scroll right center transparent;
    height: 40px;
}
fieldset .nodeList.sectionMain .node.category.level_1.node_22 .categoryText {
    background: url("@imagePath/xenforo/gradients/14.png") no-repeat scroll right center transparent;
    height: 40px;
}
.nodeList .categoryStrip {
    background: url("@imagePath/xenforo/gradients/gradient_main.png") repeat-x scroll center top #F9D9B0!important;
    border: 1px solid #4d4944 !important;
    border-radius: 4px 4px 4px 4px;
    border-top: 1px solid #F9D9B0;
    color: #6D3F03;
    font-size: 11px;
    margin: 0;
    min-height: 6px;
    padding: 0 0 0 10px !important;
}

The following code was primarily done/need to position the text/subtext so the position/colouring was aligned, your's will be different pending on the height.

.nodeList .categoryStrip .nodeTitle {
    color: #f0e3d5 !important;
    font-size: 10pt;
font-style: georgia !important;
    padding-top: 5px !important;
}
.nodeList .categoryStrip .nodeTitle a {
    color: #e3d7cb !important;
}
.nodeList .categoryStrip .nodeDescription {
    color: #eeeae5 !important;
    font-size: 10px;
}

 

[ArnyVee]

Thanks Shelley!

I know that this was discussed on your old site (BBSmiley), but since it wasn't around I had no record of it.

But now you have enlightened me once again

 

[wickedstangs]

What is the Category Strip image size to do this?

is the file category-23px-light.png the right one to mess with?

Trying to make my category strip look like this.

 

[Brandon Sheley]

Hello,

I'm trying to do something like this.

.node.category.level_1.node_3 .categoryStrip {
    background-image: url("styles/default/xenforo/widgets/forum_unread1.png");
}

I'd like to make all category strips with the image I'm using, is there a way to do that or is it best I just repeat for each node?

Thanks

 

[Paul B]

If you omit the node ID it should apply to all.

 

[Jim Kingsnorth]

On my two custom themes (I created and am trying to convert to xf) I use 3 images. Is it possible to do that? I have a right and left image and a background image.