[Resolvido] problemas com tema e folha de estilo e header

cfmjunior · Julho 13, 2011

bom dia pessoal !.

bom to com um dvd de um curso de temas wordpress. beleza até ai..

eu fiz um layout para adaptar ao digo cujo CMS.

mas o problema é o seguinte.

eu consigo pegar o <?php get_header();?> ..<?php get_footer();?> ..<?php get_sidebar();?>...<?php include (TEMPLATEPATH . '/arquivo.php'); ?> ..enfim. consigo chamar tmbm a folha de estilo <link rel="stylesheet" type="text/css" href="<?php bloginfo('stylesheet_url'); ?>" />. e coloco pra rodar. e roda perfeito. " ".

bom o problema é o seguinte. eu montei primeiro o tema em tableless e ficou tudo perfeito..mas a situação que tá encucando é no #HEADER..quando eu do os includes q citei a cima e coloco pra rodar o site, o mesmo fica com uma margem no topo. isso acontece qndo eu coloco os includes. mas já o mesmo tema em tableless, ele fica todo bonitinho, do jeito que tem que ser. sendo q eu n declarei nenhuma margem no topo..padding..enfim..oq pode ser ?

/*
Theme Name: diagro
Theme URI: http://www.udiagro.ap.gov.br
Description: agência de defesa e inspeção agropecuaria
Version: 1.0
Author: clodoaldo júnior
Author URL: http://www.diagro.ap.gov.br
Tags: portal diagro animal vegetal
*/

* {margin:0; padding:0;}
body {background:url(images/bg_body.png) repeat-x;}

/*== BARRA DO GOVERNO =*/
#barra_gov {background:url(images/barragov.jpg) no-repeat; margin:auto; width:910px; height:40px; padding-right:90px; -moz-box-shadow: 0px 0px 5px #333;}
#orgaosgov{padding:4px; margin:6px 0px 0px 33px; float:right;}
/*== BARRA DO GOVERNO ==*/

#global {background:#fff; width:1000px; height:auto; margin:0 auto; -moz-box-shadow: 0px 0px 5px #333;}

/*== HEADER ==*/
#header {width:100%; height:auto; margin:0 auto;}

#header_banner {background:url(images/bg_topo.png) no-repeat; width:100%; height:120px; margin:auto;}

#header_nav {height:37px; margin:auto; background:url(images/bg_menu.png) repeat-x;}
#header_nav ul {margin:0; padding:0; list-style:none;}
#header_nav ul li {float:left; padding-top:8px;}
#header_nav ul li a {font:12px Arial, Helvetica, sans-serif; font-weight:bold; text-transform:capitalize; text-decoration:none; color:#666; padding-left:18px; padding-right:18px; background:url(images/efeito_menu.png) no-repeat right;}
#header_nav li a:hover{background:url(images/bg_hover.png) repeat-x; padding-top:10px; padding-bottom:6px; color:#fff; }
/*== HEADER ==*/

/*== LEFT SIDEBAR ==*/
#sidebar_left{width:170px; height:auto; float:left; margin:4px 0 0 0; border-top:4px solid #999;}
#sidebar_left ul {margin:0; padding:0; height:auto;}
#sidebar_left ul li {border-bottom:1px solid #e1e1e1; padding:5px 0px 5px 0px; list-style:none;} 
#sidebar_left ul li a {font:14px Arial, Helvetica, sans-serif; color:#999; text-decoration:none;}
#sidebar_left ul li a:hover{color:#428523; font-weight:bold;}
#sidebar_left ul li:hover {background:#f5f5f5;}
.seta_nav {padding:0 10px;}

#sidebar_left_newsletter {margin:12px 0px 0px 4px; line-height:20px;}
#sidebar_left_newsletter h2 {font:20px Arial, Helvetica, sans-serif;}
#sidebar_left_newsletter p {font:13px Arial, Helvetica, sans-serif; padding:3px 0px;}
#sidebar_left_newsletter label {font:12px Arial, Helvetica, sans-serif; color:#666;}
#sidebar_left_newsnome, #sidebar_left_newsemail {width:140px; height:22px;}
#sidebar_left_newscadastra {font:12px Arial, Helvetica, sans-serif; color:#666; width:70px; margin-top:4px;}
/*== LEFT SIDEBAR ==*/


/*== CONTENT - Responsavel por todo o conteúdo ==*/
#content{width:660px; height:auto; float:left;}

#content_noticias {width:auto; height:auto; margin:25px auto auto auto;}
#content_noticias h2 {background:url(images/bg_titulo.png) repeat-x; font:24px 'Arial', helvetica, sans-serif; font-weight:bold; color:#fff; width:595px; margin:auto; -moz-box-shadow:1px 1px 5px #999; padding-left:25px;}
#content_noticias ul {margin:0; padding:0; width:580px; margin:10px auto auto auto;}
#content_noticias li {list-style:none; padding-top:8px; padding-bottom:8px; border-bottom:1px solid #dfdfdf; font:13px Arial, Helvetica, sans-serif; color:#999;}
#content_noticias li a {color:#999; text-decoration:none}
#content_noticias li a:hover {color:#093; text-decoration:none}
.data_noticia {font:15px "Arial", Arial Black, Helvetica, sans-serif; font-weight:bold; color:#666;}
.noticias_mais {font:12px "Arial", Arial Black, Helvetica, sans-serif; font-weight:bold; color:#666; float:right; margin-right:50px; margin-top:5px;}

#content_programas {width:auto; height:auto; margin:35px auto auto auto;}
#content_programas h2 {background:url(images/bg_titulo.png) repeat-x; font:24px 'Arial', helvetica, sans-serif; font-weight:bold; color:#fff; width:595px; margin:auto; -moz-box-shadow:1px 1px 5px #999; padding-left:25px;}
#content_programas ul li {list-style:none; float:left; margin:0px 2px;}
#content_programas_img img{-moz-box-shadow:0px 0px 5px #ddd;}
.programas-list {margin-left:26px; margin-top:5px;}
/*== CONTENT - Responsavel por todo o conteúdo ==*/


/*== RIGHT SIDEBAR ==*/
#right_sidebar{width:170px; height:auto; float:right;}

#sidebar_parceiros {width:auto; height:auto; margin:auto;}
#sidebar_parceiros ul {margin:4px 0px; padding:0; list-style:none;}
#sidebar_parceiros ul li {margin:auto; display:inline;}
#sidebar_videos {width:auto; height:auto; margin:auto;}

/*== RIGHT SIDEBAR ==*/

/*== FOOTER ==*/
#footer{background:#E2E5DC; height:auto; border-bottom:3px solid #060; margin-top:5px;}

#footer-contato ul {margin:0; padding:0; list-style:none; font-size:13px; color:#999;}
#footer-contato h4 {font-size:14px; font-family:arial; color:#666;}
#footer-contato span {color:#333;}

#footer-endereco h4 {font-size:14px; font-family:arial; color:#666;}
#footer-endereco span {color:#333; font-size:12px; font-family:arial;}

#footer-contato,#footer-redes,#footer-endereco {margin:15px 10px;}

#footer_redes {width:auto; margin:15px 10px;}
#footer_redes img {margin:0 20px;}

#footer_about {float:right;}
.left {float:left;}
/*== FOOTER ==*/

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="<?php bloginfo('stylesheet_url'); ?>" />
<link rel="stylesheet" type="text/css" href="estilos/nivo-slider.css" />
<link rel="stylesheet" href="estilos/default/default.css" type="text/css" media="screen" /> <!--slider-->
<title>
<?php if (is_home()){
bloginfo('name');
}elseif (is_category()){
single_cat_title(); echo ' -  ' ; bloginfo('name');
}elseif (is_single()){
single_post_title();
}elseif (is_page()){
bloginfo('name'); echo ': '; single_post_title();
}else {
wp_title('',true);
} ?>
</title>
<script type="text/javascript" language="javascript" src="js/abrir_menu.js"></script>
<script type="text/javascript" language="javascript" src="js/jquery-1.6.1.min.js"></script>
<script type="text/javascript" language="javascript" src="js/jquery.nivo.slider.js"></script>

<?php wp_head(); ?>
</head>

<script type="text/javascript">
   $(window).load(function() {
       $('#slider').nivoSlider();
   });
   </script>


<body>

<!--Inicio Barra Governo-->
<div id="barra_gov">
<div id="barra_menu">   
     <select name="orgaosgov" id="orgaosgov" title="Orgãos do Governo" onchange="if(options[selectedIndex].value) window.location.href= (options[selectedIndex].value)">

       <option selected="selected" title="Órgãos Governamentais">Órgãos Governamentais</option>
       <option value="javascript:nova_jan('http://www.age.pa.gov.br/')">Auditoria Geral</option>
       <option value="javascript:nova_jan('http://www.sead.ap.gov.br/')">Administração</option>
       <option value="http://www.afap.ap.gov.br">Agência de Fomento</option>
       <option value="http://www.auditoria.ap.gov.br">Auditoria Geral</option>
       <option value="http://www.setec.ap.gov.br">Ciência e Tecnologia</option>
       <option value="http://www.caesa.ap.gov.br">Companhia de Água</option>

       <option value="http://www.cea.ap.gov.br">Companhia Eletricidade</option>
       <option value="http://www.cbm.ap.gov.br">Corpo de Bombeiros</option>
       <option value="http://www.rurap.ap.gov.br/">Desenvolvimento Rural</option>
       <option value="http://www.seed.ap.gov.br">Educação</option>
       <option value="http://www.eap.ap.gov.br/">Escola de Administração</option>
       <option value="http://www.seicom.ap.gov.br">Ind. e Comércio</option>

       <option value="http://www.hemoap.ap.gov.br">Inst. Hematologia</option>
       <option value="http://www.terrap.ap.gov.br">Instituto de Terras</option>
       <option value="http://www.rurap.ap.gov.br/">Instituto Rural</option>
       <option value="http://www.jucap.ap.gov.br">Junta Comercial</option>
       <option value="http://www.lacen.ap.gov.br">LaboratÓrio Central</option>
       <option value="http://www.sema.ap.gov.br">Meio Ambiente</option>

       <option value="http://www.sims.ap.gov.br">Mobilização Social</option>
       <option value="http://www.ipem.ap.gov.br">Pesos e Medidas</option>
       <option value="http://www.seplan.ap.gov.br">Planejamento</option>
       <option value="http://www.policiacivil.ap.gov.br">Polícia Civil</option>
       <option value="http://www.pm.ap.gov.br">Polícia Militar</option>
       <option value="http://www.politec.ap.gov.br">Polícia Técnica</option>

       <option value="http://www.procon.ap.gov.br/">Procon</option>
       <option value="http://www.amapajovem.ap.gov.br">Prog. Amapá Jovem</option>
       <option value="http://www.difusora.ap.gov.br">Rádio Difusora</option>
       <option value="http://www.sefaz.ap.gov.br">Receita</option>
       <option value="http://www.saude.ap.gov.br">Saúde</option>
       <option value="http://http://www.sisp.ap.gov.br/">Segurança Pública</option>

       <option value="http://www.superfacil.ap.gov.br">Super FÁcil</option>
       <option value="http://www.sete.ap.gov.br">Trabalho</option>
       <option value="http://www.detran.ap.gov.br">Trânsito</option>
       <option value="http://www.setrap.ap.gov.br">Transporte</option>
       <option value="http://www.setur.ap.gov.br">Turismo</option>
       <option value="http://www.ueap.ap.gov.br">Universidade Estadual</option>

</select>
	</div>
</div>
<!--Fim Barra Governo-->

<!--Inicio Box Geral-->
<div id="global">

<!--Inicio do Header-->
<div id="header">
 <!--Inicio do Banner-->
 <div id="header_banner">
 </div>
 <!--Fim do Banner-->

  <!--Incio do Header Menu-->
 <div id="header_nav">
   <ul>
     <li><a href="#">principal</a></li>
     <li><a href="#">quem somos</a></li>
     <li><a href="#">fale conosco</a></li>
   </ul>
   </div>
   <!--Fim do Header Menu-->
</div>
<!--Fim do Header-->

sendo que a Div#barra_gov coloquei dentro da Div#Global (container geral) mas continua na mesma coisa !

André Buzzo · Julho 13, 2011

Fala Compadre!!

Seguinte.... vamos lá que eu acho que você está fazendo coisas erradas de início já, sem ter muito a ver com o topo:

Primeiro, que eu nunca usei INCLUDE, propriamente dito, no WP.

Quando eu programo um tema para o Wordpress, eu costumo usar da seguinte maneira, o index.php, que vai tomar lugar do seu include:

<?php get_header(); ?>

<div id="CONTEÚDO DA INDEX.PHP">

<?php get_sidebar(); ?>

<?php get_footer(); ?>

Onde está o CONTEÚDO DA INDEX.PHP é exatamente o que sobrou de código, quando você removeu o HEADER e o FOOTER, assim como a SIDEBAR, para fazer suas respectivas áreas para o site.

Tente fazer dessa maneira para ver se ele continua a se comportar dessa maneira, ou seja, incluindo uma margem ao topo do seu site.

Abraços!

cfmjunior · Julho 13, 2011

Fala Compadre!!

Seguinte.... vamos lá que eu acho que você está fazendo coisas erradas de início já, sem ter muito a ver com o topo:

Primeiro, que eu nunca usei INCLUDE, propriamente dito, no WP.

Quando eu programo um tema para o Wordpress, eu costumo usar da seguinte maneira, o index.php, que vai tomar lugar do seu include:
<?php get_header(); ?>

<div id="CONTEÚDO DA INDEX.PHP">

<?php get_sidebar(); ?>

<?php get_footer(); ?>
Onde está o CONTEÚDO DA INDEX.PHP é exatamente o que sobrou de código, quando você removeu o HEADER e o FOOTER, assim como a SIDEBAR, para fazer suas respectivas áreas para o site.

Tente fazer dessa maneira para ver se ele continua a se comportar dessa maneira, ou seja, incluindo uma margem ao topo do seu site.

Abraços!

André meu amigo..a index ta desse jeito ai q o sr desenvolve

<?php get_header();?>



<?php get_sidebar();?>


<!--Inicio do Content-->
<div id="content">

   <!--Inicio do Slider-->
   <div class="slider-wrapper theme-default">
  	 <div id="slider">
     <img src="images/images/toystory.jpg" alt="" title="Toystory e diagro fazem fiscalização em frigorificos">
       <img src="images/images/up.jpg" alt="" title="DIAGRO e UP em: Altas Aventuras">
       <img src="images/images/walle.jpg" alt="" title="DIAGRO e Walle">
       <img src="images/images/nemo.jpg" alt="" title="Toystory e diagro fazem fiscalização em frigorificos">
  	 </div>
  </div> 
  <!--fim do slider-->

<!--Inicio das Noticias-->
   <div id="content_noticias">

       <h2>Noticias</h2>

    <ul>
       <li><a href="#"><img src="images/bullet_noticias.png" alt="" width="10" height="18" class="seta_nav"><span class="data_noticia">17/09/2009</span> - Assembleia Legislativa realiza I Semana de Saúde do Poder Legislativo Saúde do Poder Legislativo </a></li>
       <li><a href="#"><img src="images/bullet_noticias.png" alt="" width="10" height="18" class="seta_nav"><span class="data_noticia">17/09/2009</span> - Assembleia Legislativa realiza I Semana de Saúde do Poder Legislativo Saúde do Poder Legislativo</a></li>
       <li><a href="#"><img src="images/bullet_noticias.png" alt="" width="10" height="18" class="seta_nav"><span class="data_noticia">17/09/2009</span> - Assembleia Legislativa realiza I Semana de Saúde do Poder Legislativo Saúde do Poder Legislativo</a></li>
       <li><a href="#"><img src="images/bullet_noticias.png" alt="" width="10" height="18" class="seta_nav"><span class="data_noticia">17/09/2009</span> - Assembleia Legislativa realiza I Semana de Saúde do Poder Legislativo Saúde do Poder Legislativo</a></li>
       </ul> 
       		<span class="noticias_mais">Veja +</span>
   </div>
   <!--Fim das Noticias-->

<!--Inicio dos Programas-->
      <div id="content_programas">
      	<h2>Programas</h2>

       	<ul class="programas-list">
           <li>
           	 <div id="#content_programas_img"><img src="images/animal.png" alt="" width="148" height="116"></div>
           </li>
           <li>
          		 <div id="#content_programas_img"><img src="images/vegetal.png" alt="" width="148" height="116"></div>
           </li>
           <li>
          		 <div id="#content_programas_img"><img src="images/barreiras.png" alt="" width="148" height="116"></div>
           </li>
           <li>
           	<div id="#content_programas_img"><img src="images/inspecao.png" alt="" width="148" height="116"></div></li>
           </ul>
</div>
      <!--Fim dos Programas-->

</div>
<!--Fim do Content-->

<!--Inicio Right Sidebar-->
<?php include (TEMPLATEPATH . '/right_sidebar.php'); ?>
<!--Fim Right Sidebar-->

<!--Inicio do Footer-->
<?php get_footer();?>
<!--Fim Footer-->

eu qro q o topo fique grudadoo e não como uma margem.sakou? ele sem a "programação" do wordpress, fica beleza. mas qundo eu chamo o header..footer...enfim. fica assim.. o jeito so se for eu colocar um margin-top:- .... ai ele sobe

h4v3st · Julho 13, 2011

Eu tive um problema uma vez com isso e era a codificação da página.

Está tudo utf8 ?

Anderson Narciso · Julho 14, 2011

Cara, não é que o topo está com margem, é o painel do wp querendo aparecer ali... Ele não aparece porque seu arquivo footer não deve possuir um <?php wp_footer(); ?> Por isso ele está deixando uma margem. As ultiams versões do WP acompanham esse "Atalho" ao painel, mas você pode retirar ele através da página do seu perfil. (98% de chances de ser esse o "problema")

Fora isso tem algumas coisas que você dereveria alterar, não que tenha ahver com seu problema mas por opção correta ao WP.

Links de ligação como

<script type="text/javascript" language="javascript" src="js/abrir_menu.js"></script>
<script type="text/javascript" language="javascript" src="js/jquery-1.6.1.min.js"></script>
<script type="text/javascript" language="javascript" src="js/jquery.nivo.slider.js"></script>

Você deveria chamar como <?php bloginfo('template_directory'); ?>

<script type="text/javascript" language="javascript" src="<?php bloginfo('template_directory'); ?>/js/abrir_menu.js"></script>

Tanto JS quando CSS, e <img="<?php bloginfo('template_directory'); ?>/" você deve usar isso o bloginfo, mas como você citou lá em cima o bloginfo para css creio que você já esteje ligado em relação a isso.

Lance do "include"

<?php include (TEMPLATEPATH . '/right_sidebar.php'); ?>

Pode usar à vontade cara, ele é bastante usado para separar material, slider, ou alguma outra coisa que você queira, lembrando que um include normal php também funciona

<?php include_once"page.php"; ?>

Até!

cfmjunior · Julho 14, 2011

OPA GALERA ! CONSEGUI .

h4v3st - você estava certissimo ! isso eu estava usando o charset UTF8 e mudei para charset=iso-8859-1 !

Anderson Narciso . não era o atalho não ! rsr ! mudei o charset UTF8 para charset=iso-8859-1" e o topo colou! enquanto ao bloginfo eu estou usando do jeito que voce disse:

<script type="text/javascript" language="javascript" src="<?php bloginfo('template_directory'); ?>/js/abrir_menu.js"></script>

<link rel="stylesheet" type="text/css" href="<?php bloginfo('stylesheet_url'); ?>" />

.css

obrigado ae galera !! agora q to começando a mexer mesmo com o wordpresso e entãoo todo aprendizado é aprendizado e bem vindo !! valew !!!

h4v3st · Julho 15, 2011

Disponha :D

O ideal é definir o charset a ser utilizado antes de começar o projeto.

cfmjunior · Julho 18, 2011

Beleza ! valew !!!

Arquivado

[Resolvido] problemas com tema e folha de estilo e header

Recommended Posts

cfmjunior 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

André Buzzo 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

cfmjunior 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

h4v3st 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

Anderson Narciso 3

Compartilhar este post

Link para o post

Compartilhar em outros sites

cfmjunior 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

h4v3st 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

cfmjunior 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

PHP+Codeigniter - Adicionar Registro Plano de Contas

Javascript - Passar Parâmetros para uma Função.

PHP - Consulta MySql para prazo de dias

Fóruns

Tempo Real

Informação importante