• 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?

Stuart Wright

Well-known member
#1
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?
 

Russ

Well-known member
#2
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.
 

Shelley

Well-known member
#3
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?
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
 

Stuart Wright

Well-known member
#4
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:

Shelley

Well-known member
#5
Oh, that's awesome, thanks, I'll give it a try.
Basically I want to make it look like this:
View attachment 61974

[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 :)
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:

Stuart Wright

Well-known member
#7
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.
 

Stuart Wright

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

Stuart Wright

Well-known member
#10
In the color palette.
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?
 

Stuart Wright

Well-known member
#12
If not annoying you @Stuart Wright what did you did to remove the descriptions from the title bar? :)
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>
 

Amaury

Well-known member
#13
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?
You could go into the individual style properties.
 

Jeremy

Well-known member
#14
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.