Imagen en cabecera

T3is · #1 (**permalink**) 17/10/2007, 08:45

Hola a todos.

Me llamo Berni y tengo alojado en www.enjoythesilence.es un blog de Wordpress. La plantilla utilizada es la Garland y me gustaría añadir en la cabecera un logo, una imagen, en la esquina superior derecha del blog.

¿Alguien de aquí sabe cómo hacerlo?

Gracias por adelantado.

Un saludo,
Berni

yournightmare86 · #2 (**permalink**) 17/10/2007, 09:49

Pues vas a tener que editar la plantilla. Busca el archivo header.php de la plantilla en cuestión y realiza las modificaciones oportunas.

T3is · #3 (**permalink**) 17/10/2007, 11:08

Cita:

Iniciado por yournightmare86

Pues vas a tener que editar la plantilla. Busca el archivo header.php de la plantilla en cuestión y realiza las modificaciones oportunas.

Gracias por la información. En realidad me gustaría saber cuáles son esas modificaciones de las que me hablas. Yo supongo que habrá que añadir algo de código y yo no sé escribir HTML.

roc2107 · #4 (**permalink**) 17/10/2007, 18:58

No tienes que escribir nada solo busca donde diga .jpg reemplaza ese archivo por tu imagen y listo.

T3is · #5 (**permalink**) 18/10/2007, 01:36

Cita:

Iniciado por roc2107

No tienes que escribir nada solo busca donde diga .jpg reemplaza ese archivo por tu imagen y listo.

En header.php no hay nada que diga .jpg :(

yournightmare86 · #6 (**permalink**) 18/10/2007, 15:51

Pásanos el código para que revisemos.
Saludos.

T3is · #7 (**permalink**) 19/10/2007, 11:12

Este es el header.php

Cita:

<!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>
<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
<title><?php bloginfo('name'); ?> <?php wp_title(); ?></title>
<meta name="generator" content="WordPress <?php bloginfo('version'); ?>" /> 
<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'); ?>" />
<style type="text/css" media="screen">
@import "<?php bloginfo('stylesheet_url'); ?>";
</style>
<?php wp_head(); ?>
</head>

<body class="sidebars">

<div id="navigation"></div>

<div id="wrapper">
<div id="container" class="clear-block">

<div id="header">
<div id="logo-floater">
<h1><a href="<?php echo get_option('home'); ?>/"><?php bloginfo('name'); ?></a></h1>
</div>
<ul class="links primary-links">
<?php wp_list_pages( 'title_li=&depth=1' ); ?>
</ul>
</div> 

<?php get_sidebar(); ?>

<div id="center"><div id="squeeze"><div class="right-corner"><div class="left-corner">

<div class="node">

yournightmare86 · #8 (**permalink**) 19/10/2007, 11:42

Al parecer es una cabecera sin imagen. Si puedes poner un link al blog, podríamos ver como se puede insertar una imagen y de qué tamaño. Saludos.

T3is · #9 (**permalink**) 19/10/2007, 14:02

Cita:

Iniciado por yournightmare86

Al parecer es una cabecera sin imagen. Si puedes poner un link al blog, podríamos ver como se puede insertar una imagen y de qué tamaño. Saludos.

Es que no me deja poner links, el blog es www.enjoythesilence.es, al intentar poner enlaces me salta una pantalla de error y me dice ésto.

roc2107 · #10 (**permalink**) 19/10/2007, 18:19

Mirando tu blog esta es la dirección de donde se encuentra la imagen de fondo, la puedes reemplazar por la que tu quieras:

Código:

http://www.enjoythesilence.es/wp-content/themes/garland/images/body.png

T3is · #11 (**permalink**) 20/10/2007, 08:16

Cita:

Iniciado por roc2107

Mirando tu blog esta es la dirección de donde se encuentra la imagen de fondo, la puedes reemplazar por la que tu quieras:

He hecho ésto que tú dices y lo que consigo es que mi logo aparezca repetido a lo largo de toda la cabecera. :( Lo que yo quiero es que el body.png quede tal cual pero en la esquina superior derecha aparezca mi logo incrustado

_minimalnet_ · #12 (**permalink**) 20/10/2007, 13:59

Voy a bajarme el theme, lo instalo en mi blog de pruebas y a ver como me lo apaño para hacer lo q quieres, es la única manera con la que sabré hacerlo.

_minimalnet_ · #13 (**permalink**) 20/10/2007, 14:33

Ya está, añade esto al final de tu css, en "presentation/theme editor/stylesheet", pegas esto:

Código:

#logotipo {
	background: url("http://www.enjoythesilence.es/wp-content/themes/garland/images/logo.gif") no-repeat right top;
	height: 100%;
}

Sustituye en header.php, que está localizado en en "presentation/theme editor/header", esto:

Código:

<div id="header">
<div id="logo-floater">
<h1><a href="<?php echo get_option('home'); ?>/"><?php bloginfo('name'); ?></a></h1>
</div>
<ul class="links primary-links">
<?php wp_list_pages( 'title_li=&depth=1' ); ?>
</ul>                
</div> <!-- /header -->

por esto:

Código:

<div id="header">
<div id="logo-floater">
<h1><a href="<?php echo get_option('home'); ?>/"><?php bloginfo('name'); ?></a></h1>
</div>
<div id="logotipo">
<ul class="links primary-links">
<?php wp_list_pages( 'title_li=&depth=1' ); ?>
</ul>
</div>                
</div> <!-- /header -->

y por último sube a tu ftp, "wp-content/themes/garland/images/" un gif con fondo transparente de una altura máxima de unos 120px que se tiene que llamar logo.gif

_minimalnet_ · #14 (**permalink**) 20/10/2007, 14:36

Después si hay que darle algún margen o algo ya lo vemos. El invento queda así:

T3is · #15 (**permalink**) 21/10/2007, 06:26

Cita:

Iniciado por _minimalnet_

Después si hay que darle algún margen o algo ya lo vemos. El invento queda así:

Genial, ya hemos dado un paso grandísimo. :)

