Center forum Title

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

[kdmiller45]

Which templates would I need to edit

[Antechinus]

Nah, you can do it with CSS.

Index.css file. Find this:

Code Select Expand

/* 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:

Code Select Expand

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

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

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