Banner-Imagem do cabeçalho pelo Código fonte Html

Oie

Recentemente eu comecei a personalizar layouts para blog e a cada dia que passa fico mais apaixonada pela linguagem XHTML e css.


Há alguns dias aprendi como inserir o banner do meu blog atravéz do HTML e nao por widget do painel de controle.
Isto se torna muito útil quando queremos preservar o banner ao fazermos backup do template,também quando  trocamos a modelo e nao queremos ter o trabalho de remover o banner manualmente e inserir outro no lugar ou ainda quando fazemos uma lay para terceiros,e queremos que esta pesssoa nao tenha que inserir o banner ela mesma,isso dentre outras razoes,pelas quais é sempre bom inserir o cabeçalho atravez do editor de Html.
Quer aprender também??
Vamos la.

**Sempre faça backup de seu template,antes realizar quaisquer procedimentos que envolva alterações no código fonte HTML do seu modelo.**

Existem duas formas de se fazer isso.
voçe pode alterar a regra css ja existente no seu layout,que regem as características o seu banner.
Por padrão seria este,mas existe algumas variaçoes dependendo do seu modelo:

.header-outer {
  margin: $(header.margin.top) 0 $(header.margin.bottom) 0;
  background: $(header.background.color) $(header.background.gradient) repeat scroll 0 0;
}

Para encontrar este regra de um Ctrl+f e procure por .header-outer {
Apos encontrar este trecho no seu código substitua-o por este:

/*-------------------imagem do cabeçalho---------------------------- */
.header-outer {
background:url(Url da sua imagem aqui) no-repeat scroll center top!important;
margin: 0 auto!important;
width:largura da imagem em px;
height:Altura da imagem em px;
}

Se seu banner ja contem o nome do blog na imagem e voçe nao quer ele se repita no cabeçalho,
voçe deve localizar outra parte correspondende ao cabeçalho e modifica-la.Geralmente ela se encontra logo abaixo da .header-outer,mas caso nao esteja,de um Ctrl+f e procure por .Header h1
Por padrão deve estarparecido com isto:

.Header h1 {
  font: $(header.font);
  color: $(header.text.color);
  text-shadow: 0 0 $(title.shadow.spread) #000000;

 Nao mecha em nada ai,pois caso queria futuramente queria retirar o banner e voltar a mostrar o título,vai precisar das regras como elas estão.
Para retirar o título repetido voçe só terá que adiconar a seguinte condição  logo apos a abertura da .Header h1{
A condicional é esta:

display:none;/*---esconde o título,retire esta linha se quiser exibir---*/
Assim voçe vai estar dizendo para o navegador que Não deseja que ele esconda o título,exibindo apenas o banner que ja contem o nome do blog.
A regra deverá ,então,ficar desta forma:

.Header h1 {
display:none;/*---esconde o título,retire esta linha se quiser exibi-lo---*/

  font: $(header.font);
  color: $(header.text.color);
  text-shadow: 0 0 $(title.shadow.spread) #000000;

Visualize e salve se ficou do seu gosto.
E não se esqueça sempre que equiser que o título apareça basta apenas retirar a condicional display:none;

Esta dica foi útil?deixe seu comentário ai...
Até a proxima.