Modificar Arthemia

bbrian · #1 (**permalink**) 13/10/2011, 10:23

Hola que tal.
Necesito saber de que manera cambiar el cuerpo de noticias de arthemia quiero que haya 2 columnas de noticias es decir una al lado de otra no una abajo de otra, como en Arthemia premium, dejo una imagen para que vean como es. Aver si me pueden ayudar.

YO LO TENGO ASI:

NECESITO HACERLO ASI:

ESPERO QUE PUEDAN AYUDARME, YA NO SE COMO HACER. BUSQUE POR TODOS LADOS.
MUCHAS GRACIAS

Nekko · #2 (**permalink**) 14/10/2011, 10:11

bbrian, ese Arthemia es Premium, deberías pedir soporte en el sitio de ellos y hacer valer tu dinero.

Te recomiendo leer este tema
http://www.forosdelweb.com/f118/no-d...s-pago-798431/

ayukkonen · #3 (**permalink**) 15/10/2011, 17:17

Como te dicen... Si has pagado por el theme, solicítales ayuda.

Saludos.

bbrian · #4 (**permalink**) 17/10/2011, 20:26

Yo no pague por el tema, yo quiero utilizar arthemia comun con el formato de noticias del premium como tienen muchas paginas que visito.
por ejemplo http://www.bodegue.com/

Nekko · #5 (**permalink**) 18/10/2011, 04:55

Bien, entonces deberás armarlo a través de la maquetación.

Primero modificá el largo de las entradas trayendolas con the_excerpt() y utilizá the_post_thumbnail() para las miniaturas de las imágenes.

Con esto en mente creá un div del tamaño adecuado y dale float:left; para que se vayan posicionando del modo que necesitás.

bbrian · #6 (**permalink**) 18/10/2011, 10:29

<?php the_excerpt(); ?> lo encontre en el index.php pero no entiendo que debo modificar ahi
despues the_post_thumbnail no tengo idea donde encontrarlo
me podrias explicar un poco mejor todo? que archivos debo modificar.
es algo que hace tiempo quiero hacer, desde ya muchas gracias

bbrian · #7 (**permalink**) 18/10/2011, 10:37

con el style.css consigo achicar el ancho del div de las noticias modificando front-list.
pero como hago para agragarles otra columna mas de noticias al lado? gracias

rogertm · #8 (**permalink**) 18/10/2011, 11:21

Los themes de Wordpress son un sistema modular, entonces, lo primero que tienes que hacer es identificar qué modulo (archivo de tu theme) quieres modificar. Una vez que tengas eso claro, lo mejor es dar algo de información, osea, código que podamos ver, y así poder ayudarte mejor.

También se agradece algo de esfuerzo de tu parte en ese sentido...

Saludos

bbrian · #9 (**permalink**) 18/10/2011, 11:49

este es el sector que yo debo modificar index.php

Código PHP:

 
<div id="bottom" class="clearfloat"> 
         
    <div id="front-list">     
     
    <?php 
      $page = (get_query_var('paged')) ? get_query_var('paged') : 1; 
      query_posts("cat=-27,-28&paged=$page&posts_per_page=8"); ?> 
     
    <?php while (have_posts()) : the_post(); ?>         
 
    <div class="clearfloat"> 
    <div class="titulonoti"><a href="<?php the_permalink() ?>" rel="bookmark"><?php the_title(); ?></a></div><div class="meta"> 
    <div class="spoiler"> 
    <?php    $values = get_post_custom_values("Image"); 
    if (isset($values[0])) { ?> 
      <a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"> 
    <img src="<?php echo bloginfo('template_url'); ?>/scripts/timthumb.php?src=/<?php 
$values = get_post_custom_values("Image"); echo $values[0]; ?>&w=146&h=77&zc=1&q=100" 
alt="<?php the_title(); ?>" class="left" width="146px" height="77px"  /></a> 
      <?php } ?> 
 
    <div class="letra2"><?php the_excerpt(); ?></div> 
    <table width="100%" border="0" cellpadding="0" cellspacing="0"> 
      <!--DWLayoutTable--> 
      <tr> 
        <td width="522" height="18" align="left" valign="top"><?php the_time('l, j/m/y') ?></td> 
        <td width="57%" rowspan="2" align="right"><?php if(function_exists('the_views')) { the_views(); } ?></td> 
      </tr> 
      <tr> 
        <td height="1"></td> 
      </tr> 
    </table> 
    </div>     
     
    </div> 
 
    </div>

