header descolocado

Inicio Foros WordPress Themes y Diseño header descolocado

Este debate contiene 15 respuestas, tiene 2 mensajes y lo actualizó  Tamagochi hace 5 años, 12 meses.

  • Autor
    Publicaciones
  • #67102

    Tamagochi
    Participante

    Hola

    En la pagina http://evitalacrisis.com he instalado el theme navideño, que le suelo poner todos los años, el problema es que no se si ha cambiado algo del codigo de wordpress que afecte al header por que el banner y los enlaces rss salen descolocados. El theme es el christmas-carol aunque es bastante antiguo.

    Alguien me puede ayudar por favor??

    Salu2

  • #67106

    antoniohg
    Participante

    Parece que usas un theme bastante obsoleto, ya que está maquetado con tablas, una práctica poco recomendada actualmente. Yo probaría a usar otro theme más actual y si quieres lo personalizas con una cabecera o un fondo navideño o algo así.

  • #67114

    Tamagochi
    Participante

    Hola

    El problema es que no he encontrado ningun theme navideño mas actual y mis capacidades de diseño grafico son mas que nulas. Pretendia actualizar este y hacerle compatible en hmtl5 y css3 y responsive, pero me supera. Cuando toco lo descuadro. Me podeis echar un cable para actualizarle o recomendarme alguno mas actual??

    Salu2 y gracias por responder

  • #67123

    antoniohg
    Participante

    Edité la respuesta y ahora no sale.

    Bueno la escribo otra vez:

    Si no tienes conocimientos de diseño gráfico ni maquetación web, yo te recomendaría que te instalaras un nuevo theme. Por ejemplo Twenty Twelve que es Responsive, y puedes personalizar los colores, imagen de fondo cabecera…

    Para buscar imágenes navideñas puedes buscar en Freepick por ejemplo, aunque hay otros muchos sitios para buscar imágenes.

  • #67161

    Tamagochi
    Participante

    Hola

    Lo primero muchisimas gracias por contestar. No se por que el sistema no me manda las respuestas y de hecho no he visto la tuya hasta que no he entrado en el post.

    Pues no tengo conocimientos la verdad. Se leer mas o menos codigo y copiar pegar, pero poco mas, de diseño grafico 0

    En esa pagina que me dices que tengo que buscar? Vectores, fotos o psds? El twenty twuelve es el que estoy poniendo por defecto en la misma web, pese a que tampoco encuentro mucho en google ni aqui para editarlo o adaptarlo. Cree un child para ir tocando, me recomiendas que cree otro para el tema navideño pero basandome en el mismo tema??

    Por otro lado y de ser asi, como podria añadir el script de la nieve y por ejemplo personalizar los widgets, fondo, etc (colores o aspecto para darles el toque navideño)?

    Salu2

  • #67165

    antoniohg
    Participante

    Hola, te respondo por partes:

    Lo de Freepick es una web para buscar imágenes. Si te bajas Vectores o PSDs necesitarás un programa como Illustrator o Photoshop para  poder exportar las imágenes en jpg o png. Si no manejas ninguno de estos programas hay muchas otras páginas donde puedes buscar directamente jpg o png.

    Sí, podrías crear otro Child theme para el tema navideño (supongo que esto si lo controlas).

    Para lo de las imágenes de fondo en los widget (creo recordar que eran unos abetos en la parte de abajo de cada widget) en el archivo style.css busca esto:
    .widget-area .widget {
    word-wrap: break-word;
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    hyphens: auto;
    margin-bottom: 48px;
    margin-bottom: 3.428571429rem;
    }

    Y dentro de las {} le añades esto:
    background: url(images/imagen-abetos.png) bottom repeat-x; /*tendrás que crear una carpeta dentro del theme llamada images y meter dentro la imagen que uses*/
    padding-bottom: 40px; /*Este padding es para que haya hueco para los abetos, si no la imagen se vería debajo del texto, puedes variar el padding según la imagen que uses.*/

    Para el script de la nieve he encontrado este tutorial que parece bastante sencillo:

    http://www.webexperto.com/articulos/art/176/efecto-nieve/

    Te tendrás que buscar una imagen de copo de nieve o coger algunas de las que vienen al final del tutorial.

    Espero haberte podido ayudar.

  • #67171

    Tamagochi
    Participante

    Hola

    Bueno la cosa va quedando. Puedes ver los progresos aqui:

    http://evitalacrisis.com/

    Ahora le puse el fondo rojo, por fin tengo el menu, le puse la cabecera del tema antiguo y finalmente opte por un plugin para el efecto de la nieve. El pie de los widgets salio como me contaste, me gustaria saber si podria hacerlo de forma similar para el footer.

    Por otro lado la cabecera queda un poco mal por que la sombra del menu (donde iba el menu en el tema antiguo) ahora esta vacia, aunque ahi poco puedo hacer a no ser que la pusiera como imagen de fondo y sin cabecera pero imagino que esto debe ser dificil por lo de las distintas medidas de pantallas y para encajarlo aparte que al ser la imagen pequeña a lo mejor salia pixelado si la amplio con el photoshop.

    Por otro lado el fondo de los widgets me gustaria ponerlos en el rojo burdeos de la imagen, que quedaria mejor y aparte se veria mas la nieve por que claro el tema antiguo era todo rojo menos donde van los post y en este era todo blanco y no se cambiar mas el color.

    De cualquier forma creo que va quedando mas aparente gracias a tu ayuda.

    Voy a tratar de recuperar tambien el gorrito de navidad encima de las fechas de los post (y las fechas propiamente dichas) a ver si soy capaz cortando y pegando. Cualquier ayuda consejo sugerencia o critica sera muy bienvenida.

    Salu2

  • #67177

    antoniohg
    Participante

    Hola, la imagen de fondo de los widget tambien la puedes poner en el footer y en donde quieras.

    Para colorear los widget simplemente añádele a la propiedad background después de lo que ya has puesto y separado por un espacio el color que quieres.

    Para lo del gorrito en las fechas tendría que mirar el código del theme pero básicamente es añadirle la propiedad background-image a la clase que contenga las fechas.

    Y para lo de la imagen de la cabecera sólo te queda la opción de modificarla o crear una con un programa de diseño.

  • #67178

    antoniohg
    Participante

    Si ves que es mucho lio y quieres contactar en privado, veremos que podemos hacer.

    Puedes hacerlo a traves del formulario de mi web http://antoniohg.com/contacto

     

  • #67179

    Tamagochi
    Participante

    Hola

    El problema de añadirlo al footer es que no he sido capaz. He puesto en mi styles esto:

    / * Pie de página * /
    footer[role=”contentinfo”] {
    border-top: 1px solid #ededed;
    clear: both;
    font-size: 12px;
    font-size: 0.857142857rem;
    line-height: 2;
    max-width: 960px;
    max-width: 68.571428571rem;
    margin-top: 24px;
    margin-top: 1.714285714rem;
    margin-left: auto;
    margin-right: auto;

    background: url(images/abetos-nieve.gif) bottom repeat-x;

    padding: 24px 0;
    padding: 1.714285714rem 0;
    }
    footer[role=”contentinfo”] a {
    color: #686868;
    }
    footer[role=”contentinfo”] a:hover {
    color: #21759b;
    }

    Pero no se muestra nada. Lo de la fecha tranquilo lo estoy mirando yo, si fallo ya os lo comento por si me puedes echar un cable, pero estoy intentandolo primero.

    Y lo de la cabecera pues intentare con el photo a ver si me sale algo mas aparente, que en principio creo que puede ser bastante facil viendo la que tengo ahora jajaja

    Edito: Acabo de leer el otro mensaje, y te lo agradezco infinitamente pero no quiero tampoco abusar, de esta forma ademas voy aprendiendo y mejor aprender a pescar a que te regalen el pez. por cierto un blog y un trabajo magnifico el tuyo. el dibujo ese que has coloreado tremendo.

    Salu2

  • #67287

    Tamagochi
    Participante

    Hola

    Bueno añado otras preguntas y asi me podeis contestar los dos ultimos post. Ya añadi el color a los widgets como me dijiste, y fijandome un poco en el codigo cambie la fuente para que se vea mejor a color blanco. aunque he intentado reducirla de tamaño un poco y eso no he podido ni añadiendole la etiqueta

    font-size:8px;

    Respecto a lo de la fecha con el gorrito es una tabla, por lo que imagino que lo primero sera cambiarla a divs, y luego ubicarla en el nuevo tema, me podeis ayudar a hacerlo? Es que nunca cambie una tabla a divs. la tabla es esta:

    <table width=”568″ border=”0″ cellspacing=”0″ cellpadding=”0″>
    <tr>
    <td width=”75″ align=”left” valign=”top” class=”box5a”>
    <div class=”box5b”>
    <h3><?php the_time(‘j’) ?></h3>
    <?php the_time(‘M’) ?>
    </div>
    </td>
    <td align=”left” valign=”top”>
    <header class=”article-header”>
    <h1 class=”h2″><a href=”<?php the_permalink() ?>” rel=”bookmark” title=”<?php the_title_attribute(); ?>”><?php the_title(); ?></a></h1>
    <table width=”100%” border=”0″ cellspacing=”0″ cellpadding=”0″><tr><td align=”left” valign=”top”>
    <div class=”leftright”>
    <div class=”alignleft”>Posteado por <?php the_author() ?></div>
    <div class=”alignright”>Publicado en <?php the_category(‘, ‘) ?></div>
    </header> <!– end article header –>
    </td></tr></table>
    </div>
    <div class=”box5d”>&nbsp;</div>
    </td>
    </tr>
    </table>

    Y va justo debajo de un comentario:

    <!– Loop START –>

    No se a que equivaldra eso en el twenty twelve por que he probado a ponerlo justo debajo de

    <?php /* Start the Loop */ ?>

    Y me da error y no se muestra.

    Tampoco veo en el index.php donde estan las tags que queria dejarlas en color rojo tambien.

    Salu2

  • #67293

    Tamagochi
    Participante

    Hola de nuevo,

    Pongo tres post seguidos por que no puedo editar el archivo. El caso es que el color de los widgets que lo cambie como os comente dos post mas arriba, si estoy identificado se ve cambiado pero si estoy sin identificar se ve sin cambiar. Alguien sabe a que se puede deber y como solucionarlo?

    Salu2

  • #67295

    antoniohg
    Participante

    Hola Tamagochi, lo de que no se ve el cambio en el css si no estás logueado puede deberse a algún plugin de cache que uses. Borra todas las cachés de tu web y borra también las del navegador.

  • #67297

    antoniohg
    Participante

    Lo de la fecha con el gorrito, es que no recuerdo exactamente como era, pero aquí tienes un tutorial bastante bueno y fácil para poner una imagen para la fecha. Luego puedes adaptarlo con tus imágenes:

    http://www.wpdesigner.com/2007/06/04/wordpress-date-button/

  • #67298

    antoniohg
    Participante

    Respecto  la fecha, viendo el código que has puesto, la fecha sólamente es esto:
    <div class=”box5b”>
    <h3><?php the_time(‘j’) ?></h3>
    <?php the_time(‘M’) ?>
    </div>

    Busca en el css la clase box5b y ahí tienes los estilos definidos para la fecha.

  • #67313

    Tamagochi
    Participante

    Hola

    Ya logre hacer lo de la fecha, muchísimas gracias.

    Respecto al problema de añadir la imagen al footer es que no he sido capaz. He puesto en mi styles esto:

    / * Pie de página * /
    footer[role=”contentinfo”] {
    border-top: 1px solid #ededed;
    clear: both;
    font-size: 12px;
    font-size: 0.857142857rem;
    line-height: 2;
    max-width: 960px;
    max-width: 68.571428571rem;
    margin-top: 24px;
    margin-top: 1.714285714rem;
    margin-left: auto;
    margin-right: auto;

    background: url(images/abetos-nieve.gif) bottom repeat-x;

    padding: 24px 0;
    padding: 1.714285714rem 0;
    }
    footer[role=”contentinfo”] a {
    color: #686868;
    }
    footer[role=”contentinfo”] a:hover {
    color: #21759b;
    }

    Pero no se muestra nada. Lo de la fecha tranquilo lo estoy mirando yo, si fallo ya os lo comento por si me puedes echar un cable, pero estoy intentandolo primero.

    Ya añadi el color a los widgets como me dijiste, y fijandome un poco en el codigo cambie la fuente para que se vea mejor a color blanco. aunque he intentado reducirla de tamaño un poco y eso no he podido ni añadiendole la etiqueta

    font-size:8px;

    Tampoco veo en el index.php donde estan las tags que queria dejarlas en color rojo tambien. He visto que el twentytwelve tiene un archivo llamado tags.php, pero no veo donde editarlo para dejarlo en rojo.

    Salu2 y muchisimas gracias de nuevo

El foro ‘Themes y Diseño’ está cerrado y no se permiten nuevos debates ni respuestas.

Pin It on Pinterest

Ir al contenido