treehouse : what would you like to learn today?
Web Design Web Development iOS Development

How to style blogroll on wordpress

  • http://www.visual-blade.com/

    Hello, my name is Daquan Wright (an aspiring web/software developer/user experience designer).

    I am working with wordpress and haven't really put in enough time, so I'm doing it now!

    I wanted to ask how can I control the style of the 'blogroll' element in the sidebar? As you see, it's blackened out and not in sync with the other headlines that I've styled. I've tried styling it and I just am not sure how. I am controlling the other sidebar headlines by way of the h1 tag. Although it seems I can't wrap h1 around the blog roll, just want advice on that.

    Code segments below:

    <div id=\"sidebar\">

    <?php /* Widgetized sidebar, if you have the plugin installed. */
    if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar() ) : ?>

    <?php if ( is_404() || is_category() || is_day() || is_month() ||
    is_year() || is_search() || is_paged() ) {
    ?> <li>

    <?php /* If this is a 404 page */ if (is_404()) { ?>
    <?php /* If this is a category archive */ } elseif (is_category()) { ?>
    <p>You are currently browsing the archives for the <?php single_cat_title(''); ?> category.</p>

    <?php /* If this is a yearly archive */ } elseif (is_day()) { ?>
    <p>You are currently browsing the <a href=\"<?php bloginfo('url'); ?>/\"><?php echo bloginfo('name'); ?></a> blog archives
    for the day <?php the_time('l, F jS, Y'); ?>.</p>

    <?php /* If this is a monthly archive */ } elseif (is_month()) { ?>
    <p>You are currently browsing the <a href=\"<?php bloginfo('url'); ?>/\"><?php echo bloginfo('name'); ?></a> blog archives
    for <?php the_time('F, Y'); ?>.</p>

    <?php /* If this is a yearly archive */ } elseif (is_year()) { ?>
    <p>You are currently browsing the <a href=\"<?php bloginfo('url'); ?>/\"><?php echo bloginfo('name'); ?></a> blog archives
    for the year <?php the_time('Y'); ?>.</p>

    <?php /* If this is a monthly archive */ } elseif (is_search()) { ?>
    <p>You have searched the <a href=\"<?php echo bloginfo('url'); ?>/\"><?php echo bloginfo('name'); ?></a> blog archives
    for <strong>'<?php the_search_query(); ?>'</strong>. If you are unable to find anything in these search results, you can try one of these links.</p>

    <?php /* If this is a monthly archive */ } elseif (isset($_GET['paged']) && !empty($_GET['paged'])) { ?>
    <p>You are currently browsing the <a href=\"<?php echo bloginfo('url'); ?>/\"><?php echo bloginfo('name'); ?></a> blog archives.</p>

    <?php } ?>

    </li> <?php }?>

    <?php wp_list_pages('title_li=<h1>Pages</h1>' ); ?>

    <li><h1>Archives</h1>
    <ul>
    <?php wp_get_archives('type=monthly'); ?>
    </ul>
    </li>

    <?php wp_list_categories('show_count=1&title_li=<h1>Categories</h1>'); ?>

    <?php /* If this is the frontpage */ if ( is_home() || is_page() ) { ?>
    <?php wp_list_bookmarks(); ?>

    <li>
    <h1>Meta</h1>
    <ul>
    <?php wp_register(); ?>
    <li><?php wp_loginout(); ?></li>
    <li><a href=\"http://validator.w3.org/check/referer\" title=\"This page validates as XHTML 1.0 Transitional\">Valid<abbr title=\"eXtensible HyperText Markup Language\">XHTML</abbr></a></li>
    <li><a href=\"http://wordpress.org/\" title=\"Powered by WordPress, state-of-the-art semantic personal publishing platform.\">WordPress</a></li>
    <?php wp_meta(); ?>
    </ul>
    </li>
    <?php } ?>

    <?php endif; ?>

    </div><!-- sidebar -->
  • well what you need to do is style it, like anything else :)

    you have a div with an ID of sidebar. So you can start there!

    div#sidebar {
    // enter style here
    }

    then you can target individual items with in it

    div#sidebar li ul li {
    //enter style
    }

    that for example will style an LI thats inside a UL which is in side an LI which is in side the #sidebar :)

    Its best to look at the HTML created from the php, then you can see what needs styling easily.
  • http://www.visual-blade.com/

    Thanks a million bro! It seems this is just going to be a test of trial and error. No matter what program I get my hands on (whether it be logic or design), getting your hands on it personally is just the best hands down. :D