WordPress.org

Forums

Add Horizontal Links under Header that match my Pages (4 posts)

  1. jryan89
    Member
    Posted 6 years ago #

    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!

  2. jryan89
    Member
    Posted 6 years ago #

    this guy did it here to the default theme:

    Surfing Website

  3. jryan89
    Member
    Posted 6 years ago #

    Does anyone have a solution for me?

  4. t31os
    Member
    Posted 6 years ago #

    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.

Topic Closed

This topic has been closed to new replies.

About this Topic