DIY Themes – Part 4: The Top Menu Bar
Today I finally found the time to work on the theme.
One thing I like to see on a site is a Search Box that you don’t actually have to search for. Right up top works for me every time. I find they tuck nicely into the menu bar which is demonstrated if you click on the screen shot.
I also made a couple of cosmetic changes today.
But first, let’s get that Search Box in place:
From header.php
<div id="topBar">
<div id="menu">
<ul>
<li class="<?php if (is_home()) { ?>current_page_item<?php } else { ?>page_item<?php } ?>"><a href="<?php bloginfo(‘url’); ?>" title="Home">Home</a></li>
<?php wp_list_pages(‘title_li=&depth=1′); ?>
</ul>
</div> <!–end menu –>
<div id="searchbox">
<form action="<?php bloginfo(‘home’); ?>" method="get">
<input type="text" class="textfield" name="s" size="24" value="" />
<div class="icon"></div>
</form>
</div> <!– end search –>
</div> <!– end topbar –>
(I also added a search icon)
From style.css
input.textfield,
textarea {
background:#FFF;
border:1px solid #A6A6A6;
padding:2px 1px;
}#topBar {
background:url(http://static.tornelements.com/torn_images/topBg.jpg) repeat-x;
width: 100%;
}#searchbox {
margin-top: -30px;
float:right;
padding:4px 10px;
}#searchbox .textfield {
line-height:16px;
width:180px;
float:right;
}#searchbox .icon {
background:url(http://static.tornelements.com/torn_images/search.gif) no-repeat;
float:right;
width:29px;
height:29px;
}
The 1px x 30px graphic in the #topBar background provides the gradient for the top menu.
I inverted the gradient graphic and used that for the rollover by adding this:
#menu ul li a:hover {
background:url(http://static.tornelements.com/torn_images/topBgRO.jpg) repeat-x;
color:#fff;
}
I also changed the body background. I’ll work on that more later. I just want to visualize it with a darker background for a while.
Up next… The Sidebar.
