Separar os widgets em caixas.

Hoje vou ensinar vocês a separar os widgets do blog em caixas. 
O visual é super bacana e dá um efeito bem organizado para seu blog.

Vamos lá ao tutorial do dia.

No painel do seu blog, vá em editar html, Ctrl+F e procure pelo código abaixo :

#sidebar-wrapper {

width: 220px; float: $endSide; word-wrap: break-word; /* fix for long text breaking sidebar float in IE */ overflow: hidden; /* fix for long non-text content breaking IE sidebar float */ }

  

Esse código é responsável pela sidebar. Veja se nesse código existe a propriedade background (exemplo: background: #FFF; ou background: url (http://URL DA IMAGEM) repeat;) se existir uma dessas propriedades, apague para que você possa ver a divisão da sidebar. 

Após ter feito isso, você vai procurar pelo código abaixo:

.sidebar .widget, .main .widget { border-bottom:1px dotted $bordercolor; margin:0 0 1.5em; padding:0 0 1.5em; }

Esse código é responsável pelos widgets da sidebar. 

Apague esse código e cole no lugar este:

.sidebar .widget { margin: 0px 0px 15px 0px; /* distancia entre as caixas */ padding: 5px; /* distancia entre o texto e as margens */ background: #FFFFFF; /* cor de fundo das caixas */ -webkit-border-radius:20px; /* arredondamento das bordas */ -moz-border-radius:20px; /* arredondamento das bordas */ border-radius:20px; /* arredondamento das bordas */ text-align: justify; /* alinhamento do texto */ } .main .widget { margin:0 0 1.5em; padding:0 0 1.5em; }

Super Legal o efeito não é mesmo ?