Alterar imagem do cabeçalho tema Hueman

Resolvido

(@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)

1 2 →

Jean Paiva
(@razzk)

há 10 anos, 1 mês

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, 1 mês
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, 1 mês

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

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

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

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á 9 anos, 4 meses

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á 9 anos, 4 meses
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á 9 anos, 3 meses

MarceloAraujo,

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

Obrigado

MarioEng
(@marioeng)

há 9 anos, 3 meses

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á 9 anos, 3 meses

Olá Mario!

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

Quem sabe eu possa te ajudar.

Abraço

MarioEng
(@marioeng)

há 9 anos, 3 meses

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á 9 anos, 3 meses

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á 9 anos, 3 meses

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á 9 anos, 3 meses

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!