Ahora el pequeño problema que tengo son las dimensiones y la posición que coge el logotipo. ¿Es modificable? Al tener sólo 120 pixels de alto (que al final lo he conseguido forzar hasta 136) el logo que tengo no se aprecia en toda la calidad que a mí me gustaría y, al colocarlo arriba del todo pues no termina de ajustarse bien.

Muchísimas gracias por tomarte tantas molestias. :)

_minimalnet_ · #16 (**permalink**) 21/10/2007, 18:34

Tengo otra manera de hacerlo, pero necesitarás el photoshop para poder aplicarla. Ahora cuando lo tenga te explico :)

_minimalnet_ · #17 (**permalink**) 21/10/2007, 18:53

A ver, vuelve a poner el header como estaba en un principio, es decir así:

Código:

<div id="header">
<div id="logo-floater">
<h1><a href="<?php echo get_option('home'); ?>/"><?php bloginfo('name'); ?></a></h1>
</div>
<ul class="links primary-links">
<?php wp_list_pages( 'title_li=&depth=1' ); ?>
</ul>                
</div> <!-- /header -->

Borra lo que añadiste al css, esto:

Código:

#logotipo {
	background: url("http://www.enjoythesilence.es/wp-content/themes/garland/images/logo.gif") no-repeat right top;
	height: 100%;
}

Ahora cambia en el css, esto:

Código:

#wrapper {
	background: url("http://www.enjoythesilence.es/wp-content/themes/garland/images/body.png") #edf5fa repeat-x 50% 0;
	height: 600px;
}

por esto:

Código:

#wrapper {
	background: url("http://www.enjoythesilence.es/wp-content/themes/garland/images/body.png") #edf5fa no-repeat right top;
	height: 600px;
}

Ahora parte photoshop:

Abre con el photoshop la imagen body.png que tendrás en "garland\images", dentro de la carpeta del theme en tu pc.

Vete al menú "imagen/tamaño", desmarca "restringir proporciones" y redimensiona la imagen, dale estas medidas.

- anchura 2000 (tan larga para que se vea bien en todas las resoluciones, ya que ahora ya no se va a "repetir", puedes darle más ancho aún pero no creo que nadie use más de 2000)
- altura 280 (la misma que tiene la original).

Como ves la imagen se ha alargado horizontalmente, ahora crea una nueva capa situada encima y añade ahí tu logo (redimensiónalo si es necesario) y aliénalo a la parte derecha que es dónde saldrá en la web.

Por último guarda el resultado con el mismo nombre y formato (en otra carpeta mejor para mantener el original), la imagen final pesa poquisimo a pesar de lo grande que es, y finalmente la subes de nuevo al ftp "/wp-content/themes/garland/images/"

Y ya está, es una manera quizás un tanto basta (yo mucha idea de css y php no tengo pero inventiva sí jajaja, así que me las voy apañando), pero funciona perfectamente. De esta manare la ventaja es que puedes poner el logo todo lo grande que quieras.

T3is · #18 (**permalink**) 22/10/2007, 04:51

Cita:

Iniciado por _minimalnet_

Y ya está, es una manera quizás un tanto basta (yo mucha idea de css y php no tengo pero inventiva sí jajaja, así que me las voy apañando), pero funciona perfectamente. De esta manare la ventaja es que puedes poner el logo todo lo grande que quieras.

Pues sí, ya está. :) Muchísimas gracias, majo, además de poder colocar el logo donde yo quería y con las dimensiones que también yo quería he conseguido aprender cositas interesantes. :)

Espero poder ayudarte si algún día necesitas algo.

Un saludo,
Berni

_minimalnet_ · #19 (**permalink**) 22/10/2007, 14:03

De eso se trata, ir aprendiendo lo básico poco a poco, como ves yo teoría no tengo ninguna por eso tengo tuve que verlo físicamente.

Aunque al principio es una muralla, una vez aprendes algo en esto del css o wordpress en general ya no se suele olvidar y es divertido.

Bueno hasta otra.