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á…
{ 2 trackbacks }