Grow your CSS skills. Land your dream job.

How to style blogroll on wordpress

  • # April 17, 2009 at 1:43 am

    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:

    Code:
  • < ?php /* If this is a 404 page */ if (is_404()) { ?>
    < ?php /* If this is a category archive */ } elseif (is_category()) { ?>

    You are currently browsing the archives for the < ?php single_cat_title(''); ?> category.

    < ?php /* If this is a yearly archive */ } elseif (is_day()) { ?>

    You are currently browsing the /”>< ?php echo bloginfo('name'); ?> blog archives
    for the day < ?php the_time('l, F jS, Y'); ?>.

    < ?php /* If this is a monthly archive */ } elseif (is_month()) { ?>

    You are currently browsing the /”>< ?php echo bloginfo('name'); ?> blog archives
    for < ?php the_time('F, Y'); ?>.

    < ?php /* If this is a yearly archive */ } elseif (is_year()) { ?>

    You are currently browsing the /”>< ?php echo bloginfo('name'); ?> blog archives
    for the year < ?php the_time('Y'); ?>.

    < ?php /* If this is a monthly archive */ } elseif (is_search()) { ?>

    You have searched the /”>< ?php echo bloginfo('name'); ?> blog archives
    for ‘< ?php the_search_query(); ?>‘. If you are unable to find anything in these search results, you can try one of these links.

    < ?php /* If this is a monthly archive */ } elseif (isset($_GET['paged']) && !empty($_GET['paged'])) { ?>

    You are currently browsing the /”>< ?php echo bloginfo('name'); ?> blog archives.

    < ?php } ?>

  • < ?php }?>

    < ?php wp_list_pages('title_li=

    Pages‘ ); ?>

  • Archives

      < ?php wp_get_archives('type=monthly'); ?>
  • < ?php wp_list_categories('show_count=1&title_li=

    Categories‘); ?>

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

  • Meta

  • < ?php } ?>

    < ?php endif; ?>

Rob
# April 17, 2009 at 3:18 am

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.

# April 18, 2009 at 1:22 am

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

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".