Navigation Splitters

  • Resolved Resilient

    (@resilient)


    18 years, 7 months ago

    Hey, I am pretty new with using WordPress and the WordPress Community.

    I have been using WordPress as a base for a project I am working on as I was recommended it by another designer who currently uses it himself for his blog. So far everything has been perfect and running flawlessly, considering I am a little rusty with my design having made a comeback after over a year.

    I have been working on styling my blog, and with regards to the navigation, I would like to have a splitter in between each link. I have provided two screenshots; one of the current state, and one of the way I would like it to be displayed.

    My coding for the way it currently looks is as follows:

    <div id="navigation">

    <div style="padding-left:10px; width:auto; height: 39px; position: relative; top:0px;"><ul class="menu">
    <li class="<?php if (((is_home()) && !(is_paged())) or (is_archive()) or (is_single()) or (is_paged()) or (is_search())) { ?>current_page_item<?php } else { ?>page_item<?php } ?>"><a href="<?php echo get_settings('home'); ?>">Home</a></li>
    <?php wp_list_pages('sort_column=menu_order&depth=1&title_li='); ?>
    </ul></div>

    </div>

    I would like to know where in the coding I have to place the splitter image (navsplit.gif) in order for it to loop and display after every link. Any help would be appreciated greatly. Many thanks in advance!

    Current State: https://img460.imageshack.us/img460/2181/currentos9.gif

    My Aim: https://img122.imageshack.us/img122/9291/aimur1.gif

Viewing 6 replies - 1 through 6 (of 6 total)

  • You can have the gif as the background image for the list element and style it so it’s displayed top right.

    Thread Starter Resilient

    (@resilient)

    Thanks for the help, 21stproject. I’m guessing it has to be a property for one of these;

    ul.menu li {
    display: inline;
    margin: 0;
    }

    ul.menu,
    ul.menu li a {
    padding: 5px 10px 6px;
    }

    ul.menu li a {
    font: 12px 'Trebuchet MS', Verdana, Arial, Sans-Serif;
    color: #777;
    margin: 0;
    }

    The image is located at /wp-content/elusive/themes/images/navsplit.gif

    How would I incorporate what you’ve advised?

    Keep in mind that you must have all css that contains images in your header.php file, at least, that’s how it works with my version (2.03) I’m new to WordPress so I’m not too sure about whether or not you can get away with not doing that.

    Here’s what you’ll have to do, the image should be inserted in the list element, so that would be ul.menu li, this code placed in the header.php file should give you a result;

    ul.menu li {background:url("<?php bloginfo('stylesheet_directory'); ?>/images/navsplit.gif") no-repeat right top;}

    You can go all out though and insert another image in ul.menu li a:hover to change the look of the menu when you’re on hover, but that’s up to you.

    Thread Starter Resilient

    (@resilient)

    Yep, I’ve kept the template as standard. I forgot to mention, I’m using K2 as a base for my template.

    I tried the method you mentioned above, but that didn’t affect the document in any way for some reason. I then tried a workaround, and still no luck;

    background: url('images/navsplit.gif') no-repeat right top;

    I’m pretty sure I’ll figure it out eventually. Just getting confused with regards as to how it would loop and display once after each link.

    What does your image look like by the way? Try removing the background color for ul.menu li a, it might be covering over your image.

    If that doesn’t work try inserting the image in the a tag then? I don’t think the image would display without the php code, I cant remember if I tried but that’s how the default theme tells you to do it. I’ve never had problems with it.

    ul.menu li a { background:url(“<?php bloginfo(‘stylesheet_directory’); ?>/images/navsplit.gif”) no-repeat top right;}

    Thread Starter Resilient

    (@resilient)

    I’ve still had no luck with this. Please if somebody could help, I would greatly appreciate it. Many thanks.

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Navigation Splitters’ is closed to new replies.