Pular para o conteúdo
Início » CSS » Dicas – aumentando a sidebar do tema Twenty Ten (WordPress)

Dicas – aumentando a sidebar do tema Twenty Ten (WordPress)

Google News

O WordPress 3.0 saiu do forno e por isso mesmo além das novidades temos um novo tema. O Twenty Ten se tornou o tema padrão, substituindo o Kubrick e o Classic, que eram temas padrões das diversas versões deste que se tornou um dos melhores sistemas de CMS (geração de conteúdo) da atualidade. Bom, eu adotei o tema tanto aqui quanto no Select Game, pelo tema ser limpo, bonito e por já ter o sistema de menus de forma nativa, onde a gente pode construir o meu usando uma interface simples e sem precisar mexer em HTML.
O problema é que a sidebar ficou muito pequena. Quem normalmente usa uma sidebar com cerca de 300 pixels vai perceber que o novo tema vai cortar parte delas. Depois de ter mexido muito no tema no último sábado e hoje, descobri uma maneira mais simples de alterar esse tamanho. O problema é que você terá de mexer no CSS principal do tema, mas são poucas linhas para serem alteradas, além de diminuir a largura da coluna de posts. Por padrão, o tema vem assim:

#container {
	float: left;
	margin: 0 -240px 0 0;
	width: 100%;
}
#content {
	margin: 0 280px 0 20px;
}
#primary,
#secondary {
	float: right;
	overflow: hidden;
	width: 220px;
}

São 3 passos que você terá de seguir.

  1. Altere a propriedade margin do content, aumentando o número da margem esquerda e diminua a da direita. Isso vai diminuir a coluna de conteúdo (onde ficam os posts). Eu coloquei 0 310px 0 5px;
  2. Altere a propriedade margin do container, mantendo o sinal negativo do valor 240. Inicialmente o tema não terá alterações. Eu coloquei 310.
  3. Altere a propriedade width de primary/secundary, que irá alterar o tamanho da sidebar. Eu coloquei 300.

O CSS, alterado, ficará assim:

#container {
	float: left;
	margin: 0 -310px 0 0;
	width: 100%;
}
#content {
	margin: 0 310px 0 5px;
}
#primary,
#secondary {
	float: right;
	overflow: hidden;
	width: 300px;
}

Basta salvar e ver os resultados. Caso queira ver em tempo real, recomendo usar o Firefox e a extensão Firebug, onde você pode fazer alterações e ver o tema sendo modificado na mesma hora. O plugin é essencial para desenvolvedores web que mexem muito com CSS:

O que achei ruim desse tema é que a parte CSS é um pouco confusa, sem demarcar separadamente os tamanhos da sidebar e do content. Obviamente há temas mais bonitos e com um sistema interno de administração mais poderoso que a maioria dos temas, mas pra quem for usar o tema padrão do WordPress 3.0, fica as dicas.
[Logo via este blog]

3 comentários em “Dicas – aumentando a sidebar do tema Twenty Ten (WordPress)”

  1. Alterei o arquivo style.css, coloquei os números que você sugeriu. Mas não houve alteração no template. Devo alterar outros arquivos?

  2. Cara parabéns, esse post é maravilhoso deu para resolver meu problema facil, mas eu tenho outro pro quero mudar o logo colocando uma imagem, vc pode me ajudar.

Não é possível comentar.