XF 1.4 Shading on node list

Bonsai Coder

Active member
Is there an easy way to insert shading on the node list so each section "pops" a little more? I'm talking about formatting each node list box with an inner shadow.

From this:
bn2_plain.gif

To this:
bn2_shadow.gif

Additionally, how do I control the width of this line?
bn2_line.gif
 
In case someone else would be interested in making these changes:

(1) The Node List headings are controlled in Style Properties: Building Blocks: Primary Content
(2) You can control the gradient by entering a .png gradient image in the background, and setting it to repeat horizontally. You can align the gradient to the top or bottom, depending on the gradient you are using and the effect you are going for.
(3) The width of the line I reference above can be controlled in the same building blocks menu, in the bottom border settings. By default it is 1px.

Here's what my "after" looks like

example.webp
 
Oh, ok, than it's ok.

I thought you want it only on forum list. For forum list better add something like this in EXTRA.css:

Code:
.nodeList .categoryForumNodeInfo, .nodeList .forumNodeInfo, .nodeList .pageNodeInfo, .nodeList .linkNodeInfo {
    background: url("styles/default/xenforo/gradients/category-23px-light.png") repeat-x scroll center top #dfe7b2 !important;
}
 
Thank you! That's a much better solution for forum list than using Forum/Node List / Node Text Block.

I suppose I can do the same thing for Discussion List?

Code:
.discussionListItem .posterAvatar, .discussionListItem .titleText, .discussionListItem .stats, .discussionListItem .lastPostInfo {
    background: url("styles/default/xenforo/gradients/category-23px-light.png") repeat-x scroll center top #dfe7b2 !important;
}
 
Last edited:
Yes, add this to your EXTRA.css:

Code:
.discussionListItem {
    background: url("styles/default/xenforo/gradients/category-23px-light.png") repeat-x scroll center top #dfe7b2 !important;
}
 
Sorry, wrong code. Add this:

Code:
.discussionListItem .main, .discussionListItem .lastPost {
    background: url("styles/default/xenforo/gradients/category-23px-light.png") repeat-x scroll center top #dfe7b2 !important;
}
 
LOL!

I was about to post almost the exact same thing...

Code:
.discussionListItem .titleText, .discussionListItem .lastPostInfo {
    background: url("styles/default/xenforo/gradients/category-23px-light.png") repeat-x scroll center top #dfe7b2 !important;
}
 
Last edited:
Top Bottom