Insertar imagen en cabecera de «Silver is the new Black»
-
Hola.
Utilizo la plantilla Silver is the new black, he pagado el custom y la modifico sin problemas. Lo que no consigo saber es si le puedo incluir una imagen a la cabecera de esta plantilla, he probado con código html pero no da resultado. ¿Es posible que no se pueda meter una imagen en esta cabecera o estoy haciendolo mal yo?
Muchas gracias y buenos días a todos.
El blog con el que necesito ayuda es (visible solo para usuarios conectados).
-
Buscando en el foro en inglés encontré un hilo donde alguien pregunta lo mismo.
En realidad hay como 20 temas abiertos (o quizá más, pero me estaba aburriendo de la búsqueda) con la misma pregunta, pero en uno sólo dan la respuesta, a mi entender, correcta.
El hilo es este:
http://en.forums.wordpress.com/topic/adding-header-on-silver-is-the-new-black?replies=21La respuesta correcta está aquí:
http://en.forums.wordpress.com/topic/adding-header-on-silver-is-the-new-black?replies=21#post-178835Me debes unas cañas.
-
No me importa nada invitarte a unas cañas, pero no he conseguido meter la imagen con lo que dice el post.
¡Glup!
-
Bueno. Acabo de hacerlo en un blog de pruebas que tengo.
Y se ve perfectamente la imagen en la cabecera.
Los pasos son:
a) Ir a
Tablero->Aspecto->Editar CSS.b) Te aparecerá una ventana con el editor de CSS (CSS Stylesheet Editor). Luego te deslazas hacia abajo y verás
¿Desea realizar cambios a la hoja de estilo de su tema actual, o prefiere comenzar desde cero?
Tienes dos opciones
b-1) Agrega esto a la hoja de estilo del tema Silver is the New Black (ver la hoja de estilo original)
b-2) Empieza desde cero y usa solo estoYo elegí la b-1) (porque no iba a modificar todo desde cero, simplemente la cabecera, pero es igual, se puede elegir la otra) y fui a la hoja de estilos usando el enlace (ver la hoja de estilo original)
c) con la hoja de estilos abierta luego del paso b-1) la copié y pegué en el editor de CSS mencionado en b)
d) en el editor de CSS con la copia de la hoja de estilos, busqué lo que se menciona en la respuesta correcta:
http://en.forums.wordpress.com/topic/adding-header-on-silver-is-the-new-black?replies=21#post-178835
es decir,#header a { display:block; color:#FFF;Y le agregué a continuación como se dice en esa respuesta
background-image:url('image url');
cuidando la sintaxis correcta (espacios, punto y coma, etc)e) me desplacé nuevamente hasta abajo y le di al botón Previsualizar.
f) vi la cabecera con la imagen que le puse.
Recuerda que la dirección de la imagen va en (‘image url’) con la sintaxis que está arriba: no olvides los paréntesis, las comillas sencillas, los espacios y los punto y coma. -
Hola Galois. Muchas gracias. Lo que me dices ya lo hago, pero mira el problema. Yo pongo esto en mi hoja de estilos:
#header a {
display:block;
color:#FFF;
background-image:url(http://ecocsic.files.wordpress.com/2009/07/grande.jpg);Pongo comilla simple, como me dices, antes y después de la URL, pero no me la mantiene, hay algo que no le gusta, y queda como te enseño, sin la comilla.
¿Ves algo mal en la sintaxis? ¿Qué estoy interpretando mal?
Muchas gracias.
ECo.
-
Ah, perdona, después de url y antes del paréntesis hay un espacio en blanco. Lo tengo con el espacio en la CSS, lo he quitado en el post por error.
-
Ahí va la sintaxis correcta:
#header a {
display:block;
color:#FFF;
background-image:url(‘http://ecocsic.files.wordpress.com/2009/07/grande.jpg’);
background-color:#B0B0B0;
border-bottom:1px solid #000000;
font-family:’Trebuchet MS’, sans-serif, serif;
padding:30px 10px 12px 50px;
} -
Acotaciones:
-entre #header y a hay 1 espacio.
-entre a y { hay 1 espacio.
-la URL debe ir entre comillas simples rectas.
-Si te sigue dando problemas, copia y pega lo que puse.
-No copies y pegues desde ningún editor (Word, Writer, etc.); tampoco desde Dreamweaver. Utiliza el bloc de notas o similar, para que no te genere algún código extraño (el caso de las comillas simples, por ejemplo, que Word las transforma).Por otro lado esa imagen no es buena para el header, deberías usar una que se adapte un poco más a las dimensiones, porque es muy corta y ancha, lo que ocasiona que se repita (muy corta) y que no se vea entera en forma vertical (muy ancha).
Te dejo una captura de como se ve en mi blog de pruebas:
http://pruebasdetrasnoche.wordpress.com/files/2009/07/pruebaheader.jpgY la imagen original es:
http://ecocsic.files.wordpress.com/2009/07/grande.jpgOjo: no digo que no sea linda (que lo es), sino que las dimensiones no son correctas para el header. Hay que ver si quieres que se pueda visualizar toda, sólo una parte, que se repita o que no, etc.
-
Gracias, copiando tu código veo la imagen, y efectivamente es muy mala imagen para una cabecera.
¿Es posible que la cabecera incluya un texto y una imagen? Pero no una imagen como background de toda la cabecera, sino como un elemento de ella. El caso es que tengo un logo para el blog, que es esta imagen que tú has visto, y al no quedar bien como fondo podría aparecer al lado del título del blog.
¿Sería esto posible?
Muchas gracias.
-
Te aclaro que edité mi última respuesta cuando escribías la tuya. Mi última frase es:
«Ojo: no digo que no sea linda (que lo es), sino que las dimensiones no son correctas para el header. Hay que ver si quieres que se pueda visualizar toda, sólo una parte, que se repita o que no, etc.»Pasando a lo que me dices ahora, yo probaría primero midiendo las dimensiones del header y poniendo una imagen que tenga exactamente las dimensiones. Puedes usar esa redimensionándola o partiendo de algún original que tengas, ponerle las dimensiones exactas de la cabecera/header.
También podrías poner una imagen compuesta con el logo y un texto. Las posibilidades son muchísimas.
Creo que lo mejor es que vayas probando sin miedo hasta que encuentres la que te satisfaga más.Por otra parte no soy un experto en CSS ni mucho menos, es un terreno complicado, pero vale la pena experimentar y leer materiales. Hay mucho y bueno (gratis) en la red. Como te dije en el otro párrafo las posibilidades son (casi) infinitas.
-
No te preocupes, entendí perfectamente que no juzgabas la imagen en sí, sino su adecuación al header, y tienes toda la razón. Creo que lo mejor es elaborar una imagen con el logo y el texto.
Muchísimas gracias por tu amabilidad.
Saludos de ECo.
No cierro el tema por si tengo algún problema con saber medir las dimensiones del header, si es así volveré a darte la tabarra.
-
Hola.
Quería saber si hay alguna forma de que la imagen de la cabecera no sea una imagen de background, sino una imagen normal, para que no me haga falta ocupar toda la cabecera con ella. O sea, en lugar de un título poner una imagen.
Gracias.
-
Creo, pero no estoy seguro 100%, que con esa plantilla no se puede poner la imagen de otra forma que no sea bg.
El motivo es que no hay una cabecera que se pueda adaptar.
En cambio, existe toda una serie de plantillas (28) que tienen una característica llamada custom header.
Las encontrarás yendo a
Tablero->Aspecto->Temas.
Y luego vas al desplegable que está debajo de Temas disponibles y filtras con dicha característica para que te aparezcan todas.
Así podrás ir probándolas.Un par de acotaciones:
-las plantillas ultrarecomendadas para modificar el CSS son las Sandbox, porque son completamente flexibles y están adaptadas para ese fin.
-si no estás demasiado seguro con tu manejo de CSS, te recomiendo que eches un vistazo a un par de libros muy buenos que están en castellano.Están disponibles en:
http://www.librosweb.es/
y hay tres. Una Guía de referencia con todas las propiedades CSS, una Introducción y un «CSS avanzado».
Todos los libros se pueden leer on-line o descargar en archivos PDF. -
Sí, conozco lo que dices, el problema es que este blog es para mi trabajo, y a la persona que manda le gusta esta plantilla (ya sabes, donde hay patrón no manda marinero). No he conseguido poner adecuadamente la imagen de fondo de la cabecera porque no sé cómo calcular el tamaño que debe tener para que quede bien ajustada. Luego si puedo haré esta pregunta en el foro.
Muchas gracias Galois.
-
El tema es «flexible-width». Si pones una imagen de 800px de ancho, supongo que quedaría bien. En todo caso deberías ir probando con distintos anchos y no olvidarte de poner el atributo non-repeat, para que se ajuste por completo.
-
Hola. Hice bien en no cerrar el tema porque no consigo encajar la imagen en la cabecera.
Pego aquí el CSS de la cabecera:
#header a {
display:block;
flexible-width;
color:#FFF no-repeat
background-image:url(‘http://ecocsic.files.wordpress.com/2009/07/ecobanner5.png’);
background-color:#B0B0B0;
border-bottom:1px solid #000000;
font-family:’Trebuchet MS’, sans-serif, serif;
padding:30px 10px 12px 50px;Y el resultado es el desastre que puedes ver en el blog. La imagen que quiero poner es la que está en la segunda entrada.
Supongo que los atributos no están bien puestos. ¿No? Ya sé que debería dedicarle más tiempo a consultar documentación sobre CSS, pero no dispongo en este momento de ese tiempo.
Siento mucho ser pesada, y te agradezco de nuevo tu atención.
-
Hice bien en no cerrar el tema porque no consigo encajar la imagen en la cabecera
Bueno, lo primero es que te recomendé que la imagen tuviera un ancho mayor (similar al de la plantilla). Y es de 476px x 85px.
Se puede comprobar mirando la imagen en su dirección:
http://ecocsic.files.wordpress.com/2009/07/ecobanner5.pngLa imagen que quiero poner es la que está en la segunda entrada.
Esa, tiene dimensiones diferentes: 735px x 90px
http://ecocsic.files.wordpress.com/2009/07/ecobanner.png?w=735&h=90Y el resultado es el desastre que puedes ver en el blog
El atributo lo pusiste en la línea equivocada.
Quíta no-repeat de la línea: color:#FFF no-repeatEl resultado no queda del todo bien, pero se ve un poco mejor.
Ya sé que debería dedicarle más tiempo a consultar documentación sobre CSS, pero no dispongo en este momento de ese tiempo.
Creo que si no tienes tiempo y es para un trabajo, te quedan dos caminos:
a) hacerte el tiempo. Esa plantilla no tiene el custom header y por lo tanto hay que buscarle la vuelta leyendo documentación y aprendiendob) convencer a tu jefe de que existen plantillas mucho mejores (con el custom header hay 28) y que quedarán bien en menor tiempo. De todas formas, si pagaste el CSS tendrás que hacerte el tiempo neceasario para aprender. No hay recetas mágicas en cuanto a eso.
Saludos.
-
Muchas gracias Galois, por tu paciencia y tu actitud de colaboración. Voy a dejar la cabecera con texto y dejar de complicarme la vida. Cuando aprenda más podré diseñar mejor.
Saludos.
-
-
- El debate ‘Insertar imagen en cabecera de «Silver is the new Black»’ está cerrado y no admite más respuestas.
Foros WordPress.com en Español 
