Foros del Web - Imagen en cabecera

Foros del Web (http://www.forosdelweb.com/)

- WordPress (http://www.forosdelweb.com/f118/)

- - Imagen en cabecera (http://www.forosdelweb.com/f118/imagen-cabecera-526541/)

Imagen en cabecera

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

Re: Imagen en cabecera

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

Re: Imagen en cabecera

Cita:

Iniciado por yournightmare86 (Mensaje 2159940)

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.

Re: Imagen en cabecera

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

Re: Imagen en cabecera

Cita:

Iniciado por roc2107 (Mensaje 2160492)

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 :(

Re: Imagen en cabecera

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

Re: Imagen en cabecera

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">

Re: Imagen en cabecera

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.

Re: Imagen en cabecera

Cita:

Iniciado por yournightmare86 (Mensaje 2162172)

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.

http://i23.tinypic.com/zx67id.jpg

Re: Imagen en cabecera

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

http://www.enjoythesilence.es/wp-con...mages/body.png

Re: Imagen en cabecera

Cita:

Iniciado por roc2107 (Mensaje 2162524)

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

Re: Imagen en cabecera

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.

Re: Imagen en cabecera

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

Re: Imagen en cabecera

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

http://farm3.static.flickr.com/2090/...053780b2eb.jpg

Re: Imagen en cabecera

Cita:

Iniciado por _minimalnet_ (Mensaje 2162987)

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. :)

Re: Imagen en cabecera

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

Re: Imagen en cabecera

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.

Re: Imagen en cabecera

Cita:

Iniciado por _minimalnet_ (Mensaje 2163644)

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

Re: Imagen en cabecera

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.