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

XF 1.2 How do I insert a div around the h1 titlebar?

Discussion in 'Styling and Customization Questions' started by Stuart Wright, Nov 27, 2013.

  1. Stuart Wright

    Stuart Wright Well-Known Member

    Hello folks,
    I want to insert a div inside the
    HTML:
    <div class="titleBar">
    around the h1 in the page_container template.
    I want to give the new div an id of something like titleNode{$nodeid} so I can style the page title differently for certain specific nodes (the categories, actually).
    Basically I want to give it a different background colour and some other fancy stuff to continue the new theme of our forum list (http://www.avforums.com/forums/).
    What's the best way to achieve this please?
     
  2. Russ

    Russ Well-Known Member

    Could you just use the extra body class that's given or the class given:

    Code:
    <div class="forum_list" id="content">
    
    + .titleBar to achieve what you want to do? We do it on pixelexit.com to change little elements on the titlebar per page.
     
  3. Shelley

    Shelley Well-Known Member

    Are you referring to the titleBar on forum_view ? if so, you could do something like this using node ID in EXTRA.CSS

    Edit: Think I mis-read what you meant.

    Code:
    .node2 .forum_view  .titleBar {background-color: green; padding: 10px 0;}
    .node21 .forum_view .titleBar {background-color: purple; padding: 10px 0;}
    
    Screenshot_23.png Screenshot_24.png
     
  4. Stuart Wright

    Stuart Wright Well-Known Member

    Oh, that's awesome, thanks, I'll give it a try.
    Basically I want to make it look like this:
    temp1.jpg

    [edit: hmmm. doesn't work.
    It's here:
    http://www.avforums.com/categories/home-entertainment.495/
    and
    .node495 .forum_view .titleBar {background-color: purple;} won't apply in firebug because those classes aren't relevant. I'm guessing.

    edit2: oo oo this works, though:
    .node495 .titleBar {
    background-color: #800080;
    }

    Thanks :)
     
    Last edited: Nov 27, 2013
  5. Shelley

    Shelley Well-Known Member

    Looking at you screenshot. to get those images you could use the before and after selectors. Something like the following...

    Screenshot_25.png

    Code:
    .node21 .titleBar {background-color: purple; padding: 10px; border-radius: 4px;}
    .node21 .titleBar h1 {color: #dcbde9;}
    .node21 .titleBar h1:before {
      background: url("@imagePath/xenforo/icons/icons&f.png") no-repeat center left transparent;
      content: "";
      padding-left: 50px;}
    .node21 .titleBar h1:after{
      background: url("@imagePath/xenforo/icons/icons&f1.png") no-repeat center right transparent;
      content: "";
      float: right;
      height: 35px;
      width: 200px;}
    
     
    Last edited: Nov 27, 2013
    mauzao9, xf_phantom and Russ like this.
  6. Stuart Wright

    Stuart Wright Well-Known Member

    MattW likes this.
  7. Stuart Wright

    Stuart Wright Well-Known Member

    Bit surprised that the title css took effect in all the subforums and all the threads in them!!!
    Kind of a happy suprise, but I had to do some emergency tweaking to get the page descriptions out of the titleBar divs, and the left-hand background icons don't work in thread titles, so I have ditched those.
     
  8. Stuart Wright

    Stuart Wright Well-Known Member

    Next question, please.
    How do I change the colours of
    @secondaryLight (light)
    @primaryMedium (medium)
    @secondaryMedium (dark)
    (as used by the page nav and the thread list headers and the buttons) to match the new heading colours in the various categories?
    temp4.jpg
     
  9. Amaury

    Amaury Well-Known Member

    In the color palette.
     
  10. Stuart Wright

    Stuart Wright Well-Known Member

    Dynamically depending upon which category we are visiting?
    Is there a quicker way of doing it rather than setting up light, medium and dark versions of 10 different colours and then specifying each one for all the different elements depending upon which category we are in?
     
  11. mauzao9

    mauzao9 Well-Known Member

    @Shelley such awesome things you make happen! <3
    If not annoying you @Stuart Wright what did you did to remove the descriptions from the title bar? :)
     
  12. Stuart Wright

    Stuart Wright Well-Known Member

    I edited page_container and changed this
    HTML:
                            <xen:if is="!{$noH1}">                       
                                <!-- h1 title, description -->
                                <div class="titleBar">
                                    {xen:raw $beforeH1}
                                    <h1><xen:if
                                        is="{$h1}">{xen:raw $h1}<xen:elseif
                                        is="{$title}" />{xen:raw $title}<xen:else
                                        />{$xenOptions.boardTitle}</xen:if></h1>
                                <xen:if is="{$pageDescription.content}"><p id="pageDescription" class="muted {$pageDescription.class}">{xen:raw $pageDescription.content}</p></xen:if>
                                </div>
                            </xen:if>
    
    to this
    HTML:
                            <xen:if is="!{$noH1}">                       
                                <!-- h1 title, description -->
                                <div class="titleBar">
                                    {xen:raw $beforeH1}
                                    <h1><xen:if
                                        is="{$h1}">{xen:raw $h1}<xen:elseif
                                        is="{$title}" />{xen:raw $title}<xen:else
                                        />{$xenOptions.boardTitle}</xen:if></h1>
                                </div>
                                <xen:if is="{$pageDescription.content}"><p id="pageDescription" class="muted {$pageDescription.class}">{xen:raw $pageDescription.content}</p></xen:if>
                            </xen:if>
    
     
    mauzao9 likes this.
  13. Amaury

    Amaury Well-Known Member

    You could go into the individual style properties.
     
  14. Jeremy

    Jeremy XenForo Moderator Staff Member

    Individual style properties will apply to the entire forum, regardless of node you are in. But no, Stuart, if you want different colors based on node, you will need to define them in EXTRA.css individually.
     
    Shelley and Amaury like this.

Share This Page