Torn Elements

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.

Themes Coding, Themes, WordPress