Foros del Web » Creando para Internet » CSS »

Personalizando un Theme, ayuda con CSS

Estas en el tema de Personalizando un Theme, ayuda con CSS en el foro de CSS en Foros del Web. Hola compañ[email protected], bueno estoy modificando un theme concretamente de wordpress, y el problema que encuentro ahora es que me gustaria que los bloques de Posts ...
  #1 (permalink)  
Antiguo 29/06/2007, 02:27
Avatar de xiscomax  
Fecha de Ingreso: febrero-2006
Mensajes: 379
Antigüedad: 11 años, 10 meses
Puntos: 5
Personalizando un Theme, ayuda con CSS

Hola compañ[email protected], bueno estoy modificando un theme concretamente de wordpress, y el problema que encuentro ahora es que me gustaria que los bloques de Posts se crearan de izquierda a derecha y hacia abajo en ese orden.
Os añado un grafico para que os hagais una idea.

Shot at 2007-06-29
La flecha roja es como actua el theme por defecto, que postea en sentido vertical, de arriba hacia abajo.
La linea Negra, en el sentido de los números rojos, es lo que quiero conseguir, que aparezcan los posts de izquierda a derecha y hacia abajo, en ese orden.

No se si me explico correctamente. xD

El CSS es este:
Código PHP:
/* misc */

.clearer,.footer {
    
clearboth;
}
.
content,.footer {
    
padding0 5px;
}
/* content CUADRO POST */
.item {
    
width150px;
    
padding6px;
    
text-alignjustify;
    
background#FFFFFF;
    
border1px solid #0099FF; /* COLOR */
}
/* content TITULO POST - TITULO Nº COMENTARIOS */
.item h1 {
    
padding:2px 3px 3px 8px;
    
fontnormal 11px VerdanaArialTahoma;
    
letter-spacing1px;
    
color#C36;
    
backgroundurl(img/bgtipost.gif);
    
/*border: 1px solid #00FF66; /* COLOR */
}
/* content BLOQUE POSTS */
.left {
    
floatleft;
    
width370px;
    
border4px solid #00FF66; /* COLOR */
}
/* post INTERIOR POST */
.entry
{
    
margin5px 0 5px 0;
    
/*border: 1px solid #dadada; /* COLOR */

Y el archivo PHP
Código PHP:
<?php get_header(); ?>
<div class="content">
    <div class="left">

            <?php if (have_posts()) : ?>

            <?php while (have_posts()) : the_post(); ?>

            <div class="item" id="post-<?php the_ID(); ?>">

            <h1><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"><span class="titulo"><?php the_title(); ?></span></a></h1> 
 
            <div class="entry">

            <?php the_content('Read the rest of this entry &raquo;'); ?>

            </div>
            
            <?php if(function_exists('the_ratings')) { the_ratings(); } ?>
            
            <p class="info">
            <img src="<?php bloginfo('template_directory'); ?>/images/comments.png" alt="Comments" border="0" align="top" /><strong> </strong><?php comments_popup_link('(0) Comentarios''(1) Comentario''(%) Comentarios'); ?>
            <img src="<?php bloginfo('template_directory'); ?>/images/bullet.png" alt="bullete" border="0" align="top" /><strong> </strong><?php the_category(', '?>
            <img src="<?php bloginfo('template_directory'); ?>/images/clock.png" alt="Filed" border="0" align="top" /><strong> </strong><?php the_time('d-m-Y'?></p>

            </div>

            <?php comments_template(); ?>

            <?php endwhile; ?>

            <p align="center"><?php next_posts_link('&laquo; Pagina Anterior'?> <?php previous_posts_link('Siguiente Pagina &raquo;'?></p>

            <?php else : ?>
            <h2 align="center">Ningun Resultado</h2>
            <p align="center">Lo siento. Por favor intenta con terminos diferentes.</p>            
            <p align="center"><?php include (TEMPLATEPATH "/searchform.php"); ?></p>
            
    <?php endif; ?>  
    </div>
    
    <?php get_sidebar(); ?>        

    <br class="clearer"/><span></span>

    </div>
<?php get_footer(); ?>
</div>
</body>
</html>
Gracias desde ya por adelantado.
Salu2
  #2 (permalink)  
Antiguo 29/06/2007, 05:53
Avatar de g05l21  
Fecha de Ingreso: mayo-2006
Mensajes: 76
Antigüedad: 11 años, 6 meses
Puntos: 1
Re: Personalizando un Theme, ayuda con CSS

Podrías probar a cambiar la clase item por esto:

Código PHP:
.item {
    
float:left/* Prueba a ver como lo dejaría poniendolos flotantes*/
    
width40%; /* escoje el porcentaje q mejor te venga, pero ponlo en porcentaje*/
    
padding6px;
    
text-alignjustify;
    
background#FFFFFF;
    
border1px solid #0099FF; /* COLOR */

Vamos, creas los post flotantes con un ancho del 40% de la página (no uses el 50% porque tienes q tener en cuanta los padding y margin) y rezas para que no se destroce mucho el diseño
__________________
.-. GeL/T0 .-. Quieres saber mas de mi? lee mi blog: http://g05l21.net
  #3 (permalink)  
Antiguo 30/06/2007, 06:48
Avatar de xiscomax  
Fecha de Ingreso: febrero-2006
Mensajes: 379
Antigüedad: 11 años, 10 meses
Puntos: 5
Re: Personalizando un Theme, ayuda con CSS

Cita:
Iniciado por g05l21 Ver Mensaje
Podrías probar a cambiar la clase item por esto:

Código PHP:
.item {
    
float:left/* Prueba a ver como lo dejaría poniendolos flotantes*/
    
width40%; /* escoje el porcentaje q mejor te venga, pero ponlo en porcentaje*/
    
padding6px;
    
text-alignjustify;
    
background#FFFFFF;
    
border1px solid #0099FF; /* COLOR */

Vamos, creas los post flotantes con un ancho del 40% de la página (no uses el 50% porque tienes q tener en cuanta los padding y margin) y rezas para que no se destroce mucho el diseño
Lol xDD eres un genio muchisimas gracias XD me a funcionado perfectamente.
Salu2
  #4 (permalink)  
Antiguo 30/06/2007, 10:38
Avatar de g05l21  
Fecha de Ingreso: mayo-2006
Mensajes: 76
Antigüedad: 11 años, 6 meses
Puntos: 1
Re: Personalizando un Theme, ayuda con CSS

Me alegro.
Un saludo!!
__________________
.-. GeL/T0 .-. Quieres saber mas de mi? lee mi blog: http://g05l21.net
  #5 (permalink)  
Antiguo 02/07/2007, 07:17
Avatar de xiscomax  
Fecha de Ingreso: febrero-2006
Mensajes: 379
Antigüedad: 11 años, 10 meses
Puntos: 5
Re: Personalizando un Theme, ayuda con CSS

Cita:
Iniciado por g05l21 Ver Mensaje
Me alegro.
Un saludo!!
Jejeje de welta con mis dudas. Como d costumbre :P
Ahí alguna otra forma para realizarlo?
Lo digo porque si todas las entradas son igual de largas crea una tabla de Posts perfecta cuadriculada, Parece un tablero de Ajedrez xD pero si creas una entrada algo mas larga que otra, esta descuadra al resto creando incluso huecos vacíos en donde cabrían otras entradas.

Entonces abria alguna forma para que estas entradas se ajusten verticalmente a la que tenga arriba y debajo?
No quedaría tan cuadriculado pero así no quedarían huecos xD
La flecha roja es el orden que siguen todos los posts, con el metodo anterior, en cada fila todos estan a la misma altura, lo que me gustaria conseguir es el descompensado de las flechas azules, donde todos siguen al que les precede encima y abajo.

Salu2

Última edición por xiscomax; 02/07/2007 a las 07:42
  #6 (permalink)  
Antiguo 02/07/2007, 14:12
Avatar de destor77  
Fecha de Ingreso: noviembre-2004
Ubicación: Gálvez, Santa Fe, Argentina
Mensajes: 2.654
Antigüedad: 13 años, 1 mes
Puntos: 43
Re: Personalizando un Theme, ayuda con CSS

mmm yo que vos me fijo la forma de que se muestre x nº de caracteres por ventana. O si no fíjate si el wordpress tiene algún plugin para eso.
  #7 (permalink)  
Antiguo 03/07/2007, 02:21
Avatar de g05l21  
Fecha de Ingreso: mayo-2006
Mensajes: 76
Antigüedad: 11 años, 6 meses
Puntos: 1
Re: Personalizando un Theme, ayuda con CSS

Pues lo que comentas es algo fácil y no lo es...

Me explico, para hacer eso, tendrías que tener, por ejemplo, tres columnas (divs flotantes con algún porcentaje) y luego ir metiendo los post en cada una de ellas, así crearías la independencia que quieres.

No es muy difícil, como ves, la cuestión es como meter esos tres divs en el wordpress. Y meter los correspondientes post en cada columna.


Sería algo del estilo

Código PHP:

<div class="columna">

  <
div class="post">
  </
div>
  ....
  <
div class="post">
  </
div>

</
div>


<
div class="columna">

  <
div class="post">
  </
div>
  ....
  <
div class="post">
  </
div>

</
div>


<
div class="columna">

  <
div class="post">
  </
div>
  ....
  <
div class="post">
  </
div>

</
div
Un saludo y suerte!

PS: Otra opción, que se me ocurre que podrías intentar mirar son las "position relative" a ver si te hacen algún apaño.
__________________
.-. GeL/T0 .-. Quieres saber mas de mi? lee mi blog: http://g05l21.net
  #8 (permalink)  
Antiguo 03/07/2007, 04:29
Avatar de xiscomax  
Fecha de Ingreso: febrero-2006
Mensajes: 379
Antigüedad: 11 años, 10 meses
Puntos: 5
Re: Personalizando un Theme, ayuda con CSS

lol, pues sip ya veo que es facil y dificil al mismo tiempo, "como decirle a wordpress que meta contenido en 3 columnas antes de pasar pagina ?? "
veo que ta chungo ya el tema.
Creo que me conformare con la solucion que me diste desde un prncipio, pk sera complicarme demasiado xD
Gracias d todas formas
Salu2
CHUNGO CHUNGO chuuuUUNGOH..
  #9 (permalink)  
Antiguo 03/07/2007, 05:03
Avatar de g05l21  
Fecha de Ingreso: mayo-2006
Mensajes: 76
Antigüedad: 11 años, 6 meses
Puntos: 1
Re: Personalizando un Theme, ayuda con CSS

Jeje... Me lo suponía

Un saludo!
__________________
.-. GeL/T0 .-. Quieres saber mas de mi? lee mi blog: http://g05l21.net
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 01:53.