10 Dicas para Personalizar Thesis

Este artigo é uma adaptação e tradução do artigo original “10 Ways to Customize Thesis and Enhance Your Blog – MattFlies”.

MattFlies compilou uma serie de dicas muito úteis para personalizar um blog WordPress com o Thesis Theme que poderão ser muito úteis quando pretendemos atribuir um toque pessoal ao layout e à funcionalidade do blog.

ALTERAR A COR DA BARRA LATERAL

Uma das modificações mais fáceis e simples que é possível fazer com o Thesis Theme é exactamente mudar a cor de fundo da barra lateral. Para isso, basta inserir o seguinte código no ficheiro custom.css:

.custom #content_box {background-color:#F5F5F5;}
.custom #content {background-color:#fff;}

Ambas as linhas de código são necessárias para que tudo funcione correctamente. Contudo, existe um pequeno bug com esta solução. Se porventura possui um página onde o conteúdo é maior do que a barra lateral então no restante do conteúdo a barra lateral será visualizada na sua cor original.

INSERIR IMAGEM NO CABEÇALHO

Para substituir o texto na instalação padrão do Thesis Theme, basta colocar o código que se segue na custom.css.

Esta alteração irá fazer com que o cabeçalho seja personalizável e clicável. Contudo, após estas modificações deverá certificar-se a altura, largura e URL estão de acordo com o que pretende para o seu blog:

.custom #header #logo a { display: block; height: #px; width: #px; background: url('INSERT IMAGE URL') no-repeat; outline: none; }

Está linha de código irá retirar o texto e o slogan original do blog:

.custom #header #logo, .custom #header #tagline { text-indent: -9999px; }

Os espaços em branco após o cabeçalho da imagem são retirados com o seguinte código:

.custom #header #tagline { height: 0; }

Para retirar o preenchimento em redor do cabeçalho utiliza-se o seguinte código:

.custom #header { padding: 0; border-bottom:none;}

LINKS DAS REDES SOCIAIS & PERFIL DO AUTOR NO FUNDO DOS ARTIGOS

Para criar uma caixa que irá exibir os links das Redes Sociais e o perfil do Autor, o procedimento é relativamente fácil, mas necessita que insira linhas de código no custom_functions.php e no custom. css. Tudo isto para usufruir das potencialidades do Custom Hooks do Thesis.

Ao utilizar PHP, tanto o perfil como a foto e outras informações serão automáticamente introduzidas no seu blog.

Primeiro, faça copy & Paste do seguinte código no custom_functions.php:

function post_footer() {
	if (is_single())
	{
	?>
<div class="socialmedia"><p><strong>Share this post:</strong> <a rel="nofollow" href="http://twitter.com/home/?status=<?php the_title(); ?> -  http://YOUR_URL.com/?p=<?php the_ID(); ?>">Tweet It</a> | <a rel="nofollow" href="http://www.facebook.com/sharer.php" onclick="window.open('http://www.facebook.com/sharer.php?u=<?php the_permalink() ?>&t='+encodeURIComponent(document.title), 'facebook','toolbar=no,width=700,height=400'); return false;">Facebook It</a> | <a rel="nofollow" href="http://www.stumbleupon.com/submit?url=<?php the_permalink() ?>">Stumble It</a> | <a rel="nofollow" href="http://www.digg.com/submit?phase=2&url=<?php the_permalink() ?>">Digg It</a> | <a rel="nofollow" href="http://del.icio.us/post?url=<?php the_permalink() ?>&title=INSERT_TITLE">
Delicious It</a></p></div>
<div class="postauthor">
		<?php echo get_avatar( get_the_author_id() , 120 ); ?>
		<h4>Article by <a href="<?php the_author_url(); ?>">
		<?php the_author_firstname(); ?> <?php the_author_lastname(); ?></a></h4>
  <p><?php the_author_firstname(); ?> has written <strong><?php the_author_posts(); ?></strong> awesome articles for us. <?php the_author_description(); ?></p><p>If you liked this post, you will definitely enjoy our others. Subscribe to the feed via RSS or EMAIL to get instantly updated for those awesome posts soon to come.</p>
</div>
	<?php
	}
}
	add_action('thesis_hook_after_post_box', 'post_footer');

Certifique-se que os Urls referentes ao seu blog estão inseridos correctamente no código acima, mas sinta-se livre para alterar e inserir mais informações suas.

Quanto ao layout da caixa pode fazer tudo o que desejar, contudo o css que utilizo segue aqui para ponto de partida:

.postauthor { background: #F5F5F5; border-top: 1px solid #e1e1e0; border-bottom: 1px solid #e1e1e0; overflow: hidden; padding: 1.5em; }

.postauthor img { border: 5px solid #e2dede; float: left; margin-right: 1.5em; }.postauthor h4 { color: #666; font-size: 2em; margin-bottom: 5px; }.postauthor p { color: #515151; font-size: 13px; margin-bottom: 12px; }

Quanto ao css para o caixa das Redes Sociais:

.socialmedia { background: #FFFBCC; border-top: 1px solid #E6DB55; border-bottom: 1px solid #e1e1e0; overflow: hidden; padding: 1em; text-align: center;}.socialmedia p { color: #515151; font-size: 1.3em;}

ALTERAR A COR DO HOVER DO MENU PRINCIPAL

Alterando as cores do menu principal é bastante simples através do Painel de controle do Thesis Theme, todavia alterar a cor do hover do menu não é assim tão simples. Mas pode faze-lo colocando o seguinte código no ser custom.css. Pode alterar as cores para as suas preferidas.

.custom ul#tabs li a:hover {color: #fff; text-decoration: underline; background-color: #1873a1; }

Para alterar a conta do link subscrever RSS, utiliza-se o seguinte código:

.custom ul#tabs li.rss a:hover { background-color: #fff; color: #111; }

MODIFICAR OS ARQUIVOS

Para possuir a página de artigos organizada e simples com algumas funcionalidade que não são usuais, pode conseguir de forma simples colocando o seguinte código no custom_functions.php:

function my_archive() {
?>
<div class="archive">
<div class="archivel">
  <h3>By Category:</h3>
  <ul>
    <?php wp_list_categories('sort_column=name&title_li='); ?>
  </ul>

  <h3>By Month:</h3>
  <ul>
    <?php wp_get_archives('type=monthly'); ?>
  </ul>

</div>

<div class="archiver">

   <h3>By Post: (Last 100 articles)</h3>
   <ul>
     <?php wp_get_archives('type=postbypost&limit=100'); ?>
   </ul>
</div>
</div>
<?php
}

remove_action('thesis_hook_archives_template', 'thesis_archives_template');
add_action('thesis_hook_archives_template', 'my_archive');

Depois o código css, no custom.css:

.custom .archive h3 {margin-top: 0;}.custom .archive ul {font-size: .85em; } .custom .archivel { float: left; width: 40%;}.custom .archiver { float: right; width: 60%;}

LEGENDA NAS IMAGENS

Este código já não é necessário porque o código já está incluído na nova versão do Thesis Theme.

REMOVER A LINHA QUE DIVIDE A BARRA LATERAL DA ÁREA DE CONTEUDO

Para remover a linha que divide o conteudo da barra lateral e manter tudo com deseja basta adicionar a seguinte linha de código no custom.css:

.custom #content_box {background:none;}

REMOVER O TITULO DA CATEGORIA NAS PÁGINAS DE CATEGORIAS.

O titulo das categorias que aparece no topo da página das categorias pode ser removido de forma simples através da seguinte linha de código que devrá ser colocada na custom.css:

#archive_info {display:none;}

Até já…

Comprar Thesis Theme