In my first Retro theme tutorial I covered “How to position the navigation menu below the header image“. The result of this tutorial was not perfect. Header image was without rounded corners on top. So, I left you to play with it.
Let’s finish the job
Open ‘index.php‘ file and on top you will see:
...
<div id="page-content" class="clearfix">
<?php include ('headimage.php'); ?>
...
Replace the lines so the code looks like this:
...
<?php include ('headimage.php'); ?>
<div id="page-content" class="clearfix">
...
Now, repeat this step for pages: ‘single.php‘, ‘page.php‘ and ‘search.php‘.
Add a little style
Replace styles in “style.css” file with:
#page-navigation
{
background: url("images/bg_page_content.png") repeat-y 0% 0%;
padding: 0px 0px 0px 20px;
}
#content-head
{
background: url("images/bg_page_navigation.png") no-repeat 0% 0%;
padding: 20px 10px 0px 10px;
height: 240px; /* insert height of your pictures */
}
Finally
The origibal ‘bg_page_navigation.png’ file was only 60px in height which is insufficient for our task. So, you have to replace it with a new one.
