Suporte » Temas e templates » Alterar imagem do cabeçalho tema Hueman

  • Resolvido junio oliveira

    (@junio-oliveira)


    Boas,
    não sei se é aqui que tenho de apresentar este tópico, se não for que me chamem atenção.
    Gostaria de alterar o fundo do cabeçalho do meu tema (Hueman) e não sei como lá chegar, vou postar o código do header e se alguém puder me ajudar fico imensamente agradecido.

    <!DOCTYPE html>
    <html class="no-js" <?php language_attributes(); ?>>
    
    <head>
    	<meta charset="<?php bloginfo('charset'); ?>">
    	<meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    	<title><?php wp_title(''); ?></title>
    
    	<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>">
    
    	<?php wp_head(); ?>
    </head>
    
    <body <?php body_class(); ?>>
    
    <div id="wrapper">
    
    	<header id="header">
    
    		<?php if (has_nav_menu('topbar')): ?>
    			<nav class="nav-container group" id="nav-topbar">
    				<div class="nav-toggle"><i class="fa fa-bars"></i></div>
    				<div class="nav-text"><!-- put your mobile menu text here --></div>
    				<div class="nav-wrap container"><?php wp_nav_menu(array('theme_location'=>'topbar','menu_class'=>'nav container-inner group','container'=>'','menu_id' => '','fallback_cb'=> false)); ?></div>
    
    				<div class="container">
    					<div class="container-inner">
    						<div class="toggle-search"><i class="fa fa-search"></i></div>
    						<div class="search-expand">
    							<div class="search-expand-inner">
    								<?php get_search_form(); ?>
    							</div>
    						</div>
    					</div><!--/.container-inner-->
    				</div><!--/.container-->
    
    			</nav><!--/#nav-topbar-->
    		<?php endif; ?>
    
    		<div class="container group">
    			<div class="container-inner">
    
    				<div class="group pad">
    					<?php echo alx_site_title(); ?>
    					<?php if ( ot_get_option('site-description') != 'off' ): ?><p class="site-description"><?php bloginfo( 'description' ); ?></p><?php endif; ?>
    				</div>
    
    				<?php if (has_nav_menu('header')): ?>
    					<nav class="nav-container group" id="nav-header">
    						<div class="nav-toggle"><i class="fa fa-bars"></i></div>
    						<div class="nav-text"><!-- put your mobile menu text here --></div>
    						<div class="nav-wrap container"><?php wp_nav_menu(array('theme_location'=>'header','menu_class'=>'nav container-inner group','container'=>'','menu_id' => '','fallback_cb'=> false)); ?></div>
    					</nav><!--/#nav-header-->
    				<?php endif; ?>
    
    			</div><!--/.container-inner-->
    		</div><!--/.container-->
    
    	</header><!--/#header-->
    
    	<div class="container" id="page">
    		<div class="container-inner">
    			<div class="main">
    				<div class="main-inner group">
A visualizar 15 respostas - de 1 a 15 (de um total de 19)
  • Esse code que você mandou é o HTML da página. Para você editar o background do header, você tem de ir no CSS!

    Razzk, obrigado pela atenção e desculpa tamanha ignorância.

    vou postar aqui a parte do HEADER que acredito ser o sítio a ser alterado. Seria possível você me dar a indicação de onde tenho que colocar a nova imagem para alterar o background do header?

    Section: Header
    /* ------------------------------------------------------------------------- */
    #header { background: #33363b; position: relative; padding-bottom: 60px; }
    #header .pad { padding-top: 28px; padding-bottom: 30px; }
    #header .container-inner { position: relative; }
    
    .site-title { font-size: 42px; font-weight: 600; letter-spacing: -0.5px; float: left; line-height: 60px; padding: 10px 0; }
    .site-title a { display: block; color: #fff; max-width: 100%; }
    .site-title a img { display: block; max-width: 100%; max-height: 60px; height: auto; padding: 0; margin: 0 auto; -webkit-border-radius: 0; border-radius: 0; }
    .site-description { font-size: 16px; font-style: italic; color: #fff; color: rgba(255,255,255,0.5); float: left; margin-left: 20px; line-height: 60px; padding: 10px 0; }
    .site-image { display: block; margin: 0 auto; max-height: 400px; }

    desde já,
    obrigado pela sua disponibilidade.

    Grande abraço

    Junio, você pode alterar a cor de fundo do HEADER na seguinte linha:
    (1º linha do CSS)

    #header { background: #33363b; position: relative; padding-bottom: 60px; }

    Se você alterar esse HEX você terá uma nova cor, caso precise pode ir neste site (https://kuler.adobe.com/create/color-wheel/) para ver HEX de outras cores, também pode ser visto no PHOTOSHOP (caso use ele).

    Se você deseja uma imagem de fundo no HEADER também é possível.

    Abraço, espero ter ajudado!

    Olá Razzk,
    antes de mais, muito obrigado pela disponibilidade e por ter fornecido o link acima, que foi muito útil.

    Como eu faço para colocar a imagem de fundo no HEADER?

    Mais uma vez, obrigado.

    Capaz Junio!

    Mas o código ficar o seguinte:

    #header { background: url(link da imagem); no-repeat; position: relative; padding-bottom: 60px; }

    OBS:. note que após o link da imagem você tem que adicionar “NO-REPEAT” caso você vá utilizar uma imagem do tamanho certo, caso a imagem for menor e você queira que ela se repita no header você utiliza repeat-y ou repeat-x conforme o eixo de X,Y.

    Espero ter ajudado!

    Razzk,

    funcionou tal e qual você indicou, nota 10 !!!
    Tenho muitas outras dúvidas, mas não vou abusar 🙂

    Muito obrigado pela ajuda.

    Irmãos, vê se pode ajudar. Coloquei a imagem mas o menu não sei onde ajustar. http://www.amfree.com.br/bandeiras.

    Você quer aumentar o tamanho da imagem que está no header Marcelo ?

    Se for isso, você precisa ir no CSS Editor e fazer o seguinte:

    Editar a linha 511 do arquivo “style.css”

    E trocar o cógigo:

    #header .pad {
        padding-bottom: 30px;
        padding-top: 30px;
    }

    Por esse aqui:

    #header .pad {
        padding-bottom: 30px;
        padding-top: 30px;
        height: 140px;
    }

    Espero ter ajudado, qualquer coisa só falar! Abraço

    MarceloAraujo,

    Como é que você colocou a imagem no cabeçalho?

    Obrigado

    Marcelo,

    Acabei achando como alterar. É no Editar na Folha de Estilos style.css.

    Usei o código do Jean, mas a imagem duplica para direita e ela fica correndo conforme você ajusta o browser.

    #header { background: url(link da imagem); no-repeat; position: relative; padding-bottom: 60px; }

    Poderia me passar a configuração do seu código para eu tentar fixar a minha?

    Obrigado

    Olá Mario!

    Você poderia passar o link do seu website para eu olhar?

    Quem sabe eu possa te ajudar.

    Abraço

    Olá Jean, boa noite.

    Eu consegui usando o próprio código do site do Marcelo.

    Ficou:

    /* ————————————————————————- *
    * Section: Header
    /*
    /* ————————————————————————- */
    /*#header { background: #33363b; position: relative; padding-bottom: 60px; }*/
    #header { background: url(http://www);no-repeat; position: relative; padding-bottom: 60px; }
    #header .pad { padding-top: 84px; padding-bottom: 84px;/ }
    /*#header .pad { padding-top: 1px; padding-bottom: 1px;/ }*/
    #header .container-inner { position: relative; }

    .site-title { font-size: 42px; font-weight: 600; letter-spacing: -0.5px; float: left; line-height: 60px; padding: 1px 0; }
    .site-title a { display: block; color: #fff; max-width: 100%; }
    .site-title a img { display: block; max-width: 100%; max-height: 60px; height: auto; padding: 0; margin: 0 auto; -webkit-border-radius: 0; border-radius: 0; }
    .site-description { font-size: 16px; font-style: italic; color: #fff; color: rgba(255,255,255,0.5); float: left; margin-left: 20px; line-height: 60px; padding: 10px 0; }
    .site-image { display: block; margin: 0 auto; max-height: 400px; }

    Obrigado pela gentileza.

    Olá Mário e Jean, fiz tudo o que vocês indicaram e não houve quaisquer alterações na imagem de fundo do cabeçalho, inclusive copiei o código do Mário e adicionei a imagem. O meu blog é http://www.jornaldoar.com
    Se puderem me ajudar agradeço.

    Você gostaria de acrescentar uma imagem de fundo para seu tema Junio? Se for retire todo código que tu utilizou daqui e use apenas esse:

    #header { background: url(link da imagem); no-repeat; position: relative; padding-bottom: 60px; }

    Obs.: Você tem que substituir esse código pelo que está no CSS. (procure pela linha que tenha #header

    Qualquer coisa só falar

    Fui a folha de estilos (style.css) retirei todo o código que o Mário publicou logo acima e adicionei o que você indicou, consecutivamente adicionando também o link da imagem. Infelizmente nada aconteceu.
    Voltei colocar com estava anteriormente.
    Atualmente esta assim:

    /*#header { background: #33363b; position: relative; padding-bottom: 60px; }*/
    #header { background: url(http://jornaldoar.com/wp-content/uploads/2015/01/Bristol-23-12-2014-10.jpg);no-repeat; position: relative; padding-bottom: 60px; }
    #header .pad { padding-top: 84px; padding-bottom: 84px; height 140px/ }
    /*#header .pad { padding-top: 1px; padding-bottom: 1px;/ }*/
    #header .container-inner { position: relative; }

    O que eu estou fazendo de errado?

    Muito obrigado Jean!

A visualizar 15 respostas - de 1 a 15 (de um total de 19)
  • O tópico ‘Alterar imagem do cabeçalho tema Hueman’ está fechado a novas respostas.