News:

Want to get involved in developing SMF, then why not lend a hand on our github!

Main Menu

Centering the logo within the header.

Started by vet_ca, February 03, 2012, 02:02:39 PM

Previous topic - Next topic

vet_ca

I am new to SMF and I firstly want to thank you all for allowing me to join this great community.  I have found a wealth of information here but have come across one issue that has me totally stumped:  I cannot figure out how to center my logo in, what I believe is referred to as the header.



I am using SMF 2.0.2 with the Chemical Theme by "Runic"

When I "inspect the element" by right clicking the logo in firefox 10.0 I see an area (highlighted in blue) where I could surround the code with <div align="center"> </div>.

 

However I cannot find this piece of code in any theme folder/file nor in any SMF folder/file.  The closest I can get is in the Chemical index.template.php file at ~ line 166 where I have added the div codes around the existing code as: 

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

Unfortunately this code addition has done nothing.  I know I'm missing something here but for the life of me cannot figure out what.  Can someone please point me to the correct file to edit (either in the Chemical Theme or in the SMF folders) so that I may center my logo?

Thank you very much in advance.

vet_ca

Images edited.  Hope that's satisfactory.

kat

Worth trying this?

<div style = "text-align: center;"> <img src="http://www.forumURL.com/Banner.gif" usemap="#Banner" alt="" style="border-style:none" /></div>

Works at my place. :)

Can you modify the images, please, mate?

"Warez" is kinda frowned-upon, here, for obvious reasons.

NanoSector

I think this should be moved to Graphics and Templates. At least that feeling is bugging me :P

Quote from: K@ on February 03, 2012, 02:06:50 PM
Worth trying this?

<div style = "text-align: center;"> <img src="http://www.forumURL.com/Banner.gif" usemap="#Banner" alt="" style="border-style:none" /></div>

Works at my place. :)
I guess the Search bar will block the image from going too far to the middle.
My Mods / Mod Builder - A tool to easily create mods / Blog
"I've heard from a reliable source that the Answer is 42. But, still no word on what the question is."

kat

I just put it after the body tag, in index.template, IIRC.

vet_ca

Thank you for the snippet C@.  What file did you add that code to?  index.template.php?

Hahaha, you must have read my mind.  Thanks again C@

kat

No sweat!

Ta for the edits to the pix, man!

vet_ca

#6
Well I tried your suggestion C@ and crashed the board.  Thankfully had an untouched version of index.template.php so popped that on the server and it good to go again :)  I c&p'd your code snipped (changed the url and image to ours) and put it directly under the <body> tag.  Here's what I see when I inspect the element (logo) in FF 10.0:

<div id="wrapper">
<div id="header">
  <div id="top_section">
  <h1 class="forumtitle">
    <div style = "text-align: center;"> <img src="http://uber_____.org/Themes/uber____2.png" usemap="#Banner" alt="" style="border-style:none" /></div>
    </h1>

However, as I said above I cannot find that piece of code anywhere in any of the folders.  Anyway, thank  you for the code, your suggestion and your time.  Cheers.

P.S.  Very sorry I posted in the wrong forum. :-[

kat

I sold you a dummy, mate.

I used that code with SMF v1.x not v2. :(

Sorry about that!

What I did with v2, is use the usual way, in Admin>Current theme.

To centre it, I made it a transparent gif and made the left side empty, so it looks centred.

vet_ca

Thank you for your help K@.  I tried what you suggested (additional blank area to the left of the actual logo) a little while back but was unhappy with it because the logo would shift position depending on browser window size.

One of the other admin on our developing forum came up with this fix to index.template.php on line 166 which centers and maintains center position regardless of browser window size.

What is originally there, get rid of all this:

<h1 class="forumtitle">
<a href="', $scripturl, '">', empty($context['header_logo_url_html_safe']) ? $context['forum_name'] : '<img src="' . $context['header_logo_url_html_safe'] . '" alt="' . $context['forum_name'] . '" />', '</a>
</h1>

Replace with:

<div style = "text-align: center;"> <img src="hxxp:uberxxxxx.org/Themes/uberXXXX2.png [nonactive]" usemap="#Banner" alt="" style="border-style:none" /></div>

Make sure to remove everything from <h1 class="forumtitle"> to </h1> otherwise it won't work.

Just replace the url and logo graphic file name with your own.  Hopefully you'll find this change useful for your forum also.

Cheers,
vet_ca

kat



cortez

Instead of opening a new topic, I'll guess it's better to use this since the reason is same...

http://www.autobusi.org/forum/index.php

Can somebody help me to center that logo? Without centering all other subforum graphics. :)

Many thanks.

Advertisement: