I want to make floating boxes for my sidebar widgets CSS

  • Author
  • #1147358


    my theme is Twenty Eleven and I want my sidebar widgets to stand out on their own more as floating boxes kind of like the contempt theme

    The blog I need help with is sedanidraws.wordpress.com.


    There are a few different ways you could approach that. Here is one example which adds a background color to widget titles and a border to each widget. It then makes a few adjustments to try to line up the various widget contents so they look nice. You can adjust the numbers to experiment or add new, similar rules based on this example which you can add to your Appearance → Custom Design → CSS editor:

    #secondary .widget {
    	border: 1px solid #333;
    	width: 188px;
    #secondary .widget h3 {
    	width: 168px;
    	line-height: 1.2;
    	padding: 10px;
    #secondary .widget h3,
    #secondary .widget h3 a {
    	background: #333;
    	color: #eee;
    #secondary .widget > form,
    #secondary .widget > ul,
    .twitter-follow-button {
    	padding: 10px;
    .widget ul li {
    	margin-left: 1em;
    #secondary .widget_twitter li {
    	margin-left: 0;
    #secondary .widget_twitter .timesince {
    	margin-right: 0;

The topic ‘I want to make floating boxes for my sidebar widgets CSS’ is closed to new replies.