The Support Forums will be in read-only mode for a scheduled maintenance window on 01 September 2016 14:00 UTC - 20:00 UTC. More information.

Page link styling (5 posts)

  1. eXtreaL
    Posted 5 years ago #

    Hello all.

    I started using WordPress a few days and I'm liking it a lot already. There's just one thing that's been bugging me for these few days, and that is those boring plain text links.

    So here's the scenario:
    I printed the page links using <?php wp_list_pages(); ?>
    I tried to style them by placing a div class around it
    Obviously when I tried to place a nice little background-image behind it, the image got behind the whole div.

    So my question is: how can I style my page list in such a way it only styles the actual links and not the whole thing.

    Thanks in advance!

  2. esmi
    Forum Moderator
    Posted 5 years ago #

    Try using Firefox with the Firebug add-on for this kind of work. Perhaps you just need to add the image to the list elements?

  3. eXtreaL
    Posted 5 years ago #

    Alright, I fixed it using ul divs. Never worked with those before, so it was kind of hard to figure out.

    Now I'm facing another problem: the alignment of the links. I tried to align the links to the left but they won't go fully to the left.

    Here's a little example:

    And this is the CSS I'm using

    ul#nav {
    ul#nav li {
    	padding:0 10px;
    	background-image: url(images/button.png);

    Whereas "ul#nav" is the container and "ul#nav li" is the style of the actual buttons

    I hope you guys can help me out. Thanks :)

  4. Michael
    Forum Moderator
    Posted 5 years ago #

    browsers have default values for the margin and padding of unordered lists; you might need to set these to zero in your styles;


  5. eXtreaL
    Posted 5 years ago #

    Oh right, that worked out perfectly! Thanks a lot!!

Topic Closed

This topic has been closed to new replies.

About this Topic