XF 1.5 Text in center of Header

[NavyRet]

I would like to be able to insert text in the middle of the header between the two logos (one on each side). Any help will be greatly appreciated. Thanks.

LOGO

I would like to insert various text messages here with the ability to change it when I want to. Thanks.​

LOGO

 

[NavyRet]

Well, thanks anyway, folks.

 

[Russ]

This would be one approach:

Edit ad_header template

<div class="header-text">
    This is a slogan
</div>
<div class="header-right">
    <img src="https://dummyimage.com/100x90/000/fff.png" />
</div>

Add this to extra.less:

#header .pageWidth .pageContent
{
    position: relative;
    text-align: center;
}
.header-text
{
    position: absolute;
    margin: 0 auto;
    left: 0;
    right: 0;
}
.header-right
{
    position: absolute;
    right: 0;
}
@media (max-width:610px)
{
    .header-text, .header-right { display: none; }
}

It'd hide the elements in mobile.

 

[NavyRet]

Thanks, but all that did was place the text over the left logo. I think what you put might be for XF 2.x, not 1.5.22.

 

[Russ]

Thanks, but all that did was place the text over the left logo. I think what you put might be for XF 2.x, not 1.5.22.

My code is for 1.5.x, not the 2.x series.

Definitely works on mine, you may have a custom style that's preventing this. If you do have you tried contacting your style author for assistance?

 

[NavyRet]

Nope, puts it over the left logo in the default style. Also, I do not have an "extra.less". I have an extra.css. That's why I thought it was for 2.x

 

[NavyRet]

I know it's been a while, but I would still like to do this. I just don't know where to start or how to even search for it. Any help would be appreciated and please make sure it's for 1.5.x. Thanks.

 

[Russ]

My edit does work from what I recall, if you apply it and link your site I can take a look to see what's going on.

 

[NavyRet]

I don't know why it didn't work before but it does now. Thanks. Now is there a way to center the text vertically in the header?

 

[Russ]

Just add to the .header-text:

.header-text
{
    position: absolute;
    margin: 0 auto;
    left: 0;
    right: 0;
top: 30px; 
}

Adjust the 30px.

 

[NavyRet]

Perfect. One last question and I'll go away.
Is there a way to show it only to users not logged in?

 

[Russ]

Take a look at conditions: https://xenforo.com/community/resources/conditional-statements.1604/ point #2.

 

[NavyRet]

I'm sorry, but I don't understand. Where would that conditional statement go in relation to this?

<div class="header-text">
    This is a slogan
</div>
<div class="header-right">
    <img src="https://dummyimage.com/100x90/000/fff.png" />
</div>

 

[Russ]

You'd put the conditional around your html.

 

[NavyRet]

Ahso. Thanks again. You're a gem.