Question

I am trying to style the list the wp_list_page outputs, basically i would like to wrap every single page in a rounded box. All that I seem to be able to do is style the LI and UL on the CSS but i doesn’t work.

Any idea how to do that?

Thanks

Answer 1

Out puts the follwing kind of html.

Make sure to wrap it with ul like this <ul class="main-nav"><?php wp_list_pages(); ?></ul>

This is the typical output.

 <li class="pagenav">Pages
   <ul>
    <li class="page_item page-item-2"><a href="/">Sample Page</a></li>
    </ul>
 </li>

In your css you can edit it like so.

li.page_item {border:1px solid green;}
li.page_item a {color:yellow;}
etc...

If you want the page links to be rounded you can insert the border-radius syntax.

li.page_item {border-radius: 15px;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;

}