A seguir não se trata de escolher um Tema WordPress, mas de encontrar os estilos CSS dentro do seu Tema atual. Muitas vezes um problema ocorre em uma parte do layout ou modelo. Por exemplo, há uma borda que você não quer entre o menu da barra lateral e o resto da página. Você caça e caça, mas não consegue encontrar nenhuma referência à borda. Agora o quê?

Tocar CSS Detective

Comecemos por jogar CSS detective. Você sabe onde está o problema, simplesmente não consegue encontrar o problema. No exemplo acima, você precisa caçar uma borda errante.

Begin examinando cuidadosamente uma página gerada (ou página de teste) e procurar algum texto identificador na barra lateral, perto da borda errante. Digamos que listado na barra lateral, você tem um título de post chamado “All About Harry” (Tudo sobre Harry). Você sabe que encontrará esse título na sua barra lateral quando visualizar o código fonte da página.

Para visualizar o código fonte de uma página, vá até a barra de menu do seu navegador e escolha VIEW > PAGE SOURCE ou VIEW > SOURCE. Uma página irá aparecer com o código fonte da página.

Utiliza a tua ferramenta útil de detective, Ctrl+F, para activar a tua pesquisa. Digite “all about harry” e clique em FIND. A menos que você tenha as palavras “all about harry” no seu post, isso o levará para a primeira exibição da frase “all about harry”, que provavelmente está na sua barra lateral. Caso contrário, clique em FIND novamente até encontrar a frase certa na área certa.

Se você estiver usando o Internet Explorer, um método alternativo é usar a Barra de Ferramentas do Desenvolvedor do Internet Explorer, que lhe permite ver e selecionar visualmente os elementos, IDs e classes na página. Ela exibe os elementos dentro da hierarquia da página, seus atributos CSS, e pode delinear DIVs, tabelas, etc. Você pode baixar a barra de ferramentas de Microsoft.

Após ter encontrado a frase, é hora de jogar CSS detective. Procure através do código da frase “All About Harry” por uma de duas coisas. Vai se parecer com qualquer uma destas, usando palavras como sidebar, menu, ou sidecolumn:

<div>or<div class="sidebar">

Esta é a secção principal que contém o menu da sua barra lateral. Você encontrou o primeiro suspeito.

Agora, abra seu arquivo style.css e faça outra busca pela barra lateral ou qualquer que seja o nome resultante que você tenha descoberto. Geralmente é identificado de duas maneiras:

#sidebaror.sidebar

Veja os estilos sob estes seletores CSS e veja se há uma menção de borda, muitas vezes parecendo algo assim:

#sidebar {position: relative; float: right; width: 170px; color: blue; font-size: 90%; border-right: solid 1px blue; }

Existe a sua borda, o criminoso! Se este é o culpado, apague a referência à fronteira e você está pronto para ir.

Se não for, a caça continua.

Por vezes o culpado é aquele que você menos suspeita. Talvez a borda não seja causada pelo suspeito óbvio, a barra lateral, mas pela seção de conteúdo. Volte ao código fonte da página gerada e procure pelas primeiras palavras do seu post. Procure acima disso por algo como:

<div>

Pode ser chamado de content, page. post, maincolumn, widecolumn, ou ter outro pseudônimo, mas deve ser o container CSS que guarda as informações do seu post. Agora, volte à folha de estilo e verifique se há uma borda nessa seção.

Frisk the Style Sheet

Se todas elas falharem, o detetive CSS nunca desistirá da caçada. Volte para o esconderijo de todos os estilos, o arquivo style.css, e reviste-o fazendo uma busca por “borda” e olhe cuidadosamente para cada suspeito. Anote o nome do ID seletor, como barra lateral, menu, conteúdo e página, e então volte à fonte da página gerada para ver se esse pode ser o seu culpado.

Você também pode selecionar a borda suspeita que você encontrou na folha de estilos e cortá-la e colá-la em um arquivo TXT (como o Bloco de Notas) que fica aberto no seu computador como um bloco de notas de raspar. Faça uma nota com o nome do selector de onde o removeu assim:

Removed border: solid 2px green from #content

Depois guarde o style.css editado e carregue-o para o seu site. Atualize o post de teste gerado e veja se a borda indesejada desapareceu. Se assim for, você encontrou o culpado. Se não, volte ao bloco de notas e copie o código e coloque-o de volta em seu style.css na seção “content”, colocando as coisas de volta onde você encontrou.

Se você encontrar seu culpado, faça uma pequena dança, guinche e torça, e faça os outros desconfiarem e ficarem nervosos quando estiverem perto de você. O detective CSS resolve outro crime CSS!

Mais ajuda na resolução de problemas CSS

  • Bugs de Browser CSS de correcção
  • Resolução de problemas CSS