Multi-coloured Node Li

[guclusat]

Multi-coloured Node Li

Summary: Display multi-coloured (different coloured forum areas). Bare in mind this should be used as reference and your node IDs will most certainly be different as well as your images.



Depending on the size of the images you use in the left hand side of the category (as shown in the screenshot) you will have to adjust the padding-left. Basically, it's a reference guide for you to tinker with and experiment so I won't be providing too much support with this.

Paste the following code into your EXTRA.CSS template and adjust the node IDs and image paths (you'll have to use your own) or simply remove the css if you don't want to display an icon in the category.

/* MULTI COLOURED NODE Li MULTI COLOURED NODE LI */

.forum_list .sectionMain { border: 0px solid #A5CAE4; padding: 0; }
.nodeList  .node_1 .categoryForumNodeInfo, .nodeList .node_1 .forumNodeInfo, .nodeList .node_1 .pageNodeInfo,
.nodeList .node_1 .linkNodeInfo,
.nodeList  .node_16 .categoryForumNodeInfo, .nodeList .node_16 .forumNodeInfo, .nodeList .node_16 .pageNodeInfo,
.nodeList .node_16 .linkNodeInfo,
.nodeList  .node_24 .categoryForumNodeInfo, .nodeList .node_24 .forumNodeInfo, .nodeList .node_24 .pageNodeInfo,
.nodeList .node_24 .linkNodeInfo {
    background-color: transparent;

}

/* Purple Area Purple Area */

.nodeList .node_1{
    margin-bottom: 20px;
    border: 1px solid #cc70cc;
    background-color: #fedbfe;
    padding: 10px;
    border-radius: 4px; }

.nodeList  .node_1 .categoryStrip {
    background-color: violet;
        border-top: 1px solid #cc70cc;
        border-bottom: 1px solid #cc70cc; }

.node_1 .nodeTitle a, .node_1 .nodeLastPost a  {
        color: purple; }
.node_1 .nodeLastPost.secondaryContent {
        border: 1px solid #e5b2e5;
        background: url("@imagePath/xenforo/gradients/category-23px-light.png") repeat-x scroll center top #f7e6ff; }
  
.nodeList .node_1 .categoryStrip .nodeTitle a {
        color: purple; }

.nodeList .node_1 .categoryStrip .nodeDescription {
        color: #ffe6ff;
        font-size: 11px;
        font-family: helvetica; }

.node_1 .categoryStrip .categoryText {
        padding-left: 45px;
        background: url("@imagePath/xenforo/icons/image1.png") no-repeat scroll left center transparent; }

.nodeList .node_1  .forumNodeInfo, .nodeList .node_1 .linkNodeInfo, .nodeList .node_1 .pageNodeInfo {
border-bottom: 1px solid #e1b5e1; }

/* Purple Area Purple Area */



/* Blue Area Blue Area */

.nodeList .node_16 {
    margin-bottom: 20px;
    border: 1px solid #a7cbd7;
    background-color: #c9ebf6;
    padding: 10px;
    border-radius: 4px; }

.nodeList .node_16 .categoryStrip {
    background-color: #91cbde;
        border-top: 1px solid #6aabc0;
        border-bottom: 1px solid #6aabc0; }

.nodeList .node_16 .categoryStrip .nodeTitle a {
        color: #2d6c80; }

.node_16 .nodeLastPost.secondaryContent {
    border: 1px solid #abd1de;
    background: url("@imagePath/xenforo/gradients/category-23px-light.png") repeat-x scroll center top #e6f9ff; }

.nodeList .node_16 .categoryStrip .nodeDescription {
        color: #f5fcfe;
        font-size: 12px;
        font-family: helvetica; }

.node_16 .categoryStrip .categoryText {
        padding-left: 45px;
        background: url("styles/default/xenforo/icons/image16.png") no-repeat scroll left center transparent; }

.nodeList .node_16  .forumNodeInfo {
        border-bottom: 1px solid #a7cbd7; }

/* Blue Area Blue Area */


/* Green Area Green Area */

.nodeList .node_24{
    margin-bottom: 20px;
    border: 1px solid #afd4af;
    background-color: #d1f4d1;
    padding: 10px;
    border-radius: 4px; }

.node_24 .nodeTitle a,  .node_24 .nodeLastPost a {
    color: green; }

.node_24 .nodeLastPost.secondaryContent  {
    border: 1px solid #acdbac;
    background: url("@imagePath/xenforo/gradients/category-23px-light.png") repeat-x scroll center top #effdec; }

.nodeList .node_24 .categoryStrip {
    background-color: #6dd56d;
        border-top: 1px solid #5eb95e;
        border-bottom: 1px solid #5eb95e; }

.nodeList .node_24 .categoryStrip .nodeTitle a {
        color: green; }

.nodeList .node_24 .categoryStrip .nodeDescription {
        color: #e0fde0;
        font-size: 12px;
        font-family: helvetica;
        text-shadow: 0 0 0 transparent, 0 1px 1px darkgreen; }

.node_24 .categoryStrip .categoryText {
        padding-left: 45px;
        background: url("styles/default/xenforo/icons/image24.png") no-repeat scroll left center transparent; }

.nodeList .node_24  .forumNodeInfo {
        border-bottom: 1px solid #b6dbb6; }

/* Green Area Green Area */

/* MULTI COLOURED NODE Li MULTI COLOURED NODE LI */

I suggest testing it on a test forum until your familiar with adjusting the css and your happy altering it.

I wish you success.