Add Horizontal Links under Header that match my Pages

  • I am using the Default Theme. I want to show horizontal links to pages right underneath the header image.

    here is my site:

    My Site

    As you can see at the top of the page, The links to each page do not match the template and do not look right. To get to where I am now, I added this code to the very bottom of the header file:

    <div id="tabs">
	<ul>
	<?php
wp_list_pages('title_li=&sort_column=menu_order&depth=1'); ?>
	</ul>
	</div>

    I copied this code from the “Magic Blue” theme.

    I then copied this code into the style.css file:

    #tabs{
padding: 0;
background:black;
}

#tabs ul{
margin: 0;
padding:3px 0;
list-style-type:none;

}

#tabs ul li{
margin: 10px 0 3px 15px;
padding: 6px 15px 6px 0px;
display:inline;
border-right: 2px solid #fff;
font-size: 100%;
font-family: Tahoma, Arial, sans-serif;
}

#tabs ul li a{
color: white;
}

#tabs ul li a:hover{
color:#A1E7FD;
 text-decoration:none;
}

    Again I copied it from the Magic Blue Template.

    If you have some better code, please pass it on. I do not care what I use, I just simply want to add horizontal links below the header image.

    Thanx!

Viewing 3 replies - 1 through 3 (of 3 total)
  • Thread Starter jryan89

    (@jryan89)

    this guy did it here to the default theme:

    Surfing Website

    Thread Starter jryan89

    (@jryan89)

    Does anyone have a solution for me?

    I’m feeling helpful, so here’s a nice subtle look that uses an existing image in the theme …. ??

    #tabs {
  margin:6px 2px;
  height:24px;
  padding:5px 0 0 0;
  display:block;
  background:#ccc url('images/kubrickfooter.jpg') no-repeat -2px -9px;
  width:auto;
}

#tabs ul {
  margin:0 0 0 10px;
  display:block;
  padding:0 10px;
}

#tabs .page_item {
  padding:8px;
  border:0;
  margin:0;
  border-bottom:3px solid #ddd;
}

#tabs .current_page_item {
  background:#eee;
  border-bottom:3px solid #900;
}

#tabs .page_item a {
  color:#aaa;
}

#tabs .current_page_item a {
  color:#000;
}

#tabs .page_item:hover {
  background:#fff;
}
#tabs .page_item:hover a {
  color:#000;
}

    Hope that helps…

    You may wish to put your font declarations in etc…. as per your existing CSS.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Add Horizontal Links under Header that match my Pages’ is closed to new replies.