I am using the "The Morning After" template. A nice template for a news/magazine looking site. But I would like to include my own logo and do some change to the header CSS/PHP. But this really is far beyond my limits...
Here is a link to a screenshot shwoing what I hope to accomplish: here.
Header PHP code: ` <!--start body-->
<div class="container"> <!--start container-->
<div id="header" class="column span-14">
<div id="logo" class="column first">
<div class="title">
<div>/"><?php bloginfo('name'); ?></div>
<div class="desc"><?php bloginfo('description'); ?></div>
</div>
<!--/" title="<?php bloginfo('description'); ?>: Home" class="sitelogo">-->
</div>
<div id="search_menu" class="column span-6 border_left last push-0">
<div id="search" class="column first">
<h3 class="mast4">Search</h3>
<div id="search-form">
<form method="get" id="searchform" action="<?php bloginfo('url'); ?>/">
<div><label for="s" class="none">Search for:</label>
<input type="text" name="s" id="s" class="search_input" value="<?php the_search_query(); ?>" />
<label for="searchsubmit" class="none">Go</label>
<input type="submit" id="searchsubmit" class="submit_input" value="Search" /></div>
</form>
</div>
</div>
<ul id="menu">
</div>
</div> <!--end header-->`
The CSS related:
/* Start The Morning After stylesheet
-------------------------------------------------------------- */
body { background: #ebeff2 url(images/bg/body_main.png) repeat-y top center; }
a { color: #000; text-decoration: none; }
h2 { font-weight: normal; }
/* Header styles
-------------------------------------------------------------- */
#header { padding: 1.5em 0 0 0; height: 108px; border-bottom: 1px solid #999; }
#header #logo { height: 90px; }
#header #logo .title { padding: 0.5em 0 0 0; font: 700 3em arial, sans-serif; letter-spacing: -.050em; line-height: 1.2em; color: #000; }
#header #logo .title .desc { text-align: right; margin: 0.4em 0 0 0; font: 400 0.25em arial, sans-serif; text-transform: uppercase; color: #666; letter-spacing: 0.2em; padding: 0.6em 0 0 1.5em; border-top: 1px solid #ccc; }
#header #logo .title a { text-decoration: none; color: #000; }
#header #logo .title a:hover { color: #fff; background: #000; }
#header #logo a.sitelogo { display: block; width: 400px; height: 90px; background: url(images/bg/sitelogo.png) no-repeat; }
/* Search and navigation
-------------------------------------------------------------- */
#header #search_menu { height: 90px; }
#header #search_menu #search { padding: 0 0 0 5px; }
#menu { width: 400px; float: right; margin: 10px 0 0 2px; list-style: none; font-weight: bold; font-family: Helvetica, Arial; }
#menu li { float: left; padding: 2px 0 3px 3px; margin: 1px 12px 0 0; line-height: 1.6em; font-size: 0.9em; }
#menu li a { padding: 0; text-decoration: none; color: #000; }
#menu li a:hover { padding: 0; text-decoration: underline; }
#menu li span { display: block; float: left; padding: 0 0px 0 22px; }
#menu li span.home { background: url(images/bg/home.gif) no-repeat; }
#menu li span.about { background: url(images/bg/info.gif) no-repeat; }
#menu li span.archives { background: url(images/bg/hourglass.gif) no-repeat; }
#menu li span.subscribe { background: url(images/bg/favourite.gif) no-repeat; }
#menu li span.contact { background: url(images/bg/mail.gif) no-repeat; }
/* Top banner with rotating images
-------------------------------------------------------------- */
#topbanner { height: 70px; border-bottom: 1px solid #999; background: url(images/bg/home_banner.png) no-repeat; }
#topbanner_arch { height: 70px; border-bottom: 1px solid #999; background: url(images/bg/archive_banner.png) no-repeat; }
#topbanner_single { height: 70px; border-bottom: 1px solid #999; background: url(images/bg/single_banner.png) no-repeat; }
#topbanner .pagetitle, #topbanner_arch .pagetitle, #topbanner_single .pagetitle { float: left; background: #fff; color: #000; font: 700 2em arial, sans-serif; text-transform: lowercase; letter-spacing: -0.036em; padding: 1px 5px 1px 0; margin: 20px 0 0 0; }Anyone, extremely intelligent out there? Please?
begattokitchen