 |
Oi galera! Bem como não tenho assuntos para falar nessa introdução então vou dar uma explicação que eu nunca dei. Vocês devem se perguntar (eu acho) porque a Marcicleide faz essas introduções enormes antes de começar a postagem. Tenho duas respostas pra vocês:
Tempos atrás quando não tinha essa onda de computador, internet essas coisas ou as pessoas nem sabia que existia essas coisas, as pessoas principalmente meninas tinham um caderninho que era renomeado de diário todos já sabem disso, mas o que tem haver um blog com um diário? Podem pesquisar no Google ou em qualquer outro "O que é um blog?" e irá aparecer que um blog é uma especie de diário virtual, ou seja, um blog é um diário. Por isso eu conto sobre meu dia ou algumas coisas importantes na introdução e a outra resposta é que eu faço essas introduções enormes pra ocupar espaço.
Agora já sabem o motivo de eu fazer essa enorme introdução.
Faz um tempinho que recebi um pedido que eu não de quem foi, pois foi anonimo. Nesse pedido a pessoa queria que eu ensinasse a fazer modelo de sidebar, sinceramente eu nunca fiz um modelo para sidebar, então fiz na marra esse tutorial e eu consegui, mas como está no título foi o básico.
Para começar abra seu Bloco de notas ou algum programa parecido pode ser até na caixa de HTML e cole isso:
.sidebar .widget {}.sidebar h2 {}
Se caso você fizer na caixa de HTML você deve procurar por /* Widgets selecionar de .sidebar .widget { até } antes de .sidebar .widget:first-child { e colocar esse código que dei.
Vocês já devem ter reparado que todos os códigos de sidebar começa por esses códigos.
Vocês já devem ter reparado que todos os códigos de sidebar começa por esses códigos.
Já colado no bloco de notas vamos começar a estrutura.
Cole abaixo de .sidebar .widget { e antes de }
Esses códigos:
margin: 15px 0;
padding: 5px;
background: #fff;
Essa parte é o código da caixa dos gadgets.
margin: é a distância das caixas dos gadgets.
padding: é o espaço entre as letras e a borda do gadgets.
background: é a cor do fundo do gadget, mas se quiserem uma imagem é só colocar no lugar da cor coloque:
background: url(LINK DA IMAGEM)repeat;
Recomendo que deixem a cor por causa das letras, mas se quiserem usar, use uma imagem sem muitos detalhes.
E quiserem colocar uma borda ao redor é só colocar o seguinte código:
E quiserem colocar uma borda ao redor é só colocar o seguinte código:
border: 1px solid #000;Mude o que for necessário
Explicado a primeira parte vamos para a segunda.
Cole abaixo de .sidebar h2 { e antes de }
Esses códigos:
font-family: Verdana;
font-size: 16px;
color: #fff;
background: #000;
text-align: center;
}
Essa parte é o código do Fundo e da Fonte do título do gadget.
font-family: é a fonte obvio do título do gadget
font-size: é o tamanho da fonte
color: é a cor da fonte
background: é a cor do fundo
Se no lugar dessa cor do fundo quiserem uma imagem é só selecionar as duas últimas linha e colocar no lugar isso:
background: url(LINK DA IMAGEM) no-repeat center;
height: 31px;
width: 243px;
text-align: center;
margin-top:-17px ;
margin-left:-21px ;
margin-bottom:0px;
padding:16px;
height: + desce e - sobe
width: + vai pra direita e - vai pra esquerda
text-align: centralizar o título
margin-top: + desce e - sobe
margin-left:1px ; + vai pra direita e - vai pra esquerda
E se quiserem uma borda é só colocar:
border: 1px solid #000;
Você vai adicionando tudo que você quer no seu modelo tem vários tutoriais de como colocar e outros é só procurar e vai visualizando se deu certo, se você fez no bloco de notas você deve selecionar e copiar e depois vá na caixa de HTML e procure por: /* Widgets e cole no lugar de:
.sidebar .widget {
border-bottom: 2px solid $(widget.border.bevel.color);
padding-bottom: 10px;
margin: 10px 0;
}
O código do seu modelo. Visualize e veja se está do seu gosto se não está vai adicionando mais é só ter imaginação.
Eu fiz um modelinho:
Espero que tenham gostado e desculpe algum erro pois estou fazendo com pressa.
