WordPress.org

Ready to get started?Download WordPress

Forums

Menu Bar Separators (6 posts)

  1. Phillyzero
    Member
    Posted 5 years ago #

    Hi, I'm using a custom theme (ComicPress) and I was wondering how I would be able to change the separators from say Home|About|Blah to Home/About/Blah or Home : About : Blah or any character really. If it's still unclear check the site, is this something to do with CSS or html. I'm having a tough time locating where it would be in my stylesheet, unless | is not an actual character and a default of some sort.
    http://blackrussiancomics.com/

  2. myinstinctwaswrong
    Member
    Posted 5 years ago #

    the | is actually a CSS border as stated in your stylesheet

    #menu li a {
    height: 25px;
    padding: 0 5px 0 5px;
    display: block;
    float: left;
    color: #6e86ad;
    line-height: 25px;
    text-decoration: none;
    border-width: 0 1px 0 0;
    border-style: solid;

    border-color: #aaa;
    }

    It specifies a right border of 1px, solid, colored #AAA

  3. Phillyzero
    Member
    Posted 5 years ago #

    Sorry to sound dumb, but what would I need to do to change it into the style of say a colon or slash? The only border-style's I'm aware of wouldn't allow me to do that, so would I delete the bolded portion of the CSS and input the slashes manually (if possible)?

  4. myinstinctwaswrong
    Member
    Posted 5 years ago #

    if you delete the bold part - get the line under for border-color as well.

    None of the normal list-style parameters are a colon or slash - (dot, square or circle). Possibly you could use a list-style-image, but that seems a bit contorted just get a slash.

    Since these are added with a single call from your page template,

    <?php wp_list_pages(); ?>

    I'm not sure how you would add them manually without tinkering with deep WP code - or replacing the wp_list_pages call with some PHP code to do the same thing.

    Might check this out

    http://codex.wordpress.org/Template_Tags/wp_list_pages

  5. Capn Code
    Member
    Posted 5 years ago #

    The following snippet in your template will output the desired effect, just change | character in echo implode(' | ', $links); to whatever you like;

    <?php
    $links = get_pages();
    
    foreach($links as $i => $page)
    	$links[$i] = '<li class="page-' . (is_page($page->ID) ? 'active' : 'item') . '"><a href="' . get_page_link($page->ID) . '" title="' . attribute_escape(apply_filters('the_title', $page->post_title)) . '">' . apply_filters('the_title', $page->post_title) . '</a></li>';
    
    echo implode(' | ', $links);
    ?>
  6. Capn Code
    Member
    Posted 5 years ago #

    You can add a link to the index by adding the following:

    array_unshift($links, '<li class="page-item"><a href="' . get_option('home') . '" title="Home"> Home </a>');

    before:

    implode(' | ', $links);

Topic Closed

This topic has been closed to new replies.

About this Topic