Full-Width Header!!! Como colocar no Thesis.

Recentemente fui solicitado por um leitor aqui do DinheiroPT para escrever mais artigos sobre como personalizar o Thesis Theme. Como é obvio, vou corresponder ao pedido e irei nos próximos tempos publicar artigos sobre diversas formas para optimizar e personalizar Thesis Theme para uma melhor utilização pelos leitores e visitantes de todos os bloggers “super inteligentes” que possuem o fantástico Thesis Theme.

Se por ventura é um dos bloggers que ainda não conhece o Thesis Theme então aconselho-o a ler o artigo “ Porquê Thesis é o melhor Tema WordPress?” para descobrir o que tem vindo a perder.

Retomando o assunto, hoje vou abordar Full Width Headers no Thesis ou em Português “Cabeçalho com a largura total do browser”.

Provavelmente, para os iniciantes no tema Thesis a optimização do cabeçalho pode parecer algo extremamente difícil de conceber, no entanto, digo-vos que não é, e reforço que o segredo da personalização do Thesis Theme está na utilização de hooks (ganchos) que permitem alterar a posição de qualquer parte do blog sem que necessite de ser especialista em código.

Se o termo hooks não lhe é familiar então sugiro que consulte o artigo “Thesis OpenHook – Um plugin Poderoso” que irá ficar totalmente esclarecido.

Como é óbvio, o tópico Thesis Full Width header não é nada de novo e a blogger que possui os créditos pelo melhor tutorial é Kristen Symonds do blog Kristarella com o seu artigo Thesis full-width headers 101.

Full-Width

Como podem verificar o DinheiroPT possui largura total no seu cabeçalho e utilizou os concelhos de Kristarella para optimizar e personalizar todo o seu cabeçalho e garanto-vos que o podem fazer para os vossos blogs em apenas 3 simples passos.

1º PASSO

Escolher Full Width em HTML Framework [design options/html framework]..

Full-Width

Como é de esperar o primeiro passo que deve fazer é no painel de controlo do Thesis seleccionar o campo Full-width framework e aconselho-o igualmente a optar por optimizar o Outer Page Padding colocando o valor 0.0 ou 0.5.

Nota: a alteração para full-width irá mexer no código CSS que já poderá ter inserido em custom.css. Assim sendo deverá corrigir esses erros caso aconteça.

2º PASSO

Agora devemos ir a custom_fuctions.php e colocar o seguinte código que basicamente vai retirar a barra de navegação e o cabeçalho e seguidamente o vai inserir novamente, mas fora do blog, isto é, fora do html.

Esta modificação permitira que o cabeçalho e a barra de navegação possuam a largura total do browser. Mas só acontece se o 1º passo esteja efectuado.

remove_action('thesis_hook_before_header', 'thesis_nav_menu');
remove_action('thesis_hook_header', 'thesis_default_header');

function full_width_header() { ?>
	<div id="nav_area" class="full_width">
		<div class="page">
			<?php thesis_nav_menu(); ?>
		</div>
	</div>
	<div id="title_area" class="full_width">
		<div class="page">
			<div id="header">
				<?php thesis_default_header(); ?>
			</div>
		</div>
	</div>
<?php }
add_action('thesis_hook_before_html', 'full_width_header');

3º PASSO

Como é óbvio temos que inserir algum CSS para posicionar e personalizar o cabeçalho. O código é simples e permite que seja alterado pelo utilizador.

Como este artigo´possui referencia no artigo de Kristella vou colocar o código CSS original no entanto também vou disponibilizar o código que utilizei para o DinheiroPT.

Em custom.css;

Kristarella

.custom #header_area{display:none;}

.custom #nav_area {background:#c3d9d6; padding:0.5em 0; border-bottom:1px solid #ddf;}
	.custom #nav_area ul {border-bottom:none; border-left:none;}
		.custom #nav_area ul li {border-width:0; margin-bottom:0; padding-bottom:0; background:none;}

.custom #title_area {background:#de6a61; padding:1em 0; border-bottom:1px solid #c55;}
	.custom #header {border-bottom:none;}

DinheiroPT

.custom #header #logo a { display: block; height: 130px; width: 960px; background: url(images/dinheiroptblog.gif) no-repeat; outline: none; }
.custom #header #logo, .custom #header #tagline { text-indent: -9999px; }
.custom #header #tagline { height: 0; }
.custom #header { padding: 0; }
.custom #header {border-bottom:none;}
.custom #nav_area {background:#262626; border-bottom:3px solid #F09327; padding-top:6px;}
	.custom ul#tabs {border-bottom:0; border-color:#DBD4B7;}
		.custom ul#tabs li {border-color:#DBD4B7; background-color:#E6DEC0;}
		.custom ul#tabs li.current_page_item, .custom ul#tabs li.current-cat {background:#fff;}
.custom .menu { background: #262626; }
.custom .menu a, .menu .current ul a, .menu .current-cat ul a { margin: 6px;}

FINALIZANDO

Como pode verificar é extremamente simples possuir cabeçalhos com largura total no entanto, alguns arranjos necessitam de ser feitos a nível de CSS em custom.css e no painel de administração do Thesis  em design options Nav Bar, nomeadamente a alteração das cores do texto na barra de navegação e outros.

Já agora se não possuem Thesis estão a perder tráfego no vosso blog. Comprem Thesis.

Até já…