Styling page navigation
-
I have been trying to style the page navigation links by styling the .page_links but I have been unable to get the desired effect. I’m just wanting to have a background image behind the link and to be able to center the link inside of the box (from the image) using padding. I cannot seem to get it to cooperate. I have been trying to get this to work all day and am at the end of the rope. Any help would be greatly appreciated. Forgive me for my lack of detail in my description. I’ll show you the output of my style.css and sidebar.php file below.
style.css
/* * Structure */ body { background: #EEEEEE; margin: 0 auto; } #page { margin: 0 auto; width: 922px; background: url(images/body_container_background.jpg) repeat-y; } #header { width: 922px; height: 284px; margin: 0 auto; } #content { float: left; width: 437px; margin: 0 16px 0 92px; } #sidebar { clear: right; width: 267px; margin: 0 92px 0 554px; } #contentwrapper { clear: both; background: url(images/body_container_background.jpg) repeat-y; } #footer { width: 922px; height: 72px; margin: 0 auto; background: url(images/footer.jpg) no-repeat; } /* * Sidebar */ #pagemenu { width: 275px; } #pagemenu ul .pagenav .page_item { list-style: none; padding: 0; } #pagemenu li.page_item { width: 275px; height: 63px; background: url(images/page_link_background.jpg) no-repeat; list-style: none; } #pagemenu li.page_item a { text-decoration: none; font-family: Arial, Helvetica, sans-serif; } #pagemenu li.page_item a:hover { text-decoration: none; font-family: Arial, Helvetica, sans-serif; } /* * Styling */ h2 { margin-top: 0px; font-family: Arial, Helvetica, sans-serif; } .entry { font-family: Arial, Helvetica, sans-serif; font-size: 12px; text-align: justify; line-height: 18px; } small { font-family: Arial, Helvetica, sans-serif; font-size: 12px; } .postmetadata { font-family: Arial, Helvetica, sans-serif; font-size: 12px; }sidebar.php
<div id="sidebar"> <div id="pagemenu"> <?php wp_list_pages('title_li='); ?> </div> <ul> <li><h2>Archives</h2> <ul> <?php wp_get_archives('type=monthly'); ?> </ul> </li> <?php wp_list_categories('show_count=1&title_li=<h2>Categories</h2>'); ?> <?php /* If this is the frontpage */ if ( is_home() || is_page() ) { ?> <?php wp_list_bookmarks(); ?> <li><h2>Meta</h2> <ul> <?php wp_register(); ?> <li><?php wp_loginout(); ?></li> <li><a href="http://validator.w3.org/check/referer" title="This page validates as XHTML 1.0 Transitional">Valid <abbr title="eXtensible HyperText Markup Language">XHTML</abbr></a></li> <li><a href="http://gmpg.org/xfn/"><abbr title="XHTML Friends Network">XFN</abbr></a></li> <li><a href="http://wordpress.org/" title="Powered by WordPress, state-of-the-art semantic personal publishing platform.">WordPress</a></li> <?php wp_meta(); ?> </ul> </li> <?php } ?> </ul> </div> <div id="contentwrapper"> </div>
Viewing 1 replies (of 1 total)
Viewing 1 replies (of 1 total)
The topic ‘Styling page navigation’ is closed to new replies.