[cXF] Coloured Node Categories

[BassMan]

BassMan submitted a new resource:

Coloured Node Categories - ... simple to achieve

Check Free and Premium cXF DIY Customizations on customizexf.com

View attachment 165172

Add code to your extra.less template:

/* Coloured Node Categories */
.block.block--category.block--categoryX .block-header {
    background: #009ACF;
    color: #ffffff;
}
/**********/

Change X to your node ID.


How do I find node ID?...

Read more about this resource...

 

[bobs409]

Neat!

 

[ElsmarMarc]

New person here - Bought today.

What is a "node" in Xenforo language?

 

[Paul B]

A category, forum, page, or link node.

 

[ElsmarMarc]

Thanks. I sort of figured. Getting a bit old to associate some stuff after vB since 2002 so I have to confirm some stuff. xenforo is a new "language" at times (especially templates). So, excuse me for my "old man" ignorance. i appreciate the reply!

 

[Codeless]

how can we done for forums title ?

 

[Dermot]

how can we done for forums title ?

if you mean how to colour title of category, i'd say something like..

.block.block--category.block--category3 .block-header {
    color: #ffffff;
}

...if that's what you're asking of course, change category3 to whatever number the category you want to change is.

 

[Codeless]

Title i marked with Green Marker is forum title and yello marked is Category title this methods works for Category title not for Forum Title (which is marked with green color
)

 

[BassMan]

@Codeless
Try with this:

.node.node--idX h3.node-title a {
    color: #000000;
}

The X is your node id.

 

[Codeless]

@Codeless
Try with this:

.node.node--idX h3.node-title a {
    color: #000000;
}

The X is your node id.

Wow thank you works great for me Thank you

well also i can place custom icon on same way ?

 

[Dermot]

Wow thank you works great for me Thank you

well also i can place custom icon on same way ?

something like...

.node--forum.node--id3.node--read .node-icon i:before{content: url(./images/forumicons/whatever.png);}
.node--forum.node--id3.node--unread .node-icon i:before{content: url(./images/forumicons/whatever.png);}

..changing id3 to whichever node id it is.

 

[BassMan]

@Codeless
Check the code @Dermot provided above.

 

[Codeless]

@Codeless
Try with this:

.node.node--idX h3.node-title a {
    color: #000000;
}

The X is your node id.

how can we use gradient color

 

[BassMan]

how can we use gradient color

If you mean for category nodes then this page can be helpful: http://www.colorzilla.com/gradient-editor/

 

[Dermot]

how can we use gradient color

https://www.w3schools.com/css/css3_gradients.asp is also a great link for understanding gradients in CSS.

 

[nap]

Thank you so much! I used all this info for my site <3 <3 <3

Is there a way to use this color changes on widgets?

Regards

 

[BassMan]

Is there a way to use this color changes on widgets?

Yes, you can use this code:

[data-widget-key="forum_overview_new_posts"] h3.block-minorHeader {
    background: #000000;
}

... for this example:



Just inspect element and find your widget key and edit the code to suit your needs for any widget:

 

[nap]

Whow!! You are the best !!

Super thank you

 

[nap]

Some, I can't change
The widget "Forum_overview_new_posts", I changed, it did work in "Simple Display style mode", but changes back in (now) ugly light blue gradient, in "Full Display mode".

Check my site, some I cant just change, like the shoutbox, calander or the text colour of the sub nodes/categories

Thank you

 

[BassMan]

The widget "Forum_overview_new_posts", I changed, it did work in "Simple Display style mode", but changes back in (now) ugly light blue gradient, in "Full Display mode".

Use this code:

[data-widget-key="forum_overview_new_posts"] h3.block-header {
    background: #000000;
}

shoutbox

.siropuShoutbox.block .block-header {
    background: #000000;
}

calander

That widget does not have its own class. Maybe a developer can add it.

the text colour of the sub nodes/categories

Try this:

.node.node--idX a.subNodeLink.subNodeLink--forum {
    color: #000000;
}

The X is your node id.