quarta-feira, 28 de agosto de 2013

Modificando os planos de fundo no blogger - parte 1




Modificando os planos de fundo

Parte 01


Olá a todos!

Agradeço de coração a todos vocês que tem acompanhado nossos artigos sobre criação de blogs e espero que o conteúdo publicado até aqui esteja sendo de grande ajuda. 

Caso tenha alguma dúvida ou comentário, poste aqui que terei prazer em responder e, na medida do possível, ajudá-lo ainda mais.

Neste terceiro tutorial da série, que será dividido em duas etapas, estaremos tratando sobre os planos de fundo presentes no modelo SIMPLES e como modificá-los, conforme o nosso gosto.

Então, mãos á obra!


O modelo SIMPLES do Blogger teve algumas modificações com relação ao layout. Se você acessar o Designer de Modelo e selecionar a opção Avançado > Planos de Fundo terá três opções:

1. Plano de Fundo Externo – refere-se à primeira camada, situada atrás da página HTML.
2. Plano de Fundo Principal – refere-se à segunda camada, situada entre o Plano de Fundo Externo e a página HTML.
3. Plano de Fundo do Cabeçalho – refere-se ao plano de fundo do cabeçalho da página HTML.

O primeiro passo para podermos modificar as seções de plano de fundo é identificá-las no código do Blogger. Veja abaixo quais são elas:


Planos de Fundo – Modelo Simples do Blogger





Agora localizamos no código do Blogger os trechos que poderão ser modificados:


Plano de Fundo Externo


.body-fauxcolumn-outer .cap-top {
position: absolute;
z-index: 1;
height: 400px;
width: 100%;
background: $(body.background);
$(body.background.override)
}


Procedimento: O atributo background define o estilo do plano de fundo. Altere a linha de comando, acrescentando o código hexadecimal da cor desejada. No exemplo abaixo escolhi a cor preto.


.body-fauxcolumn-outer .cap-top{
position: absolute;
z-index: 1;
height: 400px;
width: 100%;
background:#000;
}


Fundo da Página (Inferior)

Procedimento: Para poupar trabalho, acrescentei o trecho CSS do elemento direto no código, conforme abaixo:


.body-fauxcolumns{
background:#d3d3d3;
}


Plano de Fundo Principal

.content-inner {
padding: $(content.padding) $(content.padding.horizontal);
}
$(content.background.color.selector) {
background-color: $(content.background.color);
}

Procedimento: Altere a última linha de comando, especificando a cor. No exemplo abaixo foi utilizada a cor preta.

.content-inner {
padding: $(content.padding) $(content.padding.horizontal);
}
$(content.background.color.selector) {
background-color:#000;
}


Plano de Fundo do Cabeçalho


.header-outer {
background: $(header.background.color) $(header.background.gradient) repeat-x scroll 0 -400px;
_background-image: none;
}

Trecho de código alterado:


.header-outer {
background:#8b2323; /* Cor selecionada = Marrom (Brown4) */
_background-image: none;
}



Plano de Fundo – Corpo da Página (área dos posts + sidebar)


.main-outer {
border-top: $(main.border.width) solid $(body.rule.color);
}

Trecho de código alterado:

.main-outer {
border-top: $(main.border.width) solid $(body.rule.color);
background:#f5f5f5; /* Cor selecionada = WhiteSmoke */
}


Plano de fundo – Rodapé


.footer-outer {
border-top: $(footer.bevel) dashed #bbbbbb;
}

Trecho de código alterado:

.footer-outer {
border-top: $(footer.bevel) dashed #bbbbbb;
background:#8b2323; /* Cor selecionada = Marrom (Brown4) */
}



O resultado ficará assim:




Se quiser vê-lo no navegador, acesse


Por enquanto, ficamos por aqui.
Um abraço e até o próximo post!

Nenhum comentário:

Postar um comentário

Se você gostou deste artigo poste um comentário!

Observações:
1º) Somente usuários com conta no Google poderão publicar seus comentários aqui no Blog do SM@rtiN.
2º) Todos os comentários serão avaliados pelo administrador do blog para posterior publicação.
3º) Os textos com conteúdo impróprio, ofensas e palavrões serão automaticamente excluídos. Se houver reincidência, o acesso do usuário ao blog será bloqueado.

Obrigado!