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

[Stuart Wright]

Hello folks,
I want to insert a div inside the

<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]

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

<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]

Hello folks,
I want to insert a div inside the

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

.node2 .forum_view  .titleBar {background-color: green; padding: 10px 0;}
.node21 .forum_view .titleBar {background-color: purple; padding: 10px 0;}

 

[Stuart Wright]

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


[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

 

[Shelley]

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

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

 

[Stuart Wright]

Working! Awesome, thank you
http://www.avforums.com/categories/video-games.517/
Those before and after css bits are useful.

 

[Stuart Wright]

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]

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?

 

[Amaury]

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?
View attachment 61992

In the color palette.

 

[Stuart Wright]

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?

 

[mauzao9]

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

 

[Stuart Wright]

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

                        <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

                        <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]

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]

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.