1. 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

Discussion in 'Styling and Customization Questions' started by Bonsai Coder, Feb 1, 2015.

  1. Bonsai Coder

    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
     
  2. Bonsai Coder

    Bonsai Coder Active Member

    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
     
  3. Bonsai Coder

    Bonsai Coder Active Member

    Perhaps I'll just make a visual style guide.
     
  4. BassMan

    BassMan Well-Known Member

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

    upload_2015-2-2_21-53-45.png
     
    Bonsai Coder likes this.
  5. Bonsai Coder

    Bonsai Coder Active Member

    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.
     
  6. BassMan

    BassMan Well-Known Member

    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;
    }
     
    Bonsai Coder likes this.
  7. Bonsai Coder

    Bonsai Coder Active Member

    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: Feb 2, 2015
  8. BassMan

    BassMan Well-Known Member

    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;
    }
     
    Bonsai Coder likes this.
  9. Bonsai Coder

    Bonsai Coder Active Member

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

    BassMan Well-Known Member

    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. Bonsai Coder

    Bonsai Coder Active Member

    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: Feb 3, 2015
    BassMan likes this.
  12. Bonsai Coder

    Bonsai Coder Active Member

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

    I'm just learning...
     
  13. BassMan

    BassMan Well-Known Member

    Depends what you want.
     

Share This Page