Center forum Title

Started by kdmiller45, September 03, 2015, 10:02:04 PM

Previous topic - Next topic

kdmiller45

I am in the admin console under Configuration/server setting/General/ and have the tile of the forum showing left justified, is there anyway I can center it, see attached

Kindred

You would have to directly edit the template....
Слaва
Украинi

Please do not PM, IM or Email me with support questions.  You will get better and faster responses in the support boards.  Thank you.

"Loki is not evil, although he is certainly not a force for good. Loki is... complicated."

kdmiller45

Which templates would I need to edit

Antechinus

Nah, you can do it with CSS.

Index.css file. Find this:

/* the main title, always stay at 45 pixels in height! */
h1.forumtitle
{
line-height: 45px;
font-size: 1.8em;
font-family: Geneva, verdana, sans-serif;
margin: 0;
padding: 0;
float: left;
}
/* float these items to the right */
#siteslogan, img#smflogo
{
margin: 0;
padding: 0;
float: right;
line-height: 3em;
}


Change it to this:

/* the main title, always stay at 45 pixels in height! */
h1.forumtitle
{
line-height: 45px;
font-size: 1.8em;
font-family: Geneva, verdana, sans-serif;
margin: 0;
padding: 0;
text-align: center;
}
/* float these items to the right */
#siteslogan, img#smflogo
{
display: none;
}


If you're feeling lazy, don't bother finding the old code. You can just add the new code to the end of the file and it should still work.

Kindred

Antechinus,

every time I have tired to edit that section just using CSS, it never worked - because there is a whole bunch of other crap in the header preventing it from taking the entire width....
Слaва
Украинi

Please do not PM, IM or Email me with support questions.  You will get better and faster responses in the support boards.  Thank you.

"Loki is not evil, although he is certainly not a force for good. Loki is... complicated."

Antechinus

Which is why I got rid of the logo and slogan in that example. ;)

Or, you can set the "other crap" to absolute positioning if you like. That way it will overlap any non-absolute content. You can use that trick to set the upshrink icon over the end of the banner if you want a full width banner.  I've done that before (it's in the Tips and Tricks thread about full-width banners).

Short version: you can do it with CSS. Really. :)

(TBH the code I gave him will leave it slightly off centre because of the upshrink, but unless the title is very wide and the screen is narrow it probably won't be noticeable)

Kindred

I didn't DOUBT that you could (after you gave an example)
I was just explaining that I was never able to do so.  :-[
Слaва
Украинi

Please do not PM, IM or Email me with support questions.  You will get better and faster responses in the support boards.  Thank you.

"Loki is not evil, although he is certainly not a force for good. Loki is... complicated."

Antechinus

Ah. Well it's not that hard to do once you know a few basics. Just use display: none; to get rid of anything you don't want. If you want to keep something but sit it over the banner, use absolute positioning. Set #header to position: relative; and then anything inside it which is set to absolute can be positioned to the header itself, and the banner will just ignore it and go full-width.

Advertisement: