Alterar imagem do cabeçalho tema Hueman

  • Resolvido junio oliveira

    (@junio-oliveira)


    há 10 anos, 10 meses

    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)
1 2
  • Jean Paiva

    (@razzk)

    há 10 anos, 10 meses

    Esse code que você mandou é o HTML da página. Para você editar o background do header, você tem de ir no CSS!

    Thread Starter junio oliveira

    (@junio-oliveira)

    há 10 anos, 10 meses

    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

    Jean Paiva

    (@razzk)

    há 10 anos, 10 meses

    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!

    Thread Starter junio oliveira

    (@junio-oliveira)

    há 10 anos, 10 meses

    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.

    Jean Paiva

    (@razzk)

    há 10 anos, 10 meses

    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!

    Thread Starter junio oliveira

    (@junio-oliveira)

    há 10 anos, 9 meses

    Razzk,

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

    Muito obrigado pela ajuda.

    MarceloAraujo

    (@marceloaraujo)

    há 10 anos, 1 mês

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

    Jean Paiva

    (@razzk)

    há 10 anos, 1 mês

    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

    MarioEng

    (@marioeng)

    há 10 anos

    MarceloAraujo,

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

    Obrigado

    MarioEng

    (@marioeng)

    há 10 anos

    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

    Jean Paiva

    (@razzk)

    há 10 anos

    Olá Mario!

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

    Quem sabe eu possa te ajudar.

    Abraço

    MarioEng

    (@marioeng)

    há 10 anos

    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.

    Thread Starter junio oliveira

    (@junio-oliveira)

    há 10 anos

    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.

    Jean Paiva

    (@razzk)

    há 10 anos

    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

    Thread Starter junio oliveira

    (@junio-oliveira)

    há 10 anos

    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)
1 2
  • O tópico ‘Alterar imagem do cabeçalho tema Hueman’ está fechado a novas respostas.

Etiquetas