Tutoriais - Personalizar Sidebar dos Gadgets

こんにちは、お菓子。Tudo bom com vocês? Estou ótima como sempre. Esse é o meu último dia de férias, dessa semana. Não vou ficar com raiva, pois já tive muitos dias sem aula. Estou, até sentindo falta de escrever. ('⌒o⌒) Mas sempre o pior de tudo é acordar cedinho; Aah que preguiça.

Está bom, chega das minha loucuras. Hoje trouxe mais um tutorial, bem útil. Ele está ensinando a personalizar os sidebares do gadgets. Por exemplo colocando bordas, sombras, fontes. さあ

Para personalizar o background do seu gadget, ou transformar em caixa:

Procure por .sidebar .widget { que vai estar mais ou menos assim:

.sidebar .widget {
  border-bottom: 2px solid $(widget.border.bevel.color);
  padding-bottom: 10px;
  margin: 10px 0;
}

Você pode mudar para:

.sidebar .widget {
background-color: #fff;
border: 1px solid #ccc;
border-radius: 2px;
padding: 6px;
}

Explicando alguns códigos: 

background-color: #fff; | Aqui é o fundo do seu gadget, troque sua cor pela hexadecimal, ou por exemplo: white, black.

border: 1px solid #cc; | Aqui são as bordas, você pode alterar o estilo (por exemplo: double, dashed, groove e outros ~♥), tamanho e a cor.

border-radius: 2px. | Aqui é o arredondamento das bordas do seu background.

padding: 6px | Aqui é o tamanho do preenchimento.

E para alterar a cor do título do gadget é em Personalização.

Ah, se quiser pode acrescentar sombras, então, coloque antes da chavinha "}" o seguinte código:

box-shadow: #ccc 1px 1px 1px;

Também você pode alterar como quiser.

Agora iremos personalizar na área h2, ou seja no título.
Depois do código anterior adicionado coloque o seguinte abaixo:

.sidebar .widget h2{
border-bottom: 1px dotted #bebebe;
padding: 6px;
text-shadow: 1px 1px 0 #e8e1e7;
font-family: Trebuchet MS;
font-size: 16px;
}

Explicando alguns códigos:

border-bottom: 1px dotted #bebebe; | Aqui é a borda pontilhada, pode alterar para que modelo quiser, e também as cores, tamanho.

text-shadow: 1px 1px 0 #e8e1e7; | Aqui é a sombra do título do gadget altere como quiser.

font-family: Trebuchet MS; | Aqui é a fonte do título do seu gadget.

font-size 16px; | Aqui é o tamanho da fonte.

Se você saber pelo menos o básico, que é esses códigos, já consegue fazer várias sidebars. Existem vários modos de fazer sidebares, por exemplo, nesse último código, eu posso alterar as bordas pontinhadas por alguma imagem, fazendo assim:

background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgikBndsdI-pXmYovCQqmgbSI6taKlryuC-uUMYFodfbKfzlwKk2McdThImneTR-wnh9PDSWmpy-NeOSPmdpSB7b0F0Ge30nnVS1_CYbNa-toZcVfi0WbrEKF5uEmBmDaVytMhb_N1RlYT1/s320/girls%2521.png);

Alguma, dúvida diga aqui em baixo.