Theme The Morning After

The Morning After – Sitelogo and Title, anyone?

In a comment , I was asked:

Could you explain how you added the small image (nb) next to the default logo in the header….?

Jon Hoff

Actually, this was quite easy..

Getting started

First, you need to design a logo with a maximum height of 90px. Don’t forget to upload this logo into your wp-content/themes/tma/images/bg folder.

Header.php

When you have made no changes to the respective title section in the header template, nothing has to done. If you have made changes, restore the old code:

<div id="rss" class="span-6 last push-0">
            
             <a href="<?php bloginfo('rss_url'); ?>"><img src="<?php bloginfo('template_url'); ?>/images/bg/rss.gif" alt="Subscribe to <?php bloginfo('name'); ?>" /></a><a href="<?php bloginfo('rss_url'); ?>"> RSS Feed</a>   
            
            </div>
        
<div id="navigationbar">

	<div id="navigationbar-left">
		<ul id="navigation">
			<li><a href="<?php echo get_settings('home'); ?>">Home</a></li>
			<?php wp_list_pages('title_li=&depth=1&sort_column=menu_order'); ?>
		</ul>
	</div>
	
	<div id="navigationbar-right">
		<form id="searchform" method="get" action="<?php echo esc_url( $_SERVER['PHP_SELF'] ); ?>">
		<input type="text" value="Search this website..." name="s" id="search" onfocus="if (this.value == 'Search this website...') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Search this website...';}" />
		<input type="submit" id="searchbutton" value="GO" /></form>
	</div>

</div>       
 
        </div>   <!--end header-->

Style.css

Then, you have to open your style.css and add the sitelogo as a background image to the #header #logo section.

#header #logo { background: url(images/bg/sitelogo.gif) no-repeat; height: 90px; }

Finally, you have to insert a margin-left so that sitelogo and title do not overlap.

#header #logo .title { margin-left: 115px; padding: 0.5em 0 0 0; font: 700 3em arial, sans-serif; letter-spacing: -.050em; line-height: 1.2
  1. Thanks for this tutorial, I will give it a try once I finally turn my personal blog into TMA-powered one.
    At my other site (http://www.pulsraszyna.waw.pl/) I did it the hard way, so perhaps I’ll change that too :)

  2. Thanks Nick for the tip ! I’m trying to go further and add a link to the logo but I’m not that familiar with programming and can’t figure out how to implement it.. any help? thanks!

  3. Not possible with this code… but the original header image included a link…

  4. How to make the header image rotate automatically without reloading the page..I guess in short creating a sideshow of the header images ?

  5. I have created the rotating image banner after reading the TMA forum..
    http://themasterplan.in/talk/comments.php?DiscussionID=341&page=1#Item_8
    But the image gets rotated only after you reload the page or navigate to some other page and coming back to homepage you will see that the image changes.
    Pls help me to create one banner imager slider for my TMA blogpage?
    Thanks in advance Nick

  6. anyways thanks for the reply

  7. Thanks for the great stuff, check out my version of Morning After.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.