Widget CSS

  • cubaton3

    (@cubaton3)


    12 years, 2 months ago

    Hello, I’m creating my WordPress template from scratch, this is the first time I make a template from scratch so far I’ve been going very well, but I’m having problems on my widgets CSS, I’ve searched and searched over Google and WordPress support forum but I can’t seem to find anything that helps me.

    I want to style my theme Widgets or Sidebar, I want to put the title of the widget a background and the container of the widget a background, please help me.

    This is my sidebar registration on functions.php

    // Sidebar Widget
if ( function_exists('register_sidebar') )
register_sidebar(array('name'=>'Widgets',
	'before_widget' => '<li>',
	'after_widget' => '</li>',
	'before_title' => '<h3>',
	'after_title' => '</h3>',
));

    This is my sidebar.php

    <div id="sidebar">
   <ul>
     <?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar() ) : ?><?php endif; ?>
   </ul>
</div>

    This is my CSS for the sidebar

    #sidebar, h3 {
	color:#FFF;
	background-color:#191919;
	height:auto;
	width:340px;
	float:right;
}

#sidebar a {
	color:#F7F7F7;
	text-decoration:none;
}
#sidebar a:hover {
	color:#CCC;
}

#sidebar li, ul {
   list-style: none;
}

    Please help me, thanks.

Viewing 2 replies - 1 through 2 (of 2 total)
  • ronangelo

    (@ronangelo)

    12 years, 2 months ago

    You should add a class on the widgets and their titles

    register_sidebar( array(
   'id' 		=> 'widgets_sidebar',
   'before_widget'      => '<li id="%1$s" class="widget %2$s">',
   'after_widget' 	=> '</li>',
   'before_title' 	=> '<h3 class="widget-title">',
   'after_title' 	=> '</h3>') );

    Call it like this on the template:

    <div id="sidebar">
   <ul>
      <?php if ( is_active_sidebar('widgets_sidebar') ) : ?>
         <?php dynamic_sidebar('widgets_sidebar'); ?>
      <?php endif; ?>
   </ul>
</div>

    Then you can add background like this (just a sample):

    #sidebar .widget {
    background: #FFF;
}

#sidebar .widget .widget-title {
    background: #333;
}

    Thread Starter cubaton3

    (@cubaton3)

    12 years, 2 months ago

    Thanks a lot, you did really help me, im glad, really, THANKS!

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

The topic ‘Widget CSS’ is closed to new replies.