It occurred to me that others may well be interested in further understanding how to customise their Revolution wordpress theme. The subject of this tutorial will be how to move the search bar from its current position in the image header area and put it into the navbar area.
At the moment there are instructions here which show how to make the image header a full width one, but it does so with the sacrifice of the search bar. My way is to keep the search bar but move it to a place that has less impact on the image at the top of your web page
What’s needed
Familiarise yourself with the style.css file
The syle sheet has been carefully designed and once you get past the code it is actually pretty straightforward. In this file you can alter all the various components that make up the look and feel of the theme. Each section has convenient descriptions attached to them like this one:
There are ones for hyperlinks, header, navbar, homepage layout (generic page,) homepage bottom, content narrow, news page styling, featured page, Sidebar, Left sidebar, Footer (generic to all pages,) search form, and finally comments.
For the purposes of this tutorial, we are going to be dealing with the sections that relate to header and navbar.
The basics
1) First of all, if you have a live working version of the theme, download the style.css and header.php files from your server, make a copy of them and keep them somewhere safe. This way if you make a mistake, you can always go back to the working version
2) Open up style.css and scroll down to the header section and make the changes that can be found here. But don’t make the alterations to the header.php files just yet. Once you have done what Brian suggests, come back here but keep the style.css file you are editing, open.
3) Then scroll down to Navbar section where you will find:
#navbar {
background: #333333;
width: 920px;
height: 35px;
color: #FFFFFF;
margin: 0px auto 0px;
padding: 0px 0px 0px 0px;
border-top: 10px solid #FFFFFF;
border-bottom: 20px solid #FFFFFF;
}#navbarleft {
width: 890px;
float: left;
margin: 0px;
padding: 10px 0px 10px 0px;
}#navbarright {
width: 26px;
float: right;
margin: 0px;
padding: 10px 0px 0px 0px;
What this is saying is that the nav bar is 920px wide by 35px high. The left side is currently taking up 890px of that space and the right the remaining 26px as in the picture below:
4) If you were to scroll down the style.css file to ‘Search Form’ you would find the following text
s-head {
background: #FFFFFF;
width: 240px;
color: #333333;
font-size: 12px;
font-family: Arial, Tahoma, Verdana;
padding: 4px;
margin: 5px 0px 20px 0px;
border-top: 1px solid #666666;
border-right: 1px solid #DDDDDD;
border-left: 1px solid #666666;
border-bottom: 1px solid #DDDDDD;
}
What this means is that the search box is 240px wide. Now I want to put that search box into the navbarright element and at the moment the space is much smaller than I need. The search box is also a bit bigger than I want it as well
5) So to create the space, we need to change some of the values in the navbarright and left to this:
#navbarleft {
width: 740px;
float: left;
margin: 0px;
padding: 10px 0px 10px 0px;
}#navbarright {
width: 180px;
float: right;
margin: 0px;
padding: 10px 0px 0px 0px;
}
6) So with that done we now need to make sure that search bar is the right size, so scroll down to:
s-head {
background: #FFFFFF;
width: 240px;
color: #333333;
font-size: 12px;
font-family: Arial, Tahoma, Verdana;
padding: 4px;
margin: 5px 0px 20px 0px;
border-top: 1px solid #666666;
border-right: 1px solid #DDDDDD;
border-left: 1px solid #666666;
border-bottom: 1px solid #DDDDDD;
}
and change the entire code to:
#s-head {
background: #FFFFFF;
width: 160px;
color: #333333;
font-size: 12px;
font-family: Arial, Tahoma, Verdana;
padding: 2px;
margin: 0px 0px 0px 0px;
border-top: 1px solid #666666;
border-right: 1px solid #DDDDDD;
border-left: 1px solid #666666;
border-bottom: 1px solid #DDDDDD;
}
This will make the search bar the right size and also give it the right amount of padding so that it sits nicely within the space you have made.
7) Ok save that file and lets move on to making the search bar appear correctly.
8. Open up your header.php file your favourite code editor. Scroll down and you will see something like this:
<div id="header">
<div id="headerleft">
<a href="<?php echo get_settings('home'); ?>/"><img src="<?php bloginfo('template_url'); ?>/images/logo.gif" alt="<?php bloginfo('name'); ?>" /></a>
</div>
<div id="headerright">
<b>Looking for something in particular?</b><br />
<form id="searchform" method="get" action="<?php echo $_SERVER['PHP_SELF']; ?>">
<input type="text" value="To search, type keywords and hit enter..." name="s" id="s-head" onfocus="if (this.value == 'To search, type keywords and hit enter...') {this.value = '';}" onblur="if (this.value == '') {this.value = 'To search, type keywords and hit enter...';}" /></form>
</div>
</div>
As Brian says here you will need to change that section so that it says this:
<div id="header">
<a href="<?php echo get_settings('home'); ?>/"><img src="<?php bloginfo('template_url'); ?>/images/logo.gif" alt="<?php bloginfo('name'); ?>" /></a>
</div>
9) Then scroll down to the following section:
<div id=”navbarright”>
<a href=”<?php bloginfo(‘rss_url’); ?>”><img src=”<?php bloginfo(‘template_url’); ?>/images/rss.gif” alt=”Subscribe to <?php bloginfo(‘name’); ?>” /></a>
</div>
This deals with how the navbar is going to be displayed. At the moment it is showing the functions that relate to subscribing to RSS. We need it to show the search bar.
10) Change the code to the following:
<div id=”navbarright”>
<form id=”searchform” method=”get” action=”/index.php”
name=”searchform”>
<input type=”text” value=”Search…” name=”s” id=”s-head”
onfocus=
“if (this.value == ‘Search…’) {this.value = ”;}”
onblur=
“if (this.value == ”) {this.value = ‘Search…’;}” />
</form>
</div>
11) Save this file and upload it and the style.css file to your host and then check to see if it has had the desired results.
Variables
1) You can of course alter the text that automatically appears in the search box by editing:
<input type=”text” value=”Search…“
2) This method will remove the RSS logo that come as standard in the theme, my next tutorial will deal with the nav bar and what you can do to re-instate it
show hide 10 comments