Support » Fixing WordPress » Add Horizontal Links under Header that match my Pages

  • jryan89

    (@jryan89)


    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)
  • jryan89

    (@jryan89)

    this guy did it here to the default theme:

    Surfing Website

    jryan89

    (@jryan89)

    Does anyone have a solution for me?

    t31os

    (@t31os)

    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.