1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

Adding a different colored gradient background per category bar?

Discussion in 'Styling and Customization Questions' started by Kevin, Apr 5, 2013.

  1. Kevin

    Kevin Well-Known Member

    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)?
  2. Shelley

    Shelley Well-Known Member

    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;}
    Tracy Perry and Kevin like this.
  3. Kevin

    Kevin Well-Known Member

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

    PS: I noticed the different headers when logging on.... I love that nighttime header!
    Shelley likes this.
  4. Forsaken

    Forsaken Well-Known Member

    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.
    Tracy Perry and Kim like this.

Share This Page