Advertisement:

Author Topic: Centering the logo within the header.  (Read 4835 times)

Offline vet_ca

  • Newbie
  • *
  • Posts: 7
Centering the logo within the header.
« on: February 03, 2012, 02:02:39 PM »
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.
« Last Edit: February 03, 2012, 02:28:43 PM by vet_ca »

Offline K@

  • Lead Support Specialist
  • SMF Master
  • *
  • Posts: 47,587
  • Gender: Male
  • Yum!
Re: Centering the logo within the header.
« Reply #1 on: February 03, 2012, 02:06:50 PM »
Worth trying this?

Code: [Select]
<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.

Offline NanoSector

  • On Hiatus
  • SMF Super Hero
  • *
  • Posts: 10,123
  • Gender: Male
    • rick2288 on Facebook
    • Yoshi2889 on GitHub
    • Test Server
Re: Centering the logo within the header.
« Reply #2 on: February 03, 2012, 02:21:49 PM »
I think this should be moved to Graphics and Templates. At least that feeling is bugging me :P

Worth trying this?

Code: [Select]
<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 / Support team member / Website - Help us test SMF 2.1!
"I've heard from a reliable source that the Answer is 42. But, still no word on what the question is."

Offline K@

  • Lead Support Specialist
  • SMF Master
  • *
  • Posts: 47,587
  • Gender: Male
  • Yum!
Re: Centering the logo within the header.
« Reply #3 on: February 03, 2012, 02:29:46 PM »
I just put it after the body tag, in index.template, IIRC.

Offline vet_ca

  • Newbie
  • *
  • Posts: 7
Re: Centering the logo within the header.
« Reply #4 on: February 03, 2012, 02:32:53 PM »
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@

Offline K@

  • Lead Support Specialist
  • SMF Master
  • *
  • Posts: 47,587
  • Gender: Male
  • Yum!
Re: Centering the logo within the header.
« Reply #5 on: February 03, 2012, 02:41:51 PM »
No sweat!

Ta for the edits to the pix, man!

Offline vet_ca

  • Newbie
  • *
  • Posts: 7
Re: Centering the logo within the header.
« Reply #6 on: February 03, 2012, 03:51:45 PM »
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="hxxp:uber_____.org/Themes/uber____2.png [nonactive]" 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. :-[
« Last Edit: February 03, 2012, 04:04:55 PM by vet_ca »

Offline K@

  • Lead Support Specialist
  • SMF Master
  • *
  • Posts: 47,587
  • Gender: Male
  • Yum!
Re: Centering the logo within the header.
« Reply #7 on: February 03, 2012, 03:59:32 PM »
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.

Offline vet_ca

  • Newbie
  • *
  • Posts: 7
Re: Centering the logo within the header.
« Reply #8 on: February 04, 2012, 01:14:16 PM »
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

Offline K@

  • Lead Support Specialist
  • SMF Master
  • *
  • Posts: 47,587
  • Gender: Male
  • Yum!
Re: Centering the logo within the header.
« Reply #9 on: February 04, 2012, 04:05:47 PM »
I'll sure give it a go!

Ta, man!

Offline Drover

  • Jr. Member
  • **
  • Posts: 199
    • National Prepper Exchange
Re: Centering the logo within the header.
« Reply #10 on: February 25, 2012, 10:57:37 PM »
Thanks for this!  Exactly what I needed!

Online cortez

  • Senior Translator
  • Jr. Member
  • *
  • Posts: 101
Re: Centering the logo within the header.
« Reply #11 on: September 23, 2012, 01:24:15 PM »
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.