XF 1.4 Shading on node list

[Bonsai Coder]

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:


To this:


Additionally, how do I control the width of this line?

 

[Bonsai Coder]

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

 

[Bonsai Coder]

Perhaps I'll just make a visual style guide.

 

[BassMan]

Not sure about that. On thread view your messages get these if you add gradient to your primary content:

 

[Bonsai Coder]

Not sure about that. On thread view your messages get these if you add gradient to your primary content:

Yes, I wanted that. I can always tweak the gradient and make it a little softer so it doesn't look like so much of a band.

 

[BassMan]

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:

.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;
}

 

[Bonsai Coder]

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?

.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;
}

 

[BassMan]

Yes, add this to your EXTRA.css:

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

 

[Bonsai Coder]

My code worked... sortof... but yours maintained the formatting of the avatar and stats. Can you help me understand why?

 

[BassMan]

Sorry, wrong code. Add this:

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

 

[Bonsai Coder]

LOL!

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

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

 

[Bonsai Coder]

But my code creates a little gap at the top... while your .main does not. You win

I'm just learning...

 

[BassMan]

Depends what you want.