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

XF 1.4 Shading on node list

#1
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
 
#2
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.jpg
 

BassMan

Well-known member
#6
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;
}
 
#7
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:

BassMan

Well-known member
#8
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;
}
 

BassMan

Well-known member
#10
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;
}
 
#11
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: