Help adding images to Header along with Text

[jtatum65]

I am trying to figure out how to add Text to my header along with with a Logo. Actually would like to add 2 logos. Can someone provide me the steps to complete both tasks?

[elli]

Admin > Themes > Layout Templates > Forum Wrapper

You're looking for this chunk of code:

<header>
 <div id="banner-container" role="banner">
   <h2 id="banner">
     $[forum.title]
   </h2>
 </div>
</header>

You can edit this however you like. To add text below your logo, create a new line under </h2> and either add an <h3> tag, or paragraph tag.

htmldog.com/guides/html/beginner/headings/
htmldog.com/guides/html/beginner/paragraphs/

If you choose to replace $[forum.title] , you may want to make sure that you add a link back to the forum index -- users will expect to be able to click on the banner to take them to the home page.

<a id="logo" href="/">
  Your content here...
</a>

[jtatum65]

Elli,

Thanks for you reply. What I am trying to do is place a logo to the left of the banner, text in the middle and possibly another image on the right side of the banner.

[elli]

So, you'll probably want something like this:

<div id="banner-container" role="banner">
 <h2 id="banner">
   <img class="banner-logo" src="folder/your-image.jpg" />
   <a class="banner-text" href="/">Your Text</a>
   <img class="banner-logo" src="folder/your-image.jpg" />
 </h2>
</div>

And this at the bottom of your stylesheet, Admin > Themes > Advanced Styles & CSS > "Style Sheet":

#banner { text-align: center; }
.banner-text, .banner-logo { vertical-align: middle; }
.banner-text { padding-left: 30px; padding-right: 30px; color: @banner_text_color; text-shadow: @banner_text_shadow; text-decoration: @banner_text_decoration; font: @banner_text_font; font-variant: @banner_text_caps; text-transform: @banner_text_case; }
.banner-text:hover { color: @banner_text_color !important; text-decoration: @banner_text_decoration !important; }

Edit however you prefer.