Para Blogueiras(os): Criando um Template (parte 7)

Oi oi galeraa!!



Hoje eu trago mais uma postagem do tutorial "Criando um template" do quadro "Para Blogueiras(os)".
Hoje eu vou ensinar a como trocar o footer da nossa postagem por uma imagem personalizada.

Na ultima parte do nosso tutorial nós deixamos nosso rodapé com cores, hoje vou ensiná-los à colocar uma imagem no lugar!! 

Personalizando o Rodapé das postagens com uma imagem!

Antes de tudo deveremos ter um editor de imagens, o que eu vou usar é o Photoscape.
Obs.: Para trocar o texto por uma imagem, é necessário que você já tenha todos os seus widgets já instalados na #sidebar-wrapper, pois precisaremos alterar uma parte do código referente a cada widget.

Vamos lá então:

Primeiramente vamos criar uma imagem com o título do widget que deseja com a mesma largura da nossa #main-wrapper.

A minha sidebar por exemplo, tem: a largura padrão do mínima que é 410px, então minha imagem terá 410 de largura (e para a altura você usará a qual preferir, no meu eu usei  40px.)

Mas Elen, eu não sei qual a largura da minha main-wrapper, como que eu descubro?

Bom, vamos usar o esqueminha do Ctrl+F e vamos digitar o código: #main-wrapper

E como resultado deverá ter um código assim:

#main-wrapper {
  width: 410px;
  float: $startSide;
  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 */
  background: #FFFFFF; 
  padding:10px;
  }
A nossa altura é o que está determinado em Width:
Agora vamos fazer nossa imagem, mãos à obra!!
A minha ficou assim: 



Usando o Ctrl+F procure por .post-footer {

Deverá aparecer o seguinte código:

.post-footer {
  margin: .75em 0;
  background: #000000; /* Fundo Preto */
  padding: 4px;
  color:#FFFFFF; /* Texto em Branco */
  text-transform:normal;  
  letter-spacing:.0em;  
  font-family: Sacramento;
  font-size: 12pt;
  font-style: Oblique;  /* fonte obliqua */
  line-height: 1.8em;
  border: 2px dotted #FE2E2E;  /* Borda vermelha em volta */
  }

Agora vamos alterar a linha background
Vamos substituí-la por essa:  background:url("link da sua imagem")no-repeat; 
link da imagem você deverá substituir pelo URL da sua imagem que já deverá ter sido hospedada, daquele jeito que ensinei na Parte 5 desse tutorial!!

Veja o meu:

.post-footer {
  margin: .75em 0;
  padding: 4px;
  color:##FA58D0; /* Texto Rosa */
  text-transform:normal;  
  letter-spacing:.0em;  
  font-family: Sacramento;
  font-size: 12pt;
  font-style: Oblique;  /* fonte obliqua */
  line-height: 1.8em;
  border: 2px dotted #FE2E2E;  /* Borda vermelha em volta */
  }

Agora Visualize seu modelo, e se estiver como você quer, salve!

Com a propriedade no-repeat

Sem a propriedade no-repeat




Bom, esse foi mais uma parte do tutorial, espero que tenham gostado!
Se gostou deixe seu comentário ai!! Ele serve de incentivo para a continuação do quadro "PARA BLOGUEIRAS(OS)"
Se tiver alguma dúvida use os comentários para tirá-las!!



XoXo

0 comentários:

Postar um comentário