rogertm · #10 (**permalink**) 19/10/2011, 06:56

@bbrian, como dijo @Nekko, tu problema lo resuelves tocando el css. Supongo que lo que tienes que modificar es la clase clearfloat, y asignarle un float: left y width: 50%. El tamaño de las miniaturas lo manejas en la linea:

Código PHP:

Ver original<img src="<?php echo bloginfo('template_url'); ?>/scripts/timthumb.php?src=/<?php $values = get_post_custom_values("Image"); echo $values[0]; ?>&w=146&h=77&zc=1&q=100" alt="<?php the_title(); ?>" class="left" width="146px" height="77px"/>

Específicamente en &w=146&h=77...

Como datos adicionales te sugiero que instales Firebug, eso te ayudará a editar al vuelo tus archivos. Y otra cosa muy importante, debes actualizar tu archivo timthumb.php, pues hace algún tiempo ha sido hackeado. http://www.forosdelweb.com/f118/aten...ckeado-934398/

Saludos

bbrian · #11 (**permalink**) 19/10/2011, 11:15

Hola Roger, te cuento que con tu ayuda pude conseguir lo que yo necesitaba, pero tengo un problema, las noticias me quedan una mas alta la otra mas baja te dejo una imagen para que me entiendas.

De que forma puedo hacer que queden fijas en un lugar estatico para siempre ?

Nekko · #12 (**permalink**) 19/10/2011, 11:22

Tenés dos opciones, según lo veo yo. Una es colocar un alto fijo al contenedor de cada noticia, te va a generar mas o menos espacios en blanco dependiendo si tenés títulos a dos renglones o a uno, y si tiene un texto de mayor o menor longitud debajo de la imagen. Pero te va a quedar mas parejo que ahora.

La otra opción es usar masonry
http://masonry.desandro.com/

bbrian · #13 (**permalink**) 19/10/2011, 11:26

Como le coloco un alto fijo al contenedor de cada noticia? Gracias

rogertm · #14 (**permalink**) 19/10/2011, 11:36

Y pregunto ¿instalaste por fin Firebug en tu navegador Firefox? espero que si. Y te voy a pasar las mieles de cómo funciona este asunto en estos días...

si lo que quieres es tener una estructura como la del Arthemia Premium, pues accedes al demo del mismo y haces clic derecho en el elemento que quieres te quede igual, en este caso los bloques de noticias, ahí buscas la opción que dice Inspeccionar Elemento, entonces verás el código html y css que es devuelto al navegador, y por el cual te debes guiar...

Así de fácil, así de sencillo

Nekko · #15 (**permalink**) 19/10/2011, 11:37

Código CSS:

Ver original.contenedor {
height:250px;
}

bbrian · #16 (**permalink**) 19/10/2011, 11:54

Utilizo Developer Tools que creo que es lo mismo.
Pero es muy diferente todo el codigo como para sacarlo de arthemia premium.
Solamente me queda hacer lo del contenedor.

.contenedor {
height:250px;
}

en que parte del css coloco esto? dentro del clearfloat ?

Gracias

Nekko · #17 (**permalink**) 19/10/2011, 12:12

No sé como se llama tu contenedor para cada una de las notas. Usá la developer toolbar o firebug para averiguarlo.

bbrian · #18 (**permalink**) 19/10/2011, 13:23

