Respuesta a: Cordial Saludo: Quiero colocar una imagen en mi Header

Inicio Foros WordPress Themes y Diseño Cordial Saludo: Quiero colocar una imagen en mi Header Respuesta a: Cordial Saludo: Quiero colocar una imagen en mi Header

#34100

preguntarix
Participante

Esta es la parte del style que corresponde a hender, pero la imagen que te proponía modificar no figura aquí, seguramente es parte del bg del body, ya lo veremos.

div#header{
font-size: 12px;
}
div#header div.blog_title{
float: left;
margin-top: 50px;
margin-left: 10px;
}
div#header div.blog_title h1 a{
font-family: Helvetica, “Trebuchet MS”, Verdana, sans-serif;
font-weight: bold;
letter-spacing: -1px;
font-size: 36px;
color: #fff;
line-height: 45px;
display: block;
}
div#header div.blog_title p.description{
color: #999;
margin-top: 10px;
margin-left: 5px;
}
div#header div#search{
border: none;
float: right;
position: relative;
}
div#header div#search form#searchform{
position: absolute;
top: 65px;
right: 10px;
width: 200px;
height: 25px;
border: none;
background-color: #fff;
}
div#header div#search form#searchform .searchinput{
position: absolute;
top: 5px;
left: 8px;
color: #666;
font-size: 13px;
width: 165px;
border: 0;
}
div#header div#search form#searchform .button{
position: absolute;
top: 0px;
left: 175px;
background: url(images/mag.gif) no-repeat;
height: 25px;
width: 25px;
border: 0;
cursor: pointer;
}

div#main_navi{
background: url(images/navi.gif) no-repeat;
float: left;
margin-top: 30px;
height: 37px;
width: 960px;
}
div#main_navi ul.left{
float: left;
list-style-type: none;
padding: 2px 0 0 10px;
width: 750px;
}
div#main_navi ul li{
position: relative;
float: left;
text-transform: uppercase;
}
div#main_navi ul.left li a{
float: left;
overflow: hidden;
color: #ccc;
font-size: 13px;
line-height: 18px;
margin: 0 15px 0 15px;
padding: 8px 4px;
}
div#main_navi ul.left li a:hover{
color: #ff5a00;
}
/*———————header dropdown menu 20090803—————————————*/
div#main_navi ul.left li ul{
display: none;
position: absolute;
left: 0;
width: 125px;
margin-top: 33px;
padding: 0 3px;
height: auto;
background-color: #111;
border: 1px solid #2d2c2c;
border-top: 0;
-moz-border-radius-bottomleft: 5px;
-moz-border-radius-bottomright: 5px;
-webkit-border-bottom-left-radius: 5px;
-webkit-border-bottom-right-radius: 5px;
}
div#main_navi ul.left li ul li{
width: 125px;
overflow: hidden;
}
div#main_navi ul.left li ul li a{
font-size: 12px;
padding: 3px 6px;
margin: 0 2px;
}
/*———————header dropdown menu 20090803—————————————*/
div#main_navi ul.right{
float: right;
list-style-type: none;
padding: 9px 10px 0 0;
}
div#main_navi ul.right li a{
float: left;
overflow: hidden;
color: #fff;
font-size: 12px;
line-height: 20px;
margin: 0 0 0 10px;
text-transform: uppercase;
}
div#main_navi ul.right li.twitter a{
background: url(images/twitter.gif) no-repeat 0 3px;
padding-left: 21px;
}
div#main_navi ul.right li.twitter a:hover{
color: #0af;
}
div#main_navi ul.right li.feed a{
background: url(images/feed.gif) no-repeat 0 5px;
padding-left: 15px;
}
div#main_navi ul.right li.feed a:hover{
color: #ff5a00;
}
/* END div#header */

[b]En efecto la famosa imagen esta controlada con este css que está justo antes del del correspondiente a header:[/b]

}

div#page_wrap{
width: 960px;
margin: 0 auto;
background: url(images/bg.gif) no-repeat;
}

El ancho es de 960px la altura se acomodará a cualquiera que uses, puedes modificar el ancho ([i]width[/i])pero si no vas a modificar el resto de los anchos de la plantilla yo la dejaría tal cual.

Puedes reemplazarla por imágenes que no sean gif, modificando la url

[b]O puedes hacer como te dicen en [url=http://ayudawp.com/foro/topic/cordial-saludo-quiero-colocar-una-imagen-en-mi-header-4]este post[/url]: [/b]

Y con un código como el siguiente, incluir una imagen directamente en el header.

#header{
background:url(images/fondo_header.jpg) no-repeat;
height:200px;
width:900px;
}

Tendrás que alojar la imagen http://luispostfx.net/wp-content/themes/pyrmont-v2/images/ con el nombre fondo_header.jpg o el que corresponda.

TE dejo un ejemplo de como podría quedarla primer parte del style.css correspondiente al header.

div#header{
font-size: 12px;
}
div#header div.blog_title{
float: left;
margin-top: 50px;
margin-left: 10px;
}
#header{
background:url(images/fondo_header.jpg) no-repeat;
width:960px;
}

Pin It on Pinterest

Ir al contenido