Imagen entre posts

Inicio Foros WordPress Themes y Diseño Imagen entre posts

Este debate contiene 16 respuestas, tiene 2 mensajes y lo actualizó  Ishtar hace 9 años, 2 meses.

  • Autor
    Publicaciones
  • #12792

    Ishtar
    Participante

    <p>Hola a todos; navegando por wprecipes, encontré cómo separar cada post con una imágen,puede ser con una línea de separación o cualquier original imagen que queramos.</p>
    <p>Resulta que para eso hay que buscar en el style.css de nuestro theme lo siguiente:</p>
    <p>

    Code:
    .post {<br />

    </p>
    <p>y añadir:</p>
    <p>

    Code:
    background: transparent url(images/yourimage.jpg) no-repeat bottom;<br />

    </p>
    <p>con la url de nuestra imagen que queramos usar para separar los posts.</p>
    <p>A mí me encantó la idea,de hecho ya tengo la imagen subida al directorio images de mi theme.El problema es que en mi style.css no tengo ese &quot;.post {&quot;</p>
    <p>Me pregunto en que otro lugar puedo insertar ese código o si ese .post { está simbolizado de otra manera.O en que lugar se encuentra la raya de separación de mis posts.</p>
    <p>Aquí mi style.css:</p>
    <p>

    Code:
    body {<br />
    margin:0px 0;<br />
    padding:0;<br />
    font: 79% Arial;<br />
    color:#808080;<br />
    background-color:#000000;<br />
    line-height: 1.3em;<br />
    }</p>
    <p>p {<br />
    margin: 0 0 5px 0;<br />
    padding: 0;<br />
    color: #bbb;<br />
    background: inherit;<br />
    }</p>
    <p>hr {<br />
    border: 0;<br />
    height: 1px;<br />
    color: #999;<br />
    background-color: #000;<br />
    }</p>
    <p>.sample {<br />
    clear: left;<br />
    float: left;<br />
    padding-right: 10px;<br />
    }</p>
    <p>.sampledesc {<br />
    margin-left: 120px;<br />
    }</p>
    <p>blockquote {<br />
    width: auto;<br />
    font-size:90%;<br />
    color: #FFF;<br />
    text-align: center;<br />
    line-height: 18px;<br />
    margin-top: 30px;<br />
    margin-right: 20px;<br />
    margin-left: 10px;<br />
    padding: 10px 10px 10px 10px;<br />
    background-color: #000;<br />
    border: 1px;<br />
    border-style: solid;<br />
    border-color: #660000;<br />
    }</p>
    <p>a {<br />
    color: #CC0000;<br />
    background: inherit;<br />
    text-decoration:none;<br />
    }</p>
    <p>a:hover {<br />
    background: inherit;<br />
    text-decoration: underline;<br />
    }</p>
    <p>h1 {<br />
    padding:0;<br />
    margin:0;<br />
    color: #CC0000;<br />
    background: inherit;<br />
    font: bold 1.8em Arial, Sans-Serif;<br />
    letter-spacing: -1px;<br />
    }</p>
    <p>h1 a {<br />
    color: #C0C0C0;<br />
    background: inherit;<br />
    }</p>
    <p>h2 {<br />
    background-color: inherit;<br />
    color:#CC0000;<br />
    font-size:140%;<br />
    font-weight:bold;<br />
    margin: 5px 0 5px 0;<br />
    padding:0;<br />
    }</p>
    <p>h2 a {<br />
    background-color:#000;<br />
    color:#CC0000;<br />
    }</p>
    <p>ul {<br />
    margin: 0 0 10px 0;<br />
    padding : 0;<br />
    list-style : none; </p>
    <p>}</p>
    <p>.right li {<br />
    font-weight: bold;<br />
    margin: 0 0 8px 0;<br />
    padding: 0 0 0 5px;</p>
    <p>}</p>
    <p>img {<br />
    border: 0;<br />
    }</p>
    <p>.content {<br />
    color: #CC0000;<br />
    margin: 0 auto;<br />
    padding: 0;<br />
    width: 950px;<br />
    background: #000 url(../../../../wp-content/themes/abstract1/images/bg.jpg) repeat-y bottom center;<br />
    }</p>
    <p>.header {<br />
    width: 950px;<br />
    height: 240px;<br />
    margin: 0;<br />
    padding: 0;<br />
    background: url(../../../../wp-content/themes/abstract1/images/header.jpg) no-repeat center bottom;<br />
    color: #C0C0C0;<br />
    }</p>
    <p>.menu1 {<br />
    height: 73px;<br />
    background: url(../../../../wp-content/themes/abstract1/images/menu1.jpg) no-repeat center bottom;<br />
    }</p>
    <p>.hmenu {<br />
    text-align: center;<br />
    padding-top: 5px;<br />
    padding-right: 15px;<br />
    padding-left: 15px;<br />
    }</p>
    <p>.hmenu ul {<br />
    margin: 0;<br />
    padding : 0;<br />
    list-style : none;<br />
    border: none;<br />
    }</p>
    <p>.hmenu li {<br />
    display: inline;</p>
    <p>}<br />
    .entry ul li<br />
    {<br />
    margin-left:10px;<br />
    list-style:square;<br />
    }</p>
    <p>.hmenu li a {<br />
    color: #CC0000;<br />
    background: inherit;<br />
    font-weight: bold;<br />
    margin: 0 0 0 8px;<br />
    }</p>
    <p>.right {<br />
    clear: both;<br />
    font-size: 90%;<br />
    float:right;<br />
    width: 200px;<br />
    padding: 5px 80px 20px 15px;<br />
    border-left: 1px solid #660000;<br />
    }</p>
    <p>.left_article {<br />
    margin: 10px 0 10px 0;<br />
    padding: 10px 0 10px 0;<br />
    border-top: 1px solid #eee;<br />
    border-bottom: 1px solid #eee;<br />
    }</p>
    <p>.center {<br />
    float:left;<br />
    width: 500px;<br />
    margin: 10px 0 5px 0px;<br />
    padding: 0 0 0 85px;<br />
    color: #CC0000;<br />
    }</p>
    <p>* html .center {<br />
    float:left;<br />
    width: 500px;<br />
    margin: 0 0 0px 0px;<br />
    padding: 0 0 0 105px;<br />
    color: #CC0000;<br />
    }</p>
    <p>.footer {<br />
    clear:both;<br />
    width: 770px;<br />
    height: 84px;<br />
    color:#C0C0C0;<br />
    font-size:90%;<br />
    background: #000;<br />
    text-align:center;<br />
    margin-top: 0px;<br />
    margin-right: 0px;<br />
    margin-left: 0px;<br />
    padding: 0px 0px 0px 0px;<br />
    }</p>
    <p>.footer .padding{<br />
    text-align: center;<br />
    padding: 53px 0 0 0;<br />
    }</p>
    <p>.footer .right {<br />
    float:right;<br />
    clear:right;<br />
    text-align:right;<br />
    }</p>
    <p>fieldset {<br />
    border: 0px solid #eee;<br />
    }</p>
    <p>textarea.text {<br />
    height: 150px;<br />
    width: 90%;<br />
    border: 1px solid #ccc;<br />
    background: #000;<br />
    color: #CC0000;<br />
    }</p>
    <p>textarea.text:hover {<br />
    border: 1px solid #eee;<br />
    background: #222;<br />
    color: #CC0000;<br />
    }</p>
    <p>input.field {<br />
    border: 1px solid #ccc;<br />
    background-color: #000;<br />
    width: 200px;<br />
    color: #CC0000;<br />
    }</p>
    <p>input.field:hover {<br />
    border: 1px solid #eee;<br />
    background: #222;<br />
    color: #CC0000;<br />
    }</p>
    <p>input.text {<br />
    margin: 0;<br />
    width: 110px;<br />
    border: 1px solid #eee;<br />
    background: #000;<br />
    color: #CC0000;<br />
    }</p>
    <p>input.text:hover {<br />
    border: 1px solid #ccc;<br />
    }</p>
    <p>input.searchbutton {<br />
    margin: 0;<br />
    font-size: 100%;<br />
    font-family: Arial, Sans-serif;<br />
    border: none;<br />
    background: #000;<br />
    color: #808080;<br />
    padding: 1px;<br />
    font-weight: bold;<br />
    }</p>
    <p>.date {<br />
    color: #CC0000;<br />
    background: #000;<br />
    text-align: right;<br />
    margin: 14px 0 5px 0;<br />
    padding: 5px 0 0 0;<br />
    border-top: 1px solid #bbb;<br />
    }</p>
    <p>.time {<br />
    color: #CC0000;<br />
    float: right;<br />
    text-align: left;<br />
    padding: 60px 65px 0 0px;<br />
    }</p>
    <p>input.button {<br />
    background: #FFFFF4;<br />
    color: #808080;<br />
    border-right: 1px solid #ccc;<br />
    border-bottom: 1px solid #ccc;<br />
    }</p>
    <p>.comments {<br />
    padding: 10px 10px 8px 10px;<br />
    margin: 0 0 7px 0;<br />
    background: #000;<br />
    color: #CC0000;<br />
    }</p>
    <p>.commentsbox {<br />
    padding: 8px 0 10px 10px;<br />
    margin: 0 0 10px 0;<br />
    background: #000;<br />
    color: #CC0000;<br />
    }</p>
    <p>.error {<br />
    color: #f00;<br />
    background-color: #000;<br />
    padding: 7px;<br />
    margin-top: 5px;<br />
    margin-bottom: 10px;<br />
    border: 1px dashed #990000;<br />
    }<br />
    .error h2 {<br />
    color: #990000;<br />
    background: inherit;<br />
    }</p>
    <p>.success {<br />
    color: #CC0000;<br />
    background: #000;<br />
    padding: 7px;<br />
    margin-top: 5px;<br />
    margin-bottom: 5px;<br />
    border: 1px dashed #7BA813;<br />
    }<br />
    .success h2 {<br />
    color: #7BA813;<br />
    background: inherit;<br />
    }<br />
    .widget{<br />
    margin-bottom:25px;<br />
    }</p>
    <p> /* Comments Styling */<br />
    #commentlist li {<br />
    margin-bottom: 1.5em;<br />
    padding-bottom: 1em;<br />
    border-bottom: 1px solid #700000;<br />
    }</p>
    <p>#commentform {<br />
    margin: 1em 0;<br />
    background: #000;<br />
    width: 280px;<br />
    }</p>
    <p>#commentform textarea {<br />
    background: #f8f7f6;<br />
    border: 1px solid #d6d3d3;<br />
    width: 280px;<br />
    }<br />
    #commentform textarea:hover {<br />
    background: #FFFFFF;<br />
    border: 1px solid #d6d3d3;<br />
    }<br />
    #commentform textarea:focus {<br />
    background: #ffffff;<br />
    border: 1px solid #939793;<br />
    }</p>
    <p>#commentform #email, #commentform #author, #commentform #url {<br />
    font-size: 1.1em;<br />
    background: #f8f7f6;<br />
    border: 1px solid #d6d3d3;<br />
    width: 280px;<br />
    }<br />
    #commentform #email:hover, #commentform #author:hover, #commentform #url:hover {<br />
    font-size: 1.1em;<br />
    background: #ffffff;<br />
    border: 1px solid #d6d3d3;<br />
    width: 280px;<br />
    }<br />
    #commentform #email:focus, #commentform #author:focus, #commentform #url:focus {<br />
    font-size: 1.1em;<br />
    background: #ffffff;<br />
    border: 1px solid #939793;<br />
    width: 280px;<br />
    }<br />
    #commentform input{<br />
    margin-bottom: 3px;<br />
    }</p>
    <p>a img<br />
    {<br />
    border:none;<br />
    }</p>
    <p>

    </p>
    <p>A ver si me podeis ayudar… :wink:</p>
    <p>Salu2.
    </p>

  • #27852

    gventura
    Participante

    La clase post es un ejemplo debes revisar tu fichero index.php y ver en qué capa se imprime el contenido del loop.

    No me he revisado todo el tostón de código que has metido pero puedes probra de hacer otra cosa que crea será más rapido.

    En el fichero styles.css añadele esto:

    [code]
    hr{
    position:relative;
    float:top;
    background: url(images/tuimagen.png) top center no-repeat;
    width:100%;
    height:XX px;
    margin-top:10px;
    margin-bottom:10px;
    }
    [/code]

    Siendo XX del atributo height el alto de tu imagen.

    Ahora sólo debes añadir justo al final del bucle el siguiente código < hr />, sin espacios.

    I tachán! ya lo tienes! Veo que en tu css ya existe este código hr, entonces creo que ya lo debes tener en el loop, así que añadele las linias que no tiene tu style.css o reemplazalo. En este ejemplo se da un margen entre posts de 10px por arriba y 10 por abajo.

    Espero te sirva.

  • #27856

    Ishtar
    Participante

    gventura dijo:
    La clase post es un ejemplo debes revisar tu fichero index.php y ver en qué capa se imprime el contenido del loop.

    No me he revisado todo el tostón de código que has metido pero puedes probra de hacer otra cosa que crea será más rapido.

    En el fichero styles.css añadele esto:

    [code]
    hr{
    position:relative;
    float:top;
    background: url(images/tuimagen.png) top center no-repeat;
    width:100%;
    height:XX px;
    margin-top:10px;
    margin-bottom:10px;
    }
    [/code]

    Siendo XX del atributo height el alto de tu imagen.

    Ahora sólo debes añadir justo al final del bucle el siguiente código < hr />, sin espacios.

    I tachán! ya lo tienes! Veo que en tu css ya existe este código hr, entonces creo que ya lo debes tener en el loop, así que añadele las linias que no tiene tu style.css o reemplazalo. En este ejemplo se da un margen entre posts de 10px por arriba y 10 por abajo.

    Espero te sirva.

    Hola gventura;
    probé lo que dices, y no,no aparece la separación de la imagen entre posts 😕
    Hay alguna otra manera?Qué es lo que falla?

    Me encantaría aplicarlo,ya que he encontrado barras preciosas para separación de posts para el blog!

  • #27863

    gventura
    Participante

    he mirado tu blog de metalikos.

    Si lo que quieres es implementarlo en ese sitio sustituye:

    QUE OPINAS?
    <p class="date" ?>

    por :

    QUE OPINAS?
    < hr />

    en el fichero index.php

    si lo escribes sin espacios aparece una linia por defecto, pero con los estilos modificados aparecerá la imagen. por defecto sale lo que ves debajo de esta linia de texto


    abre el fichero style.css i justo dónde encuentres hr {…..

    Añadele el código que puse en el anterior mensaje. Lo guardas y los subes al servidor, que aún no lo has hecho.

    En principio ya estará.
    Saludos

  • #27868

    Ishtar
    Participante

    En el index php lo que dices aparece así:

    [code]<div class="entry">
    <?php the_content(‘Continua Leyendo »’)?><?php comments_popup_link(‘QUE OPINAS?’, ‘1 OPINION!!’, ‘% OPINIONES!!!’); ?>

    <p class="date" ?>
    </div>[/code]

  • #27871

    gventura
    Participante

    <div class="entry">
    <?php the_content(‘Continua Leyendo »’)?><?php comments_popup_link(‘QUE OPINAS?’, ‘1 OPINION!!’, ‘% OPINIONES!!!’); ?>

    < hr > — sin espacios
    </div>

    y después currate el cambio en el fichero styles.css

  • #27873

    Ishtar
    Participante

    Nada,no aparece ningun cambio.Sólo una barra blanca de separación un poco más gruesa que la que había.Pero nada más… 😕

  • #27874

    gventura
    Participante

    Hola Ishtar,

    En qué blog quieres cambiar esto?

    Postea la dirección con los cambios que has realizado y así poder ver. Yo estoy entrando en la web de metalikos y no veo que hayas introducido ningún cambio.

    Saludos.

  • #27889

    Ishtar
    Participante

    gventura dijo:
    Hola Ishtar,

    En qué blog quieres cambiar esto?

    Postea la dirección con los cambios que has realizado y así poder ver. Yo estoy entrando en la web de metalikos y no veo que hayas introducido ningún cambio.

    Saludos.

    En mi index.php tengo esto:

    [code]<div class="entry">
    <?php the_content(‘Continua Leyendo »’)?><?php comments_popup_link(‘QUE OPINAS?’, ‘1 OPINION!!’, ‘% OPINIONES!!!’); ?>


    </div>[/code]

    Y en mi style.css esto:

    [code]hr {
    position:relative;
    float:top;
    background: url(images/bar.gif) top center no-repeat;
    width:100%;
    height:11 px;
    margin-top:10px;
    margin-bottom:10px;
    }[/code]

    Ahora mismo subido.Y no aparece la imagen entre posts,solo una linea algo mas gruesa que la que habia 😕

  • #27899

    gventura
    Participante

    Prueba de poner el < hr /> detrás del < / div >

    Este tipo de errores siempre es mejor experiemntarlos en primera persona y ver qué pasa en cada cambio que se realiza, además de tener la certeza que se sabe qué se está haciendo cada momento.

    Mirando el código parece que le falta cerrar un div.

    Si con la primera opción no te sirve prueba de poner esto:

    < / div >
    < hr />
    < / div >

    si te descuadra mucho no te alarmes vuelves para atrás y volverá a la "normalidad"

  • #27900

    Ishtar
    Participante

    gventura dijo:
    Prueba de poner el < hr /> detrás del < / div >

    Este tipo de errores siempre es mejor experiemntarlos en primera persona y ver qué pasa en cada cambio que se realiza, además de tener la certeza que se sabe qué se está haciendo cada momento.

    Mirando el código parece que le falta cerrar un div.

    Si con la primera opción no te sirve prueba de poner esto:

    < / div >
    < hr />
    < / div >

    si te descuadra mucho no te alarmes vuelves para atrás y volverá a la "normalidad"

    Así como dices,en lugar de una raya aparecen dos! pero blancas como las que estaban.
    En ningun momento aparece una imagen… 😕

  • #27906

    gventura
    Participante

    Hola de nuevo amigo!

    Vamos a hacerlo de otro modo.

    Ahora tienes en el css un estilo .date y en el theme un < p class="date" ? >

    Vamos a modificar ese estilo así:

    .date {
    color: #CC0000;
    background: #000 url (images/bar.gif) top center no-repeat;
    text-align: right;
    margin: 14px 0 5px 0;
    padding: 5px 0 0 0;
    }

    Y si quieres arreglar en el index.php tienes que cambiar el ? por una barra / así quedaría

    < p class =" date " / >

    Recuerda que va sin espacios. 😉

  • #27907

    Ishtar
    Participante

    Hola de nuevo; Hice tal y como dijistes,pero ahora no sale ninguna separacion… 😕

  • #27908

    gventura
    Participante

    Hola!

    Yo no veo ningún cambio aplicado. Lo has vuelto cómo al principio? Así se hace muy difícl.

    Te doy la solución definitiva. Lo haremos a lo bruto. Añadiendo directamente la imagen al final de cada post.

    En vez de tener el < p class= "date" />

    inserta:

    < img src = " http://www.metalikos.org/wp-content/themes/abstract1/images/bar.gif " width=" 500 " height=" 11 " />

    Y así no debería surgir error.

    Así que apunta a la cruz roja que aparece debajo de mi nombre y pulsala! jajaja

  • #27917

    Ishtar
    Participante

    Así si que aparece!
    Pero aparecia muy junta con el contenido de arriba y de abajo.Lo dejé así:

    [code]<?php the_content(‘Continua Leyendo »’)?><?php comments_popup_link(‘QUE OPINAS?’, ‘1 OPINION!!’, ‘% OPINIONES!!!’); ?>

    <p> </p>
    <p>
    </p>
    <p>  </p>
    </div>[/code]

    Se puede concretar unos pixeles de separación que no sea ni tanto ni tan poca?

    Ya te dí en los agradecimientos. 😉
    Como no!

  • #27925

    gventura
    Participante

    Si abres el fichero index.php cambia lo que pusiste por:

    < img src = " http://www.metalikos.org/wp-content/themes/abstract1/images/bar2.gif " width=" 500 " height=" 11 " style="margin-top:15px; margin-bottom:20px;" />

    Y así tendrás una separación de 15 px con el elemento superior y de 20 con el inferior dando un "respiro" que dará mejor sensación visual.

    Después puedes suprimir los < p > < / p > que has añadido de más.

    Pero eso no es todo! Ahora falta lo más importante. Marca el tema del foro cómo resuelto 😀

  • #27927

    Ishtar
    Participante

    Creo que quedó bien…que te parece?
    Lo que más me lía es al actualizar,muchas veces no veo los cambios,tengo que loguearme y desloguearme y borrar caché,es un lío…

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

Pin It on Pinterest