Es que no hay cada una de las notas hay un solo contenedor que es clearfloat y estan todas adentro. Se me complico...

bbrian · #19 (**permalink**) 19/10/2011, 16:41

Sepan disculpar, pero les voy a hacer otra pregunta.
Como puedo lograr que esten las 2 primeras noticias asi como deje la imagen (una al lado de la otra) y las de abajo una abajo de la otra? Como en la pagina www.bodegue.com
No consigo dividir las noticias para ponerlas como yo quiera.
Desde ya muchas gracias

rogertm · #20 (**permalink**) 20/10/2011, 06:55

Eso lo solucionas con un simple offset allí http://codex.wordpress.org/Function_...fset_Parameter

@bbrian, como te he dicho ya, es bueno que te metas en tu código y lo rompas un poco, sin miedo, así podrás ver donde te equivocas y donde das un paso adelante, de lo contrario, se nos hace muy difícil ayudarte, o lo que es lo mismo, no te estás ayudando tú.

Aquí en FdW la cosa funciona de la siguiente manera: Tienes una duda, intentas arreglarla, te da un y mil errores, buscas información por Internet, cuando ya no sabes qué hacer, entonces preguntas en el foro, pero con una duda clara, mostrando el código que no entiendes. Una imagen no nos dice nada, no podemos hacer el trabajo por ti.

Estas cosas tú las debes haber aprendido ya, pues llevas algo de tiempo participando en el foro. Y no lo tomes como un regaño, sino como un consejo, para que puedas avanzar en tus conocimientos, aquí todos llegamos sin saber ni nada, y hemos aprendido así, chocando de frente con las dudas.

Saludos

Nekko · #21 (**permalink**) 20/10/2011, 07:19

rogertm te está dando un buen consejo para que saques provecho de este foro.

Me gustaría agregar que estás planteando algunas dudas básicas sobre maquetación, que no están necesariamente vinculadas a WordPress. Te recomiendo que empieces a leer sobre el tema para dominarlo http://www.w3.org/Style/Examples/011/firstcss.es.html

Muchas de tus consultas pueden resolverse fácil si tenés un buen manejo de este aspecto.

bbrian · #22 (**permalink**) 20/10/2011, 11:44

Disculpen si utilice mal el foro pasa que hace bastante tiempo que estaba intentando hacer esto es más haces meses postie lo mismo y nadie respondio.
Les hago la ultima consulta espero no molestarlos...
Logre maquetar los post como yo quiero pero el problema ahora es que por ejemplo:

TENGO EL CONTENEDOR 1 (dos noticias horizontales)
CONTENEDOR 2 (5 noticias una abajo de la otra)
CONTENEDOR 3 (6 noticias horizontales)

Maquetado quedaron perfectas, pero en cada contenedor se repiten las mismas noticias no se como solucionarlo !

Les dejo el codigo php de cada uno:

CONTENEDOR 1:

Código PHP:

 
 <?php
      $page = (get_query_var('paged')) ? get_query_var('paged') : 1;
      query_posts("cat=-27,-28&paged=$page&posts_per_page=2"); ?>
    
    <?php while (have_posts()) : the_post(); ?>        

    <div class="clearfloat">

    <div class="spoiler"><div class="titulonoti"><a href="<?php the_permalink() ?>" rel="bookmark"><?php the_title(); ?></a></div><div class="meta">
    <?php    $values = get_post_custom_values("Image");
    if (isset($values[0])) { ?>
      <a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>">
    <img src="<?php echo bloginfo('template_url'); ?>/scripts/timthumb.php?src=/<?php
$values = get_post_custom_values("Image"); echo $values[0]; ?>&w=275&h=150&zc=1&q=100"
alt="<?php the_title(); ?>" class="left" width="275px" height="150px"  /></a>
      <?php } ?>

    
    <table width="90%" border="0" cellpadding="0" cellspacing="0">
      <!--DWLayoutTable-->
      <tr>
        <td width="522" height="18" align="left" valign="top"><div class="abajoimagen"><?php the_time('l, j/m/y') ?></div><div class="meta"></td>
        <td width="57%" rowspan="2" align="right"><div class="abajoimagen"><?php if(function_exists('the_views')) { the_views(); } ?></div><div class="meta"></td>
      </tr>
      <tr>
        <td height="1"></td>
      </tr>
    </table>
<div class="letra2"><?php the_excerpt(); ?></div>
    </div>    
    
    
    </div>

    </div>
    
    
    
        
      <?php endwhile; ?>

CONTENEDOR 2:

Código PHP:

  <?php
      $page = (get_query_var('paged')) ? get_query_var('paged') : 1;
      query_posts("cat=-20,-28&paged=$page&posts_per_page=3"); ?>
    
    <?php while (have_posts()) : the_post(); ?>    
     

    <div class="clearfloat2">

    <div class="titulonoti"><a href="<?php the_permalink() ?>" rel="bookmark"><?php the_title(); ?></a></div><div class="meta">
    <div class="spoiler">
    <?php    $values = get_post_custom_values("Image");
    if (isset($values[0])) { ?>
      <a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>">
    <img src="<?php echo bloginfo('template_url'); ?>/scripts/timthumb.php?src=/<?php
$values = get_post_custom_values("Image"); echo $values[0]; ?>&w=120&h=120&zc=1&q=100"
alt="<?php the_title(); ?>" class="left" width="120px" height="120px"  /></a>
      <?php } ?>

    <div class="letra2"><?php the_excerpt(); ?></div>
    <table width="100%" border="0" cellpadding="0" cellspacing="0">
      <!--DWLayoutTable-->
      <tr>
        <td width="522" height="18" align="left" valign="top"><?php the_time('l, j/m/y') ?></td>
        <td width="57%" rowspan="2" align="right"><?php if(function_exists('the_views')) { the_views(); } ?></td>
      </tr>
      <tr>
        <td height="1"></td>
      </tr>
    </table>
    </div>    
    
    </div>

    </div>

 <?php endwhile; ?>

CONTENEDOR 3:

Código PHP:

 
 <?php
      $page = (get_query_var('paged')) ? get_query_var('paged') : 1;
      query_posts("cat=-20,-28&paged=$page&posts_per_page=8"); ?>
    
    <?php while (have_posts()) : the_post(); ?>    
     

    <div class="clearfloat3">

    
    <div class="spoiler">
    <?php    $values = get_post_custom_values("Image");
    if (isset($values[0])) { ?>
      <a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>">
    <img src="<?php echo bloginfo('template_url'); ?>/scripts/timthumb.php?src=/<?php
$values = get_post_custom_values("Image"); echo $values[0]; ?>&w=100&h=100&zc=1&q=100"
alt="<?php the_title(); ?>" class="left" width="100px" height="100px"  /></a>
      <?php } ?>
<div class="titulonoti3"><a href="<?php the_permalink() ?>" rel="bookmark"><?php the_title(); ?></a></div><div class="meta">
    <div class="letra2"><?php the_excerpt(); ?></div>
    </div>    
    
    </div>

    </div>

 <?php endwhile; ?>

SEPAN DISCULPARME. MUCHAS GRACIAS !

bbrian · #23 (**permalink**) 22/10/2011, 10:04

Estoy buscando por todos lados y no lo consigo :s
por lo menos que alguno me diga como se llama lo que necesito para poder buscar mas !
gracias

Nekko · #24 (**permalink**) 22/10/2011, 14:18

bbrian tu problema está en que todos los bucles están llamando mas o menos a los mismos posts.

Lee sobre query_posts como para entender de que va la cosa:
http://codex.wordpress.org/Template_Tags/query_posts

Y lee también sobre el parámetro offset que yo creo que te va a servir.
http://codex.wordpress.org/Template_Tags/get_posts