Need help? Check out our Support site, then


I want to make floating boxes for my sidebar widgets CSS

  1. 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.

  2. 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;
    }

Topic Closed

This topic has been closed to new replies.

About this Topic