« anterior próximo »
Páginas: [1]   Ir Abajo

Autor Tema: adicionar imagen en Header  (Leído 3118 veces)

0 Usuarios y 1 Visitante están viendo este tema.

Desconectado Pattyxoxo

  • Sv Vampire Team ®
  • The Communiter-
  • ***
  • Mensajes: 4398
  • Judge XOXO Dredd
adicionar imagen en Header
« : agosto 29, 2011, 10:12:22 am »
si tengo este header
Código: [Seleccionar]
<!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 profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
<title><?php wp_title(''); ?><?php if(wp_title('', false)) { echo ' :'; } ?> <?php bloginfo('name'); ?></title>
<meta name="author" content="Amit - www.paggu.com - Theme Name: Minimalist Love" />
<meta name="generator" content="WordPress <?php bloginfo('version'); ?>" />
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
<link rel="alternate" type="application/rss+xml" title="<?php bloginfo('name'); ?> RSS Feed" href="<?php bloginfo('rss2_url'); ?>" />
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
<?php wp_head(); ?>
</head>
<body>
<div id="container">
<div id="holder" class="clearfix">
<div id="logo">
<div id="nav">
<div id="navcontainer">
<ul id="navlist">
<li <?php if ($post->post_type != 'page') echo " class=\"current_page_item\""; ?>><a href="<?php bloginfo('url'); ?>">Inicio</a></li>
<?php wp_list_pages('title_li=&depth=1'); ?>
</ul>
</div>

<div id="searchBar">
<form method="get" id="searchform" action="<?php bloginfo('url'); ?>/">
<div><input type="text" value="<?php the_search_query(); ?>" name="s" id="s" />
<input type="submit" id="searchsubmit" value="Buscar" />
</div>
</form>
</div>
<div class="aclear"></div>
</div>
<h1><a href="<?php echo get_settings('home'); ?>/"><?php bloginfo('name'); ?> &gt; </a></h1>
<h2><?php if ( is_home() || is_page() ) { ?><?php bloginfo('description'); ?><?php } else { ?> <?php the_category(' &bull; '); ?> &gt; <?php the_title(); ?><?php } ?></h2>
</div>
<div class="aclear"></div>

ahorita unicamente despliega el nombre del blog y necesito remover eso y que despliege en su lugar dos imagenes centradas que tendria que cambiarle? las imagenes mide aprox 356X104 pix

es en wordpress btw.

graciassss

este es el style.css

Código: [Seleccionar]
body{background:#ccc;color:#222;margin:0px;padding:0;font:normal 12px verdana, "Trebuchet MS", verdana;}
p {margin:0;padding:0 0 14px 0;}
a {color:#2361A1;text-decoration:none;}
a:hover {color:#666;text-decoration:underline;}
.aligncenter {display: block;margin-left: auto;margin-right: auto;}
.alignleft {float: left;}
.alignright {float: right;}

#container{margin:0px auto;text-align:center;width:980px;}
#holder {width:100%;padding:0px; text-align:left;margin:0px;background:#fff;}

/* Header */
#logo{padding:0px;height:98px;background:#000;margin:0px;border-bottom:4px solid #222;}
#logo h1{clear:both;font-weight:bold;font-size:20px;margin:0px;padding:22px 0 0 12px;float:left;}
#logo h1 a{color:#fff;text-decoration:none;}
#logo h2{font-weight:bold;font-size:12px;margin:0px;padding:29px 0 0 6px;float:left;color:#ddd;}
#logo h2 a{color:#ddd;}

#nav{background:#f4f4f4;height:30px;}
#navcontainer{float:left;}
#navcontainer ul{padding:1px 0 0 0;margin:0px 0px 0px 8px;}
#navcontainer ul li {display: inline;}
#navcontainer ul li#first a, #navcontainer ul li#first a:hover {cursor: default;text-decoration: none;}
#navcontainer ul li a {margin:5px 0 0 0;padding:0px 22px 0px 5px;text-decoration: none;float: left;}
#navcontainer ul li a:hover {text-decoration: underline;}
#navcontainer ul li.current_page_item a, #navcontainer ul li.current_page_ancestor a {color: #841700;padding:0px 22px 0px 5px;font-weight:bold;}
#navcontainer ul li.current_page_item a:hover, #navcontainer ul li.current_page_ancestor a:hover {text-decoration: none;}
#navcontainer ul li a:hover {text-decoration: underline;}
#searchBar {float:right;text-align: right;margin:0px;}

#searchform {padding: 5px;}
#s {border: 1px solid #bbb;}
#searchsubmit {border: 1px solid #bbb;}


/* Content Section */
#content{float:left;width:67%;padding:10px 10px 15px 18px;line-height:21px;margin:0px;}
#content ul, ol{margin:5px 0 10px 15px;padding:0px 0 15px 25px;}
#content h1{font:normal 19px "Trebuchet MS", verdana, arial;line-height:130%;margin:10px 0 5px 0;padding:0 0 0px 0;color:#d95c05;border-bottom:1px solid #ddd;}
#content h5{font:normal 11px verdana, "Trebuchet MS";margin:0 0 10px 0;padding:0;color:#444;}
#content h2.pagetitle{font:bold 120% "Trebuchet MS", verdana;text-transform: uppercase;border-top:3px double #ccc;border-bottom:1px solid #ccc;padding:5px 0px;margin-bottom:15px;}
#content .comme{font:normal 100% "Trebuchet MS", verdana;margin:5px 0 25px 0;padding:5px 5px 5px 8px;color:#000;background:#f3f3f3;text-align:left;border-top:1px solid #dcdcdc;}
#content .comme a{text-decoration:none;}
#content a:hover{text-decoration:underline;}
#content table {width: 100%;border: 1px solid #ccc;border-top: 0;border-collapse: collapse;}
#content table th, #content table td {border: 1px solid #ccc;border-bottom: 0;padding: .3em .5em;}
#content table th {text-align: left;border-bottom: 2px solid #ccc;}

/* Sidebar */
#news{float:right;width:27%;padding:10px 0 0 10px;margin:10px 5px 10px 0px;line-height:22px;background:#f9f9f9;}
.newsItem{padding:0px;margin:0px;}
.newsItem ul{margin:0px;padding:0;line-height:1.5em;}
.newsItem li{padding:0px;margin:0px;list-style:none;color:#555;}
.newsItem h3{font-size:13px;margin:0px 0 0 0;border:none;padding:2px 10px 4px 10px;color:#111;background:#eee;border-top:1px solid #aaa;border-right:1px solid #aaa;}
.newsItem h2{font-size:13px;margin:0px 0 0 0;display:block;border:none;border-bottom:2px solid #CDD8E1;background-color:#E4E8EB;padding:5px 10px 5px 10px;color:#1F4785;}
.newsItem ul ul{list-style-type:none;margin:10px 0px 15px 20px;}
.newsItem ul ul li{list-style-type:square;line-height:1.8em;padding:0px 15px 0px 0px;}
.newsItem ul ul ul{list-style-type:none;margin:0px 0px 0px 5px;}
.newsItem ul ul ul li{list-style-type:none;line-height:1.8em;padding:0px 0px 0px 20px;}
.newsItem ul ul ul li a{color:#666;}
.newsItem h1{color:#225799;margin:0 0 10px 0;padding:0;font-size:110%;font-weight:bold;}
.newsItem ul li table {padding-bottom: 5px;}
.newsItem ul li table caption {padding: 5px 0 0 0;}

/* Calendar */
#wp-calendar {width: 100%;}
#wp-calendar th, #wp-calendar td {text-align: center;}
#wp-calendar td#today {font-weight: bold;}


div.navigation {text-align: center;padding: 0 0 2em 0;margin:6px 0px;}
div.commentnavigation {padding: 0;}
#singlepost {padding: 10px 10px 49px 10px;margin: 0;}
ul li.comments {text-align: right;}
#commentwrapper {background:#fafafa;padding:0px 15px 19px 15px;margin-top:10px;border:1px solid #555;border-left:none;border-right:none;}
#commentwrapper h2 {margin: 0;padding: 10px 0 3px 0;}

/* Comment */
h2.commentheading {font-size:1.2em;color: #444;}
ol.commentlist {padding: 0;margin: 0;list-style: none;color: #222;}
ol.commentlist a {text-decoration: none;}
img.avatar {border: 3px solid #ddd;margin: 0 0.5em;}
ol.commentlist li.commentind {padding: 0 0 2em 0;margin: 0;}
ol.commentlist li.depth-1 {padding:15px 0 0 0;margin:0px;}
ul.children {list-style: none;}
ol.commentlist ul.children li.commentind {padding:1em 0 0 0;}
ol.commentlist li.commentind cite {font-style: normal;font-weight:bold;}
p.commentsedit {font-size: 0.9em;margin:0 0 0 0.5em;padding:0px 0px 8px 0px;border-bottom:1px solid #ddd;}
.commentindheader {border-bottom: 1px dotted #fefef6;}
.commentindheader img.avatar {float: left;}
ol.commentlist li.legacyAlt .commentindheader {text-align: right;}
ol.commentlist li.legacyAlt .commentindheader img.avatar {float: right;}
ol.commentlist li.legacyAlt p.commentsedit {text-align: right;margin: 0 0.5em 0 0;}

/* Comment form */
form#commentform input, form#commentform textarea {border: 1px solid #bbb;}
input#author, input#email, input#url {width: 60%;}
textarea#comment {width: 90%;}
input#submit { border:1px solid #666;background: #f9f9f9;}

/* Navigation links */
.navigation-links {overflow: hidden;height: 100%;}
.next, .previous {max-width: 50%;font-size: 1em;font-weight:bold;background:#eee;padding:2px 4px;border-left:1px solid #aaa;}
.next {border:0px;border-right:1px solid #aaa;}
.previous {float: left;}
.next {float: right;text-align: right;}

blockquote{margin:7px 0 20px 2%;padding:6px 6px 0px 10px;width:90%;color:#000;background:#FFFFA0;border:1px solid #E5E597;} 
caption{padding:5px 0 5px 0;font-weight:bold;text-decoration:underline;}
table{margin:5px 0 0 5px;}

.clearfix:after {content:".";display:block;height:0;clear:both;visibility:hidden;}
.clearfix {display:inline-block;}
* html .clearfix {height:1%;}
.clearfix {display:block;}

/* Footer */
#footer{clear:both;background:#f9f9f9;padding:10px;text-align:left;border-top:1px solid #999;}
#footext{font:normal 13px "Trebuchet MS", verdana;color:#444;margin:0px;padding:0px;text-align:center;}
#footer a{padding:0 5px 0 0;text-decoration:underline;}
#footer a:hover {color:#C3BDFD;text-decoration:none;}


despasito kadejo que apenas toy aprendiendo
« Última Modificación: agosto 29, 2011, 10:17:55 am por Pattyxoxo »
En línea
"El Socialismo solo funciona en dos lugares: en el Cielo, donde no lo necesitan, y en el Infierno donde ya lo tienen"

Desconectado hkadejo

  • Global Moderator
  • The Communiter-
  • *
  • Mensajes: 3345
Re: adicionar imagen en Header
« Respuesta #1 : agosto 29, 2011, 10:15:04 am »
Dentro del div id: logo tendrias que meter tus imagenes...ahi donde estan los h1 y h2 (del nombre del blog y de la descripcion) pero, tenes que poner atencion en el css que se utiliza.



En línea

Desconectado salvadoresc

  • Global Moderator
  • The Communiter-
  • *
  • Mensajes: 11652
  • Adobe Certified Expert en ACISEAPRENDE
    • Foro de Diseno - Pixeles al Desnudo
Re: adicionar imagen en Header
« Respuesta #2 : agosto 29, 2011, 11:33:42 am »
¨me gustaria ver la URL pero creo que con agregar esto a tu css te deberias funcionar

Código: [Seleccionar]
#logo {
background-image: url(rutaimagenACA);
background-repeat: no-repeat;
background-position: center top;
height: 104px;
width: 356px;
margin-right: auto;
margin-left: auto;
}
#logo h1, #logo h2{
display:none;
}
edit: estoy viendo que queres dos imagenes yo solo puse una, dejame ver el link mejor porfa.

es esto mismo?
http://demo.paggu.com/


probate esto mejor porfa.
Código: [Seleccionar]
#logo h1 {
background-image: url(rutaimagenACA);
background-repeat: no-repeat;
background-position: center top;
height: 104px;
width: 356px;
margin-right: auto;
margin-left: auto;
font-size: 0px;
line-height: 1px;
text-indent: -9999px;
}
#logo h2 {
background-image: url(rutaimagenACA);
background-repeat: no-repeat;
background-position: center top;
height: 104px;
width: 356px;
margin-right: auto;
margin-left: auto;
font-size: 0px;
line-height: 1px;
text-indent: -9999px;
}
solo un detalle con esto ocultaremos los textos del h1 y del h2 ya que decis que no los queres y en su lugar dejara las imagenes, al centro.
el unico inconveniente es que estas imagenes no podras ponerles link asi como te lo he puesto u.u

esta es una alternativa a puro CSS XD otra seria tener que modificar el header...
« Última Modificación: agosto 29, 2011, 11:38:43 am por salvadoresc »
En línea
Awaken my child, and embrace the glory that is your birthright. Know that I am the Overmind; the eternal will of the Swarm.

haycoctelesamor.com

Desconectado hkadejo

  • Global Moderator
  • The Communiter-
  • *
  • Mensajes: 3345
Re: adicionar imagen en Header
« Respuesta #3 : agosto 29, 2011, 11:37:05 am »
La solucion de salvadoresc es menos intrusiva... proba con eso
En línea

Desconectado Jaru

  • The Communiter-
  • *
  • Mensajes: 13252
  • some text
Re: adicionar imagen en Header
« Respuesta #4 : agosto 29, 2011, 11:54:50 am »
con jquery podria ponerle link a la imagen
En línea
N/A

Desconectado Pattyxoxo

  • Sv Vampire Team ®
  • The Communiter-
  • ***
  • Mensajes: 4398
  • Judge XOXO Dredd
Re: adicionar imagen en Header
« Respuesta #5 : agosto 29, 2011, 12:39:22 pm »
Cita de: salvadoresc en agosto 29, 2011, 11:33:42 am
es esto mismo?
http://demo.paggu.com/

si asi se mira entonces en lugar del texto quiero meter las dos imagenes una al lado de la otra centradas
En línea
"El Socialismo solo funciona en dos lugares: en el Cielo, donde no lo necesitan, y en el Infierno donde ya lo tienen"

Desconectado salvadoresc

  • Global Moderator
  • The Communiter-
  • *
  • Mensajes: 11652
  • Adobe Certified Expert en ACISEAPRENDE
    • Foro de Diseno - Pixeles al Desnudo
Re: adicionar imagen en Header
« Respuesta #6 : agosto 29, 2011, 02:14:27 pm »
bueno pone las dos reglas que te puse, las de logo h1 y logo h2 al final de tu hoja de estilos y te deberia de funcionar como esperas, si en caso no sucede, avisas...
En línea
Awaken my child, and embrace the glory that is your birthright. Know that I am the Overmind; the eternal will of the Swarm.

haycoctelesamor.com

Desconectado Pattyxoxo

  • Sv Vampire Team ®
  • The Communiter-
  • ***
  • Mensajes: 4398
  • Judge XOXO Dredd
Re: adicionar imagen en Header
« Respuesta #7 : agosto 29, 2011, 03:14:27 pm »
ya puse eso bajo /* Header */
y nada

o donde debo ponerlo?
En línea
"El Socialismo solo funciona en dos lugares: en el Cielo, donde no lo necesitan, y en el Infierno donde ya lo tienen"

Desconectado salvadoresc

  • Global Moderator
  • The Communiter-
  • *
  • Mensajes: 11652
  • Adobe Certified Expert en ACISEAPRENDE
    • Foro de Diseno - Pixeles al Desnudo
Re: adicionar imagen en Header
« Respuesta #8 : agosto 29, 2011, 03:17:58 pm »
ponelo debajo de esto:
Código: [Seleccionar]
/* Header */
#logo{padding:0px;height:98px;background:#000;margin:0px;border-bottom:4px solid #222;}
#logo h1{clear:both;font-weight:bold;font-size:20px;margin:0px;padding:22px 0 0 12px;float:left;}
#logo h1 a{color:#fff;text-decoration:none;}
#logo h2{font-weight:bold;font-size:12px;margin:0px;padding:29px 0 0 6px;float:left;color:#ddd;}
#logo h2 a{color:#ddd;}

/*AQUI */
#logo h1 {
background-image: url(rutaimagenACA);
background-repeat: no-repeat;
background-position: center top;
height: 104px;
width: 356px;
margin-right: auto;
margin-left: auto;
font-size: 0px;
line-height: 1px;
text-indent: -9999px;
}
#logo h2 {
background-image: url(rutaimagenACA);
background-repeat: no-repeat;
background-position: center top;
height: 104px;
width: 356px;
margin-right: auto;
margin-left: auto;
font-size: 0px;
line-height: 1px;
text-indent: -9999px;
}



En línea
Awaken my child, and embrace the glory that is your birthright. Know that I am the Overmind; the eternal will of the Swarm.

haycoctelesamor.com

Desconectado Pattyxoxo

  • Sv Vampire Team ®
  • The Communiter-
  • ***
  • Mensajes: 4398
  • Judge XOXO Dredd
Re: adicionar imagen en Header
« Respuesta #9 : agosto 29, 2011, 03:36:45 pm »
y la direccion de la imagen dentro de los ( )?
En línea
"El Socialismo solo funciona en dos lugares: en el Cielo, donde no lo necesitan, y en el Infierno donde ya lo tienen"

Desconectado salvadoresc

  • Global Moderator
  • The Communiter-
  • *
  • Mensajes: 11652
  • Adobe Certified Expert en ACISEAPRENDE
    • Foro de Diseno - Pixeles al Desnudo
Re: adicionar imagen en Header
« Respuesta #10 : agosto 29, 2011, 03:42:03 pm »
pues esa la tenes en tu servidor me imagino asi que seria

http://SitioSecretodePattyxoxo.com/imagenes/Nombredelarchivo.extension

asumiendo que hiciste una carpeta imagenes y esta esta ahi... si la subiste por el administrador multimedia de wordpress ahi mismo te da la URL asi al estilo de imageshack.
En línea
Awaken my child, and embrace the glory that is your birthright. Know that I am the Overmind; the eternal will of the Swarm.

haycoctelesamor.com

Desconectado Pattyxoxo

  • Sv Vampire Team ®
  • The Communiter-
  • ***
  • Mensajes: 4398
  • Judge XOXO Dredd
Re: adicionar imagen en Header
« Respuesta #11 : agosto 29, 2011, 03:43:37 pm »
sip ya lo hize pero naranjas no se mira nadaaaa
En línea
"El Socialismo solo funciona en dos lugares: en el Cielo, donde no lo necesitan, y en el Infierno donde ya lo tienen"

Desconectado salvadoresc

  • Global Moderator
  • The Communiter-
  • *
  • Mensajes: 11652
  • Adobe Certified Expert en ACISEAPRENDE
    • Foro de Diseno - Pixeles al Desnudo
Re: adicionar imagen en Header
« Respuesta #12 : agosto 29, 2011, 03:52:23 pm »
limpiaste cache?
En línea
Awaken my child, and embrace the glory that is your birthright. Know that I am the Overmind; the eternal will of the Swarm.

haycoctelesamor.com
Páginas: [1]   Ir Arriba
« anterior próximo »