Foros del Web » Creando para Internet » Sistemas de gestión de contenidos » WordPress »

Dividir en cuatro columnas el index

Estas en el tema de Dividir en cuatro columnas el index en el foro de WordPress en Foros del Web. Hola de nuevo. Sabriais decirme como puedo separar en 4 columnas mi index, ahora solo me aparecen 2. Os pongo el cógido de mi index. ...
  #1 (permalink)  
Antiguo 16/05/2009, 11:09
 
Fecha de Ingreso: mayo-2009
Mensajes: 27
Antigüedad: 15 años, 7 meses
Puntos: 0
Dividir en cuatro columnas el index

Hola de nuevo. Sabriais decirme como puedo separar en 4 columnas mi index, ahora solo me aparecen 2. Os pongo el cógido de mi index.

Gracias.

Código PHP:
<?php get_header(); ?>

<div id="content" class="fullspan">

    <div class="container_16 clearfix">
            
        <div id="leftcontent" class="grid_12">
        
            <?php
                $counter 
0$counter2 0;
                while (
have_posts()) : the_post();
            
?>
    
            <?php $counter++; $counter2++; ?>    
            
            
         <div class="grid_6 <?php if ($counter == 1) { echo 'alpha'; } else { echo 'omega'$counter 0; } ?>">    
                                    
            <div class="post">
                
                <div class="screenshot">
                
                    <div class="screenimg">
                    
                        <?php if ( get_option('woo_layout') == '1-photo.php' ) { ?>
                        
                            <?php if ( get_option('woo_resize') ) { woo_get_image('large-image','330','190'); } else { ?>
                            
                            <a href="<?php the_permalink() ?>" title="View <?php the_title(); ?>"><img src="<?php echo get_post_meta($post->ID"image"$single true); ?>" alt="<?php the_title(); ?>" /></a>
                                                       
                            <? ?>
    
                        
                        <?php } else { ?>

                            <?php if ( get_option('woo_resize') ) { woo_get_image('large-image','330','190','url'); } else { ?>
                            
                            <a href="<?php echo get_post_meta($post->ID"url"$single true); ?>" target="_blank" title="View <?php the_title(); ?>"><img src="<?php echo get_post_meta($post->ID"image"$single true); ?>" alt="<?php the_title(); ?>" /></a>                        
                                                       
                            <? ?>

                        
                        <?php ?>
                        
                        
                    
                    </div>
                
                </div>
   
                <div class="theme">
              
                  <div class="grid_4 alpha"><h2><a title="<?php the_title(); ?>" href="<?php the_permalink() ?>" rel="bookmark"><?php the_title(); ?></a></h2></div>
                  <div class="grid_4 alpha"><?php the_category(','); ?></div>
                  <div style="clear:both;"></div>                   
                  <div class="grid_4 alpha"><p class="tags"><?php the_tags(''', ' ''); ?></p></div>    
                  <div class="grid_2 omega" style="text-align:right;"><?php if(function_exists('the_ratings')) { the_ratings(); } ?> </div>             
                  <div style="clear:both;"></div>    
                    
                </div>
                    
            </div><!-- /post -->
            
         <div style="clear:both;height:10px;"></div>            
                        
        </div>
        
         <?php if ( $counter == ) { ?><div style="clear:both;height:0px;"></div><?php ?>
            
        <?php endwhile; ?>
            
            <div style="clear:both;height:0px;"></div>
            
            <div id="postnav">
                <?php if(function_exists('wp_pagenavi')) { wp_pagenavi(); } ?>
            </div><!-- /postnav -->                        

        </div><!-- /leftcontent --> 
        
        <?php get_sidebar(); ?>
        
    </div><!-- /container_16 -->

</div><!-- /content -->

<?php get_footer(); ?>
  #2 (permalink)  
Antiguo 16/05/2009, 13:31
 
Fecha de Ingreso: enero-2008
Ubicación: Argentina - la plata
Mensajes: 793
Antigüedad: 16 años, 10 meses
Puntos: 21
Respuesta: Dividir en cuatro columnas el index

debes generar nuevos div, optimizandolos con Css, dentro de los nuevos div que coloque debes incertar los llamados a los distintos includes que desas mostrar en esas nuevas columnas.
__________________
negocios, dinero y franquicias
  #3 (permalink)  
Antiguo 17/05/2009, 08:15
 
Fecha de Ingreso: mayo-2009
Mensajes: 27
Antigüedad: 15 años, 7 meses
Puntos: 0
Respuesta: Dividir en cuatro columnas el index

¿Cómo lo harias con el siguiente style.css?¿Modificando el div ya creado no podría definirle cuatro cuadros?

Código PHP:
h1h2h3h4h5h6  {
    
font-weightbold;
}

a:hover {
    
text-decoration:underline;
}

/* STRUCTURE */

#wrap {

}

#header  {
    
positionrelative;
    
height120px;
}

#logo h1 {
    
backgroundurl(styles/default/logo.pngtop left no-repeat;
    
text-indent: -9999px;
    
floatleft;
}

#logo h1 a{
    
displayblock;
    
height100px;
    
width360px;
}

#header h1.title  {
    
displaynone;
}

#header h1.title a  {
    
text-decorationnone;
}

#header p.description  {
    
displaynone;
}

.
rss {
    
text-align:right;
}

.
rss li {
    
margin:0px !important;
}

.
rss a  {
    
font-weightbold;
    
text-decorationnone;
    
font-size0.9em;
    
backgroundurl(images/design/rss.gifno-repeat center left;
    
padding2px 0 2px 23px !important;
}

.
rss a:hover, .home_ad a:hover {
    
text-decoration:underline;
}

#nav  {
    
height45px;
    
color#fff !important;
}

#nav ul  {
    
padding0;
    
line-height45px;
    
height45px;
    
margin0px;
}

#nav ul li  {
    
displayinline;
    
margin0 24px 0 0;
    
_margin-right:23px;
    
font-familyHelveticaVerdanaArialsans-serif;
}

#nav ul li h3 {
    
color:#FFFFFF;
    
font-size:14px;
}

#nav ul li a  {
    
color#fff;
    
font-size1.1em;
    
font-weight:bold;
    
text-decorationnone;
    
line-height45px;
    
padding:3px;
    
}

#content  {
    
padding20px 0;
}

#footer  {
    
height45px;
    
font-size1em;
    
margin-bottom:20px;
}

#footer p  {
    
margin0;
    
line-height:45px;
}

#footer p a  {
    
text-decorationnone;
}

#footer p a:hover  {
    
text-decorationunderline;
}

#footer img {
    
vertical-align:middle;
}

#footer .powered {
    
text-align:left;
}

#footer .powered a {
    
text-align:right;
    
backgroundurl(images/design/wordpress_logo.pngleft center no-repeat;
    
padding10px 0px 10px 30px;
}

#footer .credit {
    
text-alignright;
}

/* tagline */

#tagline  {
    
positionabsolute;
    
top45px;
    
right20px;
    
font-size:16px;
    
font-weight:bold;
}

#tagline p {
    
margin-bottom0px;
    
padding:5px 10px 5px 10px;
}


/* BLOG CSS */

.post {
    
margin-bottom:10px;
}

.
post p.categories {
    
margin-bottom:15px;
}

.
post p.categories span {
    
padding5px;
    
margin-top50px;
}

.
post p.categories a  {
    
font-weightbold;
    
text-decoration:none;
}

.
post p.categories a:hover  {
    
text-decoration:underline;
}

.
post_seperator  {
    
margin-bottom:10px;
    
height:1px;
    
border-bottom:1px dotted #A6B3B9;
}

h2.title  {
    
font-size:22px;
    
margin-bottom:15px;
}

h2.theme_title  {
    
font-size:28px;
    
margin-bottom:20px;
    
line-height:28px;
}

h2.title .date  {
    
padding-top0;
    
padding-right0;
    
padding-bottom0;
    
padding-left10px;
    
font-size:12px;
}

h2.title a  {
    
text-decorationnone;
}

.
post p.comments a  {
    
padding0 0 0 22px;
    
font-weightbold;
    
text-decorationnone;
}

p.continue  {
    
floatleft;
    
displayinline-block;
}

p.continue a  {
    
font-weightbold;
    
text-decorationnone;
}

.
widget {
    
margin-bottom:20px;
}

#leftwidget  {
    
width159px;
    
padding-right10px;
    
margin-right0;
}

.
widgetlist  h3  {
    
margin0;
    
padding5px 0 5px 10px;
    
font-weightbold;
    
font-size13px;
    
text-transformuppercase;
}

.
widgetlist ul  {
    
margin0;
}

.
widgetlist ul li  {
    
margin0;
    
padding4px 0 4px 10px;
    list-
stylenone;
    
font-size12px;
    
border-bottom1px dotted #9cb9d7;
}

.
widgetlist ul li a:link, .widgetlist ul li a:visited  {
    
text-decorationnone;
}

.
widgetlist ul li a:hover  {
    
text-decorationunderline;
}


/* STYLES */

.fix {
    
clearboth;
}

.
bordered  {
    
border1px solid #000;
}

.
floatleft  {
 
floatleft;
}

.
floatright  {
    
floatright;
}

.
alignright  {
    
text-alignright;
}

.
alignr  {
    
text-alignright;
}

blockquote {
    
font-size:14px;
    
margin-bottom:15px;
    
color:#4F4F4F;
}

/* INDIVIDUAL THEME LISTING */

.theme h2 {
    
font-size12px !important;
    
margin0px !important;
}

.
large-screenshot {
    
margin-bottom5px;
    
border1px solid #dddddd;
    
padding4px;
    
width690px;
}

.
screenshot {
    
margin-bottom10px;
    
border1px solid #dddddd;
    
padding4px;
    
width200px;
    
height300px;
}

.
screenimg {
    
width100%;
    
height100%;
    
float:left;
    
positionrelative;
}

.
screenimg span {
    
positionabsolute;
    
font-size:11px;
    
right0px;
    
top7px;
}

.
screenimg span a {
    
padding8px;
    
text-decorationnone;
    
color#fff;
}

.
theme .date {
    
font-size10px;
    
padding-top3px;
}

.
theme p {
    
margin0px 0px 2px !important;
}

.
theme .tags {
    
padding-left24px;
    
backgroundurl(images/ico-tags.gifcenter left no-repeat;
}

.
theme .tags a {
    
font-size11px;
    
text-decorationnone;
}

.
theme .rating {
    
font-size11px !important;
    
width100% !important;
}

.
post-ratings-text {
    
font-size11px !important;
}


/* COMMENTS */

#comments {
    
border-top1px solid #dddddd;
    
padding-top:20px;
}

#comments h2  {
    
margin0px 0px 20px;
    
font-size18px !important;
    
line-height24px;
    
font-weightnormal !important;
}
.
commentlist li {
    list-
style-image:none;
    list-
style-position:outside;
    list-
style-type:none;
    
margin:0px 0px 20px;
    
padding:10px 10px 0px;
}
.
commentlist p {
    
margin-bottom:10px;
}
.
commentlist .gravatar {
    
float:right;
    
margin:0px 5px 5px 20px;
}

.
gravatar {
    
width:65px;
    
height:65px;
    
float:right;
    
margin-left:10px;
    
margin-right:5px;
    
margin-bottom:10px;
}

.
gravatar img {
    
background-color#FFFFFF;
    
padding4px;
    
border1px solid #cccccc;
}

.
commentlist cite {
    
font-weightbold;
    
font-size14px;
    
font-stylenormal;
    
margin-bottom:10px;
}
.
commentlist cite a:hover {
    
text-decorationnone !important;
}
.
commentlist .metadata {
    
color:#000 !important;
    
text-decorationnone !important;
    
font-weightnormal !important;
}    
.
commentlist .metadata:hover {
    
text-decorationunderline !important;
}
#commentform input {
    
padding5px;
    
margin-right10px;
}

#commentform #submit {
    
font-size:14px;
}

#commentform textarea {
    
padding10px;
    
width:558px;
    
_width:540px;
}

.
wp-pagenavi {
    
margin-top:20px;
    
padding-top:20px;
    
border-top1px solid #dddddd;

  #4 (permalink)  
Antiguo 18/05/2009, 01:37
 
Fecha de Ingreso: mayo-2009
Mensajes: 27
Antigüedad: 15 años, 7 meses
Puntos: 0
Respuesta: Dividir en cuatro columnas el index

Igual no me he explicado bien. El postarea del index ya esta dividido en dos recuadros por cada fila, ya que es un theme galeria, lo que yo quiero hacer es cambiar el ancho de los recuadros (esto si que se) y que me aparezcan cuatro por fila en vez de dos, se que debe de haber algo en el style.css pero no localizo el que...

Podeis ver la plantilla que estoy modificando en saulnieto.com

Muchas gracias.
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 18:34.