I want to make floating boxes for my sidebar widgets CSS

• 

  tsedani · Member · Feb 6, 2013 at 9:27 pm

  • Copy link
  • Add topic to favorites

  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: (visible only to logged in users)

• 

  designsimply · Member · Feb 18, 2013 at 6:24 pm

  • Copy link

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