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

XF 1.4 Apply this CSS to all nodes

Discussion in 'Styling and Customization Questions' started by mauzao9, Sep 13, 2014.

  1. mauzao9

    mauzao9 Well-Known Member

    Heya, i customized the Thread / Forum / Pages titles into one box:
    [​IMG]

    But the thing is, the css i own requires it to manually add the .nodeX .titlebar to every node i want to costumize:
    Code:
    .node3 .titleBar {
    CSS content
    .node3 .titleBar h1 {
    color: #EAEAEA; text-shadow: 0 1px 3px #1E1E1E;}
    The question is, what should i target with title bar, so all title bars on all forums get this visual?
    Thanks!
     
  2. Russ

    Russ Well-Known Member

    Just:

    Code:
    .titleBar
    {
    css
    }
    
    You may need an !important after each item, for the h1 title or page description there's properties for it:

    Style Properties -> General
     
  3. mauzao9

    mauzao9 Well-Known Member

    Thanks for reply @Russ the thing is i already have one use of .titlebar on css, i used the .node .titlebar over it for give a separate the title visual of forums/threads and normal page titles. There isn't another way? Like if i try to mention several nodes on the css, it simply breaks it.
     
  4. Russ

    Russ Well-Known Member

    I mean I guess I'd have to see which nodes you'd want to customize. If you want a single page such as... Help to have a unique color but all your nodes the same color, then I'd color .titleBar to the main color you want all your nodes, then style it special for help.

    Another thing you can select by category, each node when viewing it also has it's parent class:

    Main Section (node1)
    - News (node2 node1)
    - Feedback (node3 node1)

    So anytime you're inside Feedback, it should have the node1 class from it's parent. I hope that didn't confuse you like it did me after typing it :D
     
    mauzao9 likes this.
  5. mauzao9

    mauzao9 Well-Known Member

    @Russ i think this did it,
    .node3 .titleBar,
    .node55 .titleBar,
    .node67 .titleBar,
    .node12 .titleBar,
    .node17 .titleBar,
    .node4 .titleBar {

    Mentioned all of the main category ids, doing with the category node will make the same for everything inside, including threads! :)
     
    Russ likes this.
  6. mauzao9

    mauzao9 Well-Known Member

    This is the last thing i'm lacking knowledge to poke one, the description, need to hide it because it doesn't fit on the box.
     
    Last edited: Sep 13, 2014
  7. Russ

    Russ Well-Known Member

    You can adjust the padding Style Properties -> General -> Page Description

    Maybe remove any top padding/margin and add a little bottom margin.

    May need to reduce the bottom margin on your custom titleBarh1 as well.
     
  8. mauzao9

    mauzao9 Well-Known Member

    Hmm, can i just hide the description with some css / template edit? It would still work on mouse-hover i guess, because this boxy style looks so pretty that text just doesn't feel right there.
     

Share This Page