cartpauj Posted August 3, 2007 Share Posted August 3, 2007 Here's php code: <ul> <?php wp_list_pages() ?> </ul> The wp_list_pages automatically creates the <li>'s for all my pages and it displays like this: Home About Contact... I would like it to display like this: Home | About | Contact... any ideas about how I might force a seperator to be used between the pages? Quote Link to comment Share on other sites More sharing options...
akitchin Posted August 3, 2007 Share Posted August 3, 2007 i imagine the most straightforward method for this would be to edit wp_list_pages() itself. CSS for dynamic content generation, as far as i know, is not quite as easily done. Quote Link to comment Share on other sites More sharing options...
dbrimlow Posted August 3, 2007 Share Posted August 3, 2007 Here is how I do it: " </a> |</li>" <li><a href="home.html">home </a> |</li> You have two choices: Edit the actual wp_list_pages to end all <li> tags with " </a> |</li>" or create a preg to force it. Dave Quote Link to comment Share on other sites More sharing options...
moberemk Posted August 3, 2007 Share Posted August 3, 2007 Or you could just create a background image of a line; in fact, padding and a right-side border would work fine. Aside from that, there's no CSS way of doing it besides stuff like content, and that isn't globally supported. Quote Link to comment Share on other sites More sharing options...
cartpauj Posted August 3, 2007 Author Share Posted August 3, 2007 wp_list_pages is built into one wordpress' many files and I wouldn't even know where to begin to edit it. How would I go about creating (in my themes stylsheet) a way to possibly add text effects to the <li>'s for exaple when the mouse is active over one of the links it adds a highlight to the text? and how would I tell the <ul> to display it? somthing like <ul class="header_pages"> or something like that??? Quote Link to comment Share on other sites More sharing options...
moberemk Posted August 4, 2007 Share Posted August 4, 2007 ul.header_pages li a:hover {} Try that for the hover effect. Quote Link to comment Share on other sites More sharing options...
cartpauj Posted August 4, 2007 Author Share Posted August 4, 2007 Ok I know just enough about css and php to get in trouble, so here is the code any help would be appreciated: CSS <ul>,<li> code for header navigation: #topnav { list-style:none; font-size:0.9em; margin:0 auto; padding:12px 20px 0 0; text-align:right; font-family:Verdana, Arial, Sans-Serif; } #topnav li { list-style:none; display:inline; padding:0; margin:0; font-weight:bold; } #topnav li a:link, #topnav li a:visited { text-decoration:none; color:#BBC4A3; } #topnav li a:hover, #topnav li a:active { color:#F7F3ED; } CODE to display it: <ul id="topnav"> <?php wp_list_pages('title_li=&depth=1'); ?> </ul> Quote Link to comment Share on other sites More sharing options...
dbrimlow Posted August 8, 2007 Share Posted August 8, 2007 This is an old trick. It uses floats and negative margin to properly align the pipe. First, designate a container for the nav with a 1em bottom margin and hidden overflow. As you have done, do not specifically style "ul" - you will use the <ul id="">tag. Then style the li to use a negative left margin and 1.1 line height (because you designated the 1em bottom margin): #topnavwrap { margin-bottom: 1em; overflow: hidden; width: 90%; } #topnav { list-style-type: none; font-size:0.9em; margin:0 auto; padding:12px 20px 0 0; text-align:right; font-family:Verdana, Arial, Sans-Serif; } #topnav li { border-left: 1px solid #000; float: left; line-height: 1.1em; margin: 0 .5em 0 -.5em; padding: 0 .5em 0 .5em; } #topnav li a:link, #topnav li a:visited { text-decoration:none; color:#BBC4A3; } #topnav li a:hover, #topnav li a:active { color:#F7F3ED; } Here is the whole page to see it in action: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> <style type="text/css"> <!-- body {background-color:#0099CC} #topnavwrap { margin-bottom: 1em; overflow: hidden; width: 90%; } #topnav { list-style-type: none; font-size:0.9em; margin:0 auto; padding:12px 20px 0 0; text-align:right; font-family:Verdana, Arial, Sans-Serif; } #topnav li { border-left: 1px solid #000; float: left; line-height: 1.1em; margin: 0 .5em 0 -.5em; padding: 0 .5em 0 .5em; } #topnav li a:link, #topnav li a:visited { text-decoration:none; color:#BBC4A3; } #topnav li a:hover, #topnav li a:active { color:#F7F3ED; } --> </style> </head> <body> <div id="#topnavwrap"> <ul id="topnav"> <li id="active"><a href="#" id="current">Item one</a></li> <li><a href="#">Item two</a></li> <li><a href="#">Item three</a></li> <li><a href="#">Item four</a></li> <li><a href="#">Item five</a></li> </ul> </div> </body> </html> Works every time. Dave Quote Link to comment Share on other sites More sharing options...
cartpauj Posted August 8, 2007 Author Share Posted August 8, 2007 Thanks MUCH! Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.