Adding a different colored gradient background per category bar?

[Kevin]

What would be the easiest way of adding different colored gradient background per category bar?

In case I'm not referring to the area correctly, if you take a look at the forums here what I'm calling the "category bar" is where the category name & description is shown above the grouping of forums in that category, such as "Official Forums", "Public Forums", "XenForo Bug Reports", and so on.

To make life simple, is there way of achieving it through CSS only (as opposed to using a gradient background image)?

 

[Shelley]

if you look at bbsmiley I used css gradient for the premium area using the following you would just adjust it accordingly with the css gradient colour of your choice and node category id.

.nodeList  .node_24 .categoryStrip {
background: url('@imagePath/xenforo/gradients/category-gradient1.png') repeat-x center; /* Old browsers */
background: -moz-linear-gradient(top, #c75454 0%, #a52929 10%, #871717 60%, #640000 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#c75454), color-stop(10%,#a52929), color-stop(60%,#871717), color-stop(100%,#640000)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #c75454 0%,#a52929 10%,#871717 60%,#640000 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #c75454 0%,#a52929 10%,#871717 60%,#640000 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #c75454 0%,#a52929 10%,#871717 60%,#640000 100%); /* IE10+ */
background: linear-gradient(to bottom, #c75454 0%,#a52929 10%,#871717 60%,#640000 100%); /* W3C */
border-color: #9f1919 #9f1919 #5f0c0c;}

 

[Kevin]

if you look at bbsmiley I used css gradient for the premium area using the following you would just adjust it accordingly with the css gradient colour of your choice and node category id.

Thank you very much, that'll be my experiments this weekend!

PS: I noticed the different headers when logging on.... I love that nighttime header!

 

[Forsaken]

If you're planning a lot of different colored categories you should probably go with a transparent gradient image rather than CSS3 gradients.

That way all you'll need to do is change the color of the background, and the image will turn it into a gradient.