Editando widgets e elementos do blog individualmente

Hi!

No artigo anterior  Conhecendo a Ferramenta de Desenvolvedor Web eu falei um pouco sobre a ferramenta de desenvolvedor web padrão do firefox e hoje vou estar mostrando como utilizar a função 'inspecionar' para estudar ,compreender e personalizar o layout do seu blog.

Vamos la?

 * Sempre efetue Backup do seu template antes de realizar quaisquer procedimentos que impliquem modificação direta no seu código fonte do HTML do seu layout

Iremos personalizar os widgets individualmente,portanto teremos que,primeiramente,descobrir o nome  de cada um deles e a regra de estilização que cada um ja recebeu ou herdou.

É ai que entra a função inspecionar.O procedimento é simples.

Com o painel do blog aberto clique em visualizar blog para abrir a sua pagina inicial.

Agora vá na menu do seu navegador firefox,escolha a opção ferramenta>Desenvolvedor web>Inspecionar.

Veja que uma barra apareceu no inferir da sua tela.

(Clique sobre a imagem para ampliar)

Vamos entender?

Na imagem acima a flecha verde aponta para a visualização 3D.é uma função fantástica que permite visualizar a pagina totalmente os níveis e camadas em 3D.

Ainda nao entendi a real utilidade dela mais que é interessante,isso ninguém pode negar.

 Dentro do retângulo laranja esta a hierarquia correspondente ao elemento selecionado,dentro do codigo fonte.A tag dentro da qual ele esta inserido,e onde esta por sua vez esta localizada e assim por diante,como mostra no retangulo rosa logo acima.Não se preocupe em entender isso,nao iremos utilizar essa função neste momento.

A flecha preta aponta para 'Estilos',ao clicar sobre esta opção as regras de css existentes no elemento selecionado serão exibidas e voçe poderá copia-las caso precise ou até mesmo edita-las.

Ao clicar no 'X' que esta dentro do retangulo vermelho logo a seguir,fecha-se a função inspecionar.

A flecha vermelha á esquerda aponta para o parâmetro de navegação do 'inspecionar',clique sobre ele mova o mouse até a base inferior do elemento ou widget que deseja personalizar/editar e selecione-o desta forma.

No caso de sua seleção esta na sidebar,repare que aparece o nome em verde do widget selecionado junto ao seletor '#'.É exatamente desta forma que voçe deverá reprenta-lo no seu código fonte:

#nomedowidgetnumero ,como aparece na função inspecionar.(nunca se esqueça do número)

Se preferir abra a opção estilos e analise as regras que ja estão aplicadas ou herdadas neste,caso nao queira siga para o proximo passo.

*Observção:Caso o elemento que voçe queira personalizar nao esteja na sidebar ,nao irá aparecer o nome e seletor verde,então voçe deverá utilizar o nome que aparece em azul.No caso do nosso exemplo seria .widget.PopularPosts,adicionando-o normalmente como manda o procedimento á seguir.

Agora que voçe ja tem o nome do elemento que quer personalizar,abra seu codigo fonte.

Modelo>Editar HTML.

e com Ctrl+F localize  a sua ]]></b:skin>.

Acima desta tag insira o nome do widget que apareceu em verde no Inspecionar junto ás chaves  e dentro delas as regras css que voçe quer aplicar,no exemplo utilizado,ficaria assim;

Exemplo:

#PopularPosts1 {

 color:#xxxxxx;

background:#000000 url();

border:#xxxxxx;

}

Faça sua modificações,visualize e se acima da tag skin nao tiver funcionado copie estre trecho e apague-o em seguida, agora procure pelo body { ,e  em qualquer lugar depois do fechamento dela (}) cole o código copiado do seu widget,adicionando o !important depois de cada condicional,desta forma.

Exemplo:

#PopularPosts1 {

 color:#xxxxxx!important;

background:#000000 url()!important;

border:#xxxxxx!important; 

 }

Visualize,deve funcionar assim,mas caso nao dê certo voçe pode ainda colar o código do seu widget acima da tag </head>,colocando entre, é claro,<style type='text/css'> e </style>,desta forma:

Exemplo:

<style type='text/css'>

#PopularPosts1 {

 color:#xxxxxx!important;

background:#000000 url()!important;

border:#xxxxxx!important; 

 }

</style>

Claro que as estilizações foram usadas apenas como exemplo,cabe a voçe editar e personalizar de acordo com a sua preferencia ou forma a combinar com o seu layout.

Veja nosso resultado,observando que os dois widgets estão diferentes um do outro:

 

Ressaltando que se nenhuma das formas mencionadas funcionar ,deve haver algo que esta gerando conflito no seu código fonte,revise-o completamente e depois tente novamente.

Considerações

A técnica nao é muito diferente dos tutoriais ja existentes por ai,o diferencial é que utilizamos a ferramenta de desenvolvedor web e era exatamente essa a intenção,mostrar o quanto ela pode ser útil,te ajudar a estudar o ambiente,compreender e a ir cada vez mais longe.

 .----.
_.'__ ---`.
.--(#)(##)---/#\
.' @`------------/###\
:------------,--#####
`-..__.-'_.--\###/
:'''''''''`"'
/, ---- ,\
/, ------- ,\
//--------- \\
                    `-.______.-'                    

                        ____`. | .´'___                         

 (______|______)

O que achou desta dica?Te ajudou?Ainda tem alguma dúvida?deixe seu comentário ai....

Até a próxima.