Foros del Web » Creando para Internet » CSS »

Introducir etiqueta imagen en CSS para Wordpress

Estas en el tema de Introducir etiqueta imagen en CSS para Wordpress en el foro de CSS en Foros del Web. Hola a todos, No tengo ni idea de cómo introducir una imagen en la cabecera de mi blog de Wordpress. La plantilla que he adaptado, ...
  #1 (permalink)  
Antiguo 09/01/2010, 16:50
cbs
 
Fecha de Ingreso: marzo-2009
Mensajes: 25
Antigüedad: 8 años, 9 meses
Puntos: 0
Introducir etiqueta imagen en CSS para Wordpress

Hola a todos,

No tengo ni idea de cómo introducir una imagen en la cabecera de mi blog de Wordpress.

La plantilla que he adaptado, cuyo nombre es Minimalist por si la conocéis, no tiene imagen en la cabecera y queda muy despersonalizado.

¿Alguien puede ayudarme a introducir la imagen en la parte superior del blog? Me han dicho que debo introducir una imagen en el header.php de la plantilla, pero no sé dónde exactamente. Además, debo tocar las hojas de estilo para que nada se descuadre.

Os adjunto el código del header.php:

Código:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>

<title><?php bloginfo('name'); ?> - <?php bloginfo('description'); ?></title>

<meta http-equiv="content-type" content="text/html; charset=<?php bloginfo('charset'); ?>" />
<meta name="description" content="<?php bloginfo('name'); ?> - <?php bloginfo('description'); ?>" />
<meta name="keywords" content="<?php bloginfo('name'); ?> - <?php bloginfo('description'); ?>" />
<?php wp_head(); ?>


<link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="<?php bloginfo('rss2_url'); ?>" />
<link rel="alternate" type="text/xml" title="RSS .92" href="<?php bloginfo('rss_url'); ?>" />
<link rel="alternate" type="application/atom+xml" title="Atom 0.3" href="<?php bloginfo('atom_url'); ?>" />
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />

<link rel="stylesheet" type="text/css" href="<?php bloginfo('stylesheet_url'); ?>" />
<link rel="stylesheet" type="text/css" href="<?php bloginfo('stylesheet_directory'); ?>/styles/white.css" title="white" />
<link rel="alternate stylesheet" type="text/css" href="<?php bloginfo('stylesheet_directory'); ?>/styles/black.css" title="black" />
<link rel="alternate stylesheet" type="text/css" href="<?php bloginfo('stylesheet_directory'); ?>/styles/blue.css" title="blue" />
<link rel="alternate stylesheet" type="text/css" href="<?php bloginfo('stylesheet_directory'); ?>/styles/green.css" title="green" />
<link rel="alternate stylesheet" type="text/css" href="<?php bloginfo('stylesheet_directory'); ?>/styles/grey.css" title="grey" />

<script type="text/javascript" src="<?php bloginfo('stylesheet_directory'); ?>/scripts/mootools.js"></script>
<script type="text/javascript" src="<?php bloginfo('stylesheet_directory'); ?>/scripts/script.js"></script>
<script type="text/javascript" src="<?php bloginfo('stylesheet_directory'); ?>/scripts/styleswitcher.js"></script>

</head>

<body>
<div id="page" >
<div id="header" >
<h1><a href="<?php bloginfo('url'); ?>" title="<?php bloginfo('name'); ?>"><?php bloginfo('name'); ?></a></h1>
<h2><?php bloginfo('description'); ?></h2>
</div>
No sé si necesitáis algo más, algún otro PHP, o información de algún tipo de Wordpress...

Bueno, gracias por vuestra ayuda y felicidades por vuestro aniversario de tres millones de mensajes.

Un saludo.
  #2 (permalink)  
Antiguo 09/01/2010, 18:33
Avatar de maycolalvarez
Colaborador
 
Fecha de Ingreso: julio-2008
Ubicación: Caracas
Mensajes: 12.120
Antigüedad: 9 años, 4 meses
Puntos: 1530
Respuesta: Introducir etiqueta imagen en CSS para Wordpress

puedes hacerlo de varias formas:

1 en el css:

busca o declara en el css principal #header y agrégale una imagen de fondo:

#header{
background-image: url(url-de-la-imagen-o-hosting);
}

2 en el mismo archivo que mencionas arriba, edita la linea:

<body>
<div id="page" >
<div id="header" style="background-image: url(url-de-la-imagen-o-hosting);">
  #3 (permalink)  
Antiguo 09/01/2010, 19:01
cbs
 
Fecha de Ingreso: marzo-2009
Mensajes: 25
Antigüedad: 8 años, 9 meses
Puntos: 0
Respuesta: Introducir etiqueta imagen en CSS para Wordpress

Gracias maycolalvarez, esto empieza a funcionar ;)

Veo la imagen en la cabecera, pero cortada :(

Es decir, aparece un poco de la imagen, la parte de arriba, pero se corta porque las letras del blog (título, subtítulo, etc) la tapan.

¿Dónde debo definir el tamaño de la imagen o dónde debe empezar el blog, para desplazarlo hacia abajo y que la imagen se vea completa?

Te adjunto la hoja de estilos, creo que es aquí:

Código:
html, body{ padding:20px 0px 20px 0px; margin:0; text-align:center; font-family:verdana; font-size: 13px;} 
 
#page{ width:900px; text-align:left; margin-left:auto; margin-right:auto;} 

#header{ position:relative; width:900px; margin: 0px; padding: 0px; height:50px; overflow-x:hidden;} 
#header h1{ position:relative; float:left; margin:0px 0px 0px 250px; width: 650px; padding:0px; font-family:arial; font-weight:bold; font-size:20px; text-transform:uppercase;} 
#header h1 a{ text-decoration:none;}
#header h1 a:hover{ text-decoration:none;}
#header h2{ position:relative; float:left; clear:left; margin:0px 0px 0px 250px; width: 650px; padding:0px; font-family:arial; font-weight:bold; font-size:8px; text-transform:uppercase;} 
 
#leftcol{ width:230px; float:left; position:relative; padding: 0px 20px 0px 0px; text-align:right; overflow-x:hidden;}
 
#menu {margin:0px 0px; text-align:right; font-weight:bold; font-family:arial; text-transform:uppercase; font-size:14px; }
#menu a {font-weight:bold; font-family:arial; text-transform:uppercase; font-size:14px; text-decoration:none;}
#menu a:hover {font-weight:bold; font-family:arial; text-transform:uppercase; font-size:14px; text-decoration:none;}

h2.menuheader {cursor: pointer;font-family:arial; font-weight:bold; font-size:14px; text-transform:uppercase;margin:0px; padding:0px;}


#menu ul {padding: 2px 0px 2px 0px; margin: 0px 0px 0px 0px;list-style: none; width:230px; clear:left; float:right;}
#menu ul li{margin: 0px 0px 0px 0px; display: block; font-weight:bold; font-family:arial; text-transform:uppercase; font-size:14px;}
#menu ul li a{ width: 225px; display: block; padding: 5px 0px 5px 5px; text-decoration:none; font-weight:bold; font-family:arial; text-transform:uppercase; font-size:14px; margin: 0px 0px 0px 0px; vertical-align: bottom;}
#menu ul li a:hover{ text-decoration:none; }
#menu ul li ul {padding: 2px 0px 2px 0px; margin: 0px 0px 0px 0px;list-style: none; clear:left; }
#menu ul li ul li{margin: 0px 0px 0px 0px; display: block; }
#menu ul li ul li a{ width: 205px; display: block; padding: 5px 20px 5px 5px; text-decoration:none; font-weight:bold; font-family:arial; text-transform:uppercase; font-size:14px; margin: 0px 0px 0px 0px; vertical-align: bottom;}
#menu ul li ul li a:hover{ text-decoration:none; }
#menu ul li ul li ul {padding: 2px 0px 2px 0px; margin: 0px 0px 0px 0px;list-style: none; clear:left; }
#menu ul li ul li ul li{margin: 0px 0px 0px 0px; display: block; }
#menu ul li ul li ul li a{ width: 185px; padding: 5px 40px 5px 5px; display: block; text-decoration:none; font-weight:bold; font-family:arial; text-transform:uppercase; font-size:14px; margin: 0px 0px 0px 0px; vertical-align: bottom;}
#menu ul li ul li ul li a:hover{ text-decoration:none; }
#menu ul li ul li ul li ul {padding: 2px 0px 2px 0px; margin: 0px 0px 0px 0px;list-style: none; clear:left; }
#menu ul li ul li ul li ul li{margin: 0px 0px 0px 0px; display: block; }
#menu ul li ul li ul li ul li a{ width: 165px; padding: 5px 60px 5px 5px; display: block; text-decoration:none; font-weight:bold; font-family:arial; text-transform:uppercase; font-size:14px; margin: 0px 0px 0px 0px; vertical-align: bottom;}
#menu ul li ul li ul li ul li a:hover{ text-decoration:none; }

ul#recentcomments {padding: 2px 0px 2px 0px; margin: 0px 0px 0px 0px;list-style: none; width:230px; clear:left; float:right;}
ul#recentcomments li{margin: 0px 0px 0px 0px; display: block; font-weight:bold; font-family:arial; text-transform:uppercase; font-size:14px;}
ul#recentcomments li a{ width: 225px; display: block; padding: 5px 0px 5px 5px; text-decoration:none; font-weight:bold; font-family:arial; text-transform:uppercase; font-size:14px; margin: 0px 0px 0px 0px; vertical-align: bottom;}
ul#recentcomments li a:hover{ text-decoration:none; }
#recentcomments a{ text-decoration:none; font-weight:bold; font-family:arial; text-transform:uppercase; font-size:14px;}
#recentcomments a:hover{ text-decoration:none; font-weight:bold; font-family:arial; text-transform:uppercase; font-size:14px; }

#maincol{ float: right; display:inline; position: relative; width:650px; font-family:verdana; font-size: 13px;overflow-x:hidden; text-align:left;}
#maincol h1 {margin:0px 0px 0px 0px; padding:0px; font-family:arial; font-weight:bold; font-size:22px; text-transform:uppercase; clear:both;} 
#maincol h2 { margin:0px 0px 0px 0px; padding:0px; font-family:arial; font-weight:bold; font-size:20px;text-transform:uppercase; clear:both;} 
#maincol h2 a{ text-decoration:none;} 

#maincol h3 { margin:0px 0px 0px 0px; padding:0px; font-family:arial; font-weight:bold; font-size:18px; text-transform:uppercase; clear:both;} 
#maincol h4 { margin:0px 0px 0px 0px; padding:0px; font-family:arial; font-weight:bold;font-size:16px; text-transform:uppercase; clear:both;} 
#maincol h5 { margin:0px 0px 0px 0px; padding:0px; font-family:arial; font-weight:bold; font-size:14px; text-transform:uppercase; clear:both;} 
#maincol h6 { margin:0px 0px 0px 0px; padding:0px; font-family:arial; font-weight:bold; font-size:12px; text-transform:uppercase; clear:both;} 
#maincol p{ font-size: 13px; line-height:1.7em; clear:left;}
#maincol p a:hover{ text-decoration:none;}
#maincol ul{ font-size: 13px; line-height:1.7em; clear:left;}
#maincol ol{ font-size: 13px; line-height:1.7em; clear:left;}

h2.contentheader{ cursor: pointer; position:relative; float:left; margin:0px 0px 0px 0px; padding:0px; font-family:arial; font-weight:bold; font-size:20px; text-transform:uppercase; clear:left;} 
h2.contentheader:hover{ }
h2.contentheader:active{ }

.content{clear:both;}

.permalink{ margin:0px 0px 0px 0px; padding:0px; font-family:arial; font-weight:bold; font-size:12px; text-transform:uppercase; clear:both;} 
.permalink a{ text-decoration:none;} 
.permalink a:hover{ text-decoration:none;} 

table#calendar_wrap {width:230px; overflow:hidden;clear:both; }

#wp-calendar{font-family: verdana; font-size: 13px; text-decoration:none; clear:both;width:210px; margin: 6px auto 6px auto; padding: 0px 10px 0px 10px;}
#wp-calendar a{font-family: verdana; font-size: 13px; text-decoration:none; }
#wp-calendar a:hover{font-family: verdana; font-size: 13px; text-decoration:none; }

blockquote { margin:20px; padding:8px 8px 8px 15px;}
blockquote p {background-color:inherit; font-size:0.9em; line-height:1.3em;}
label {background-color:inherit; font-size:0.9em; font-weight:bold;}
table#wp-calendar {margin:0 0 20px; width:140px;}
code {font-size:1.2em; display:block; padding:5px 5px 5px 8px; margin:5px 0 15px 0;}


#respond{font-weight:normal;}
#s,#submit { font-size:0.9em; margin:0 0 16px; padding:4px; width:130px;}
#author,#email,#url,#comment { font-family:Verdana,Tahoma,Arial,Sans-Serif; font-size:1em; margin:0; padding:4px;}
#commentsection {margin:25px 0 0;}
#commentsection p {margin:0 0 6px;}



img.centered {display:block; margin-left:auto; margin-right:auto;}
img.alignright {padding:4px; margin:0 0 2px 7px; display:inline;}
img.alignleft {padding:4px; margin:0 7px 2px 0; display:inline;}
.aligncenter { display: block; margin-left: auto; margin-right: auto;}
.alignright {float:right;}
.alignleft {float:left;}

.divider{height: 25px; width:604px; background: url(img/divider.jpg) top center no-repeat; margin: 10px auto 5px auto;}
.left { float:left; margin:10px 15px 10px 0;}
.right { float:right; margin:10px 0 5px 10px;}
.center { margin:5px auto 12px; text-align:center;}
.textright {text-align:right;}
.small {font-size:0.8em;}
.bold {font-weight:bold;}
.hide {display:none;}
.post {margin:0px;}

#postinfotext{font-family:arial; font-size: 14px; line-height:1.7em; font-weight:bold; text-transform:uppercase; padding: 0px 0px 0px 0px; margin: 0px 0px 10px 0px;}
#postinfotext a { text-decoration:none;}
#postinfotext a:hover{ }


.commentheader {font-family:arial; font-size: 16px; line-height:1.7em; font-weight:bold; text-transform:uppercase; }
.comment { margin:0 0 10px; padding:2px 5px 0px 8px;}

.commenticon {font-family:arial; font-size: 14px; line-height:1.7em; font-weight:bold; text-transform:uppercase;}
.commenticon a{ text-decoration:none;}
.commenticon a:hover{ }

.commenttext { font-size: 13px; line-height:1.7em; }
.commenttext p{ font-size: 13px; line-height:1.7em; }

.comment p {line-height:1.7em; margin:0px; padding-bottom:2px;}
.gravatarside {float:right; width:48px; height:48px; margin:0px 5px 5px 5px;}
.wp-caption { text-align: center; padding-top: 4px; margin: 10px; -moz-border-radius: 3px; -khtml-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; clear:both;}
.wp-caption img { margin: 0; padding: 0; border: 0 none;}
.wp-caption-dd { font-size: 11px; line-height: 17px; padding: 0 4px 5px; margin: 0;}


.navigation {font-family:arial; font-size: 14px; line-height:1.7em; font-weight:bold; text-transform:uppercase;}
.navigation a { text-decoration:none;}
.navigation a:hover{ }
.prevlink{margin: 0px 6px 0px 0px;}
.nextlink{margin: 0px 0px 0px 6px;}


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

/* Hides from IE-mac \*/
* html .clearfix{height: 1%;}
.clearfix{display: block;}
/* End hide from IE-mac */ 


 /*printer styles*/ 
 @media print{ 
/*hide the left column when printing*/
Gracias por tu ayuda, compañero.

Última edición por cbs; 09/01/2010 a las 19:21
  #4 (permalink)  
Antiguo 10/01/2010, 03:26
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 15 años, 5 meses
Puntos: 361
Respuesta: Introducir etiqueta imagen en CSS para Wordpress

Hola:

Creo que sería conveniente que te leyeras los manuales de XHTML y CSS de www.librosweb.es

Saludos.

  #5 (permalink)  
Antiguo 10/01/2010, 07:18
cbs
 
Fecha de Ingreso: marzo-2009
Mensajes: 25
Antigüedad: 8 años, 9 meses
Puntos: 0
Respuesta: Introducir etiqueta imagen en CSS para Wordpress

Hola, una única duda antes de meterme en el barro con los manuales:

Tengo ya la imagen bien colocada, en la cabecera. Pero no está centrada y se repite. Me gustaría que estuviera centrada y no se repitiera. El código es este:

<div id="page" >
<div id="header" style="background-image: url(urldelaimagen/imagen.jpg);">
<h1><a href="<?php bloginfo('url'); ?>" title="<?php bloginfo('name'); ?>"><?php bloginfo('name'); ?></a></h1>
<h2><?php bloginfo('description'); ?></h2>
</div>

Antes de publicar el blog me gustaría saber si lo voy a colocar en un dominio, carpeta, subdominio, etc, por eso no publico de momento la dirección del blog, que luego el enlace queda roto.

Si pudierais ayudarme con el centrado y no repetido de la imagen os lo agradecería.

Un saludo.
  #6 (permalink)  
Antiguo 10/01/2010, 11:52
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 15 años, 5 meses
Puntos: 361
Respuesta: Introducir etiqueta imagen en CSS para Wordpress

Hola:

Cambia esto:

Cita:
Iniciado por cbs Ver Mensaje
<div id="header" style="background-image: url(urldelaimagen/imagen.jpg);">
por esto:

Código:
<div id="header" style="background-image: url(urldelaimagen/imagen.jpg) no-repeat center;">
Saludos.


Etiquetas: introducir, wordpress, etiquetas
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 13:27.