How to center the logo in SMF 2 RC 3?

[Plutuss]

Hello, How to center the logo in SMF 2 RC 3?

I presume that editing some template might be required, but I don't know where to start.

Any help would be appreciated!



Edit:

Update: This is the solution I found that worked:

http://www.simplemachines.org/community/index.php?topic=371909.msg2548923#msg2548923

[YogiBear]

Hi Plutuss,

I'm sure there's a mod for this. If I have a moment I'll take a look around but meanwhile put smf mods in your browser then enter center into the smf page search field.

[Plutuss]

I had already checked and there wasn't. I hope no one passed over the thread because of the above response.

Does anyone know?

[YogiBear]

Don't worry, Plutuss, the thread is still open until it's marked Solved either by you or by a Moderator.

I'll keep on looking but meanwhile, if you don't get a response in 24 hours then it's OK to bump the thread, lol.

[Plutuss]

Thanks Yogi. At first I thought your reply was sarcastic. I always search diligently on the site and Google before asking a question.

I have tried adding a div center tag in the display.index, but that moves the logo to the right margin (and beyond). So I am really at a loss why there isn't a straightforward way to do it.

It's not like centering logos is something no one would ever want to do in a forum.

[YogiBear]

No prob, Plutuss. 

This is bugging me because I've seen this done but can't remember how. My only thoughts are this mod was installed...

http://custom.simplemachines.org/mods/index.php?mod=2383

...which removed the SMF logo so a banner can be used full-width and centred.

Can anyone confirm this? 

[CommanderMadi]

Open ./Themes/default/index.template.php

Find:

Code (Find) Select Expand


<a href="', $scripturl, '">', empty($settings['header_logo_url']) ? $context['forum_name'] : '<img src="' . $settings['header_logo_url'] . '" alt="' . $context['forum_name'] . '" />', '</a></div>


Replace:

Code (Replace) Select Expand


<div style="margin-left:450px;"><a href="', $scripturl, '">', empty($settings['header_logo_url']) ? $context['forum_name'] : '<img src="' . $settings['header_logo_url'] . '" alt="' . $context['forum_name'] . '" />', '</a></div>


Then change the px value '450' until it looks right

[smp420]

DOing that wouldn't center it on certain resolutions instead use

Code Select Expand

<div style="margin: 0 auto;"><a href="', $scripturl, '">', empty($settings['header_logo_url']) ? $context['forum_name'] : '<img src="' . $settings['header_logo_url'] . '" alt="' . $context['forum_name'] . '" />', '</a></div>


[Plutuss]

Neither solution worked...in fact made no change at all.

[Plutuss]

Does anyone else have a solution?

Out of the many thousands of SMF users, all of them have a logo that is to one side or the other? Am I really to believe this? 

The hundreds of views this topic has gotten in its short life seems to indicate that the question is of interest to many others, too. I would be grateful if anyone has an answer.

[coldy316]

plutuss it actually depends on what theme you use as well. not all themes are set up the same
I'm using ( miscellany ) nice theme from crip and in the index.template.php i do not see any of
that info thats been supplied to you in there.

I'm trying to figure out myself how to center and make my logo a fraction bigger. my logo banner is 500x85
and i cant figure it out where to look.

[Antechinus]

Index.css:

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

Change to:

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

Haven't tried it but it should work. You'll probably also want to remove this from index.template.php:

Code Select Expand

', empty($settings['site_slogan']) ? '<img id="smflogo" src="' . $settings['images_url'] . '/smflogo.png" alt="Simple Machines Forum" title="Simple Machines Forum" />' : '<div id="siteslogan" class="align_right">' . $settings['site_slogan'] . '</div>', '

[MATTEK]

Index.css:

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

Change to:

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

Haven't tried it but it should work. You'll probably also want to remove this from index.template.php:

Code Select Expand

', empty($settings['site_slogan']) ? '<img id="smflogo" src="' . $settings['images_url'] . '/smflogo.png" alt="Simple Machines Forum" title="Simple Machines Forum" />' : '<div id="siteslogan" class="align_right">' . $settings['site_slogan'] . '</div>', '

I confirm that this works. Antechinus helped me with this a while back and it worked like a charm. However, I don't recall that last part. Should I do that as well?

[ermetico]

Let me take the chance to use this topic for 2 main reason about the forum width and logo size.
I have the 2.rc3 installed ( core theme) and i have many problems to fit the forum width because it dosen't work with many people different screens.
Browser is not important ( it works fine with all) but size is!

Do we have a solution for : One size fits all?
Thanks

[Plutuss]

Still didn't work. Thanks anyway.

Maybe SMF Version 3 will have an option to center the logo.

[Antechinus]

SMF 3 probably will not have that option. Some things aren't worth the code to write them. Did you clear your browser cache and force a reload (Ctrl+F5) after changing the CSS?

[Plutuss]

I did yes, of course. And I am using the default theme.

Is making things centred so difficult in css? The menu isn't centred either - I don't know anything about css, so I am genuinely curious. It is impossible to center images in css?

I have no particular attachment to using the logo box in the Admin panel, so even if someone has a way to centre an image via its raw url, within the header, I would be appreciative.

[Plutuss]

I found advice that worked like a charm, courtesy of Mr. Chas Large:

http://www.simplemachines.org/community/index.php?topic=371909.msg2548923#msg2548923

I hope this may be of assistance to others too.

[Antechinus]

Hmm. Could probably come up with a simpler solution than that. I'll have a go at it.

Also yes, the menu can be centered. I've already made a mod for that. Link is in my sig.

[edi67]

Index.css:

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

Change to:

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

I made this change and work perfectly logo is centered but only little problem ante, the logo is in top of forum and is not good view for my logo so i need to put logo some line down but is i insert margin value for example 40px logo go down but also all profile ( avatar, messagese etc) go down there is some solution for have only the logo down but all the rest not?