Grow your CSS skills. Land your dream job.

WP: Styling Widgets

  • # December 8, 2009 at 6:11 am

    I found out that many people besides me got problems with styling Widgets. For some reason the widget ‘Recent Posts’ doesn’t show up in the sidebar.php and can be slighly edited by editing the function in functions.php

    This is how my functions.php looks like at the moment;

    Code:
    < ?php
    if ( function_exists('register_sidebar') ) {
    register_sidebar(array(
    'before_widget' => ‘
  • ‘,
    ‘after_widget’ => ‘
  • ‘,
    ‘before_title’ => ‘

    ‘,
    ‘after_title’ => ‘

    ‘,
    ));
    }
    ?>

With the following CSS;

Code:
li.headlines { background: url(style/images/itembackgrnd.png); height: 30px; }
h2.widgettitle { margin: 0 10px 0 10px; padding-top: 3px; text-align: right; font-family: Century Gothic; font-size: 20px; font-weight: bold; color: #FFFFFF; text-transform: lowercase; letter-spacing: -1px; }
ul#headlines { margin: 0 10px 0 10px; width: 290px; }
ul#headlines li a { font-size: 10px; color: #FFFFFF; text-decoration: none; }

Sadly enuff, by editing this you can only edit the title of the widget, in my case Recent Posts (which I changed in the backend to headlines). The <li></li> that builds up the list with most recent posts can’t be edited. I checked the source of my page and it shows like;

Code:
  • Headlines

  • I really can’t find anything about how to style widgets, and since WP doesn’t has all code that refers to widgets in it’s .php files it’s hard to find which elements can be styled and how.

    Viewing 1 post (of 1 total)

    You must be logged in to reply to this topic.

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