Autor Tema: [AYUDA] CuteNews en Horizontal  (Leído 1769 veces)

Desconectado guillem2000

  • PHPerit@
  • *
  • Mensajes: 11
  • Karma: 0
  • Nuev@ PHPer@
    • Ver Perfil
[AYUDA] CuteNews en Horizontal
« en: 31 de Julio de 2012, 23:39:04 pm »
Hola,

Tengo un problema con el CuteNews y es que quiero cambiar el sistema de publicacion, en vez de que las noticias se publiquen en vertical (Una debajo de la otra), se publiquen en horizontal (Una al lado de la otra).

Porfavor ya e buscado en este foro y he buscado por internet pero no sale nada de esto.

Saludos.

Comunidad PHPeros

[AYUDA] CuteNews en Horizontal
« en: 31 de Julio de 2012, 23:39:04 pm »

Desconectado AlejoSketch

  • PHPero Avanzado
  • ****
  • Mensajes: 339
  • Karma: 12
  • Sexo: Masculino
  • Aprendiendo algo nuevo cada día!
    • Ver Perfil
Re:[AYUDA] CuteNews en Horizontal
« Respuesta #1 en: 31 de Julio de 2012, 23:55:07 pm »
Hola,

Tengo un problema con el CuteNews y es que quiero cambiar el sistema de publicacion, en vez de que las noticias se publiquen en vertical (Una debajo de la otra), se publiquen en horizontal (Una al lado de la otra).

Porfavor ya e buscado en este foro y he buscado por internet pero no sale nada de esto.

Saludos.

Hola, antes que nada bienvenido al foro  :)

Verás no debe ser nada difícil si tienes conocimientos básicos en HTML/CSS. así que espero ser explicito y si no, no importa puedes volver para revisar tus dudas.

CuteNews funciona a partir de la plantillas que hallas diseñado y colocado desde el panel de administración. pero puedes diseñarlas previamente en cualquier editor web o de texto y luego copiar y pegar siempre y cuando conserves las variables para que CuteNews haga el loop.

1.- CSS

Código: [Seleccionar]
div.noticia {
width: 600px;
height: 200px;
float: left;
}

2. HTML

Código: [Seleccionar]
<div class="noticia">
<h1>titulo</h1>
<p>noticia</p>
</div>


3.- HTML a CuteNews

Código: [Seleccionar]
<div class="noticia">
<h1>{title}</h1>
<p>{history}</p>
</div>


En la parte del CSS hicimos un contenedor con class (clase) ya que se repetirá un número determinado de veces por el loop del CuteNews. añadimos a este un alto (height) y ancho (width) definidos que podrás modificar a tu gusto. importante mantener el atributo de float para que sean elementos flotantes hacia la izquierda y se ordenen horizontalmente.

En el HTML maquetamos el contenedor y añadimos elemento <h1> (cabecera o titulo) para el titulo y <p> (párrafo)  para la noticia.

Y en el paso 3, reemplazas esos datos estáticos por las variables dinámicas de CuteNews, en el mismo panel las puedes ver y yo no las recuerdo bien ahora pero son del tipo {variable}.

ej: en titulo lo reemplazas por la variable de titulo (creo que es {title})

Cuando hallas reemplazado los valores correspondientes puedes guardar la plantilla.
« Última modificación: 31 de Julio de 2012, 23:57:04 pm por AlejoSketch »


Desconectado guillem2000

  • PHPerit@
  • *
  • Mensajes: 11
  • Karma: 0
  • Nuev@ PHPer@
    • Ver Perfil
Re:[AYUDA] CuteNews en Horizontal
« Respuesta #2 en: 01 de Agosto de 2012, 00:05:11 am »
Esto donde hay que modificarlo?
En: Options >  Edit Templates

Ahora mismo lo tengo asi:

<div style="width:420px; margin-bottom:30px; vertical-align:top">
<div><strong>{title}</strong></div>

<div style="text-align:justify; padding:3px; margin-top:3px; margin-bottom:5px; border-top:1px solid #D3D3D3;">{short-story}</div>

<div style="float: right;">[full-link]Read more •[/full-link]  [com-link]{comments-num} Comments[/com-link]</div>

<div><em>Posted on {date} by {author}</em></div>
</div>

Desconectado AlejoSketch

  • PHPero Avanzado
  • ****
  • Mensajes: 339
  • Karma: 12
  • Sexo: Masculino
  • Aprendiendo algo nuevo cada día!
    • Ver Perfil
Re:[AYUDA] CuteNews en Horizontal
« Respuesta #3 en: 01 de Agosto de 2012, 00:13:25 am »
Esto donde hay que modificarlo?
En: Options >  Edit Templates

Ahora mismo lo tengo asi:

<div style="width:420px; margin-bottom:30px; vertical-align:top">
<div><strong>{title}</strong></div>

<div style="text-align:justify; padding:3px; margin-top:3px; margin-bottom:5px; border-top:1px solid #D3D3D3;">{short-story}</div>

<div style="float: right;">[full-link]Read more •[/full-link]  [com-link]{comments-num} Comments[/com-link]</div>

<div><em>Posted on {date} by {author}</em></div>
</div>

Correcto amigo, justo ahí.

Antes de continuar, podrías decirme como vas a mostrar las noticias? es decir... en forma horizontal con un limite en el que se produce un salto de linea? o horizontal "infinito" a través de scroll (barra desplazadora)?

Estoy atento...





Desconectado guillem2000

  • PHPerit@
  • *
  • Mensajes: 11
  • Karma: 0
  • Nuev@ PHPer@
    • Ver Perfil
Re:[AYUDA] CuteNews en Horizontal
« Respuesta #4 en: 01 de Agosto de 2012, 00:22:25 am »
No se si me has entendido bien, lo que yo quiero es que las noticias se publiquen una al lado de la otra.


Asi:
________________________     _____________________________
              Noticia 1                 -  -                     Noticia 2                 -
                                            -  -                                                   -           
                                            -  -                                                   -
Publicado dia 2/1/2012           -  -     Publicado dia 1/1/2012             -
_________________________     ____________________________
No se si asi te queda claro, Tambien que las mas nuevas sean las primeras.

Se tienen que mostrar 5 noticias a la vez.
« Última modificación: 01 de Agosto de 2012, 00:28:50 am por guillem2000 »

Desconectado AlejoSketch

  • PHPero Avanzado
  • ****
  • Mensajes: 339
  • Karma: 12
  • Sexo: Masculino
  • Aprendiendo algo nuevo cada día!
    • Ver Perfil
Re:[AYUDA] CuteNews en Horizontal
« Respuesta #5 en: 01 de Agosto de 2012, 00:35:48 am »
No se si me has entendido bien, lo que yo quiero es que las noticias se publiquen una al lado de la otra.


Asi:
________________________     _____________________________
              Noticia 1                  -                        Noticia 2                -
                                            -                                                     -           
                                            -                                                     -
Publicado dia 2/1/2012           -  Publicado dia 1/1/2012                  -
_________________________ ____________________________


Se tienen que mostrar 5 noticias a la vez.

Si te entendí, lo que sucede es que de mi pregunta depende la distribución de los bloques.

Tu código actual:
Código: [Seleccionar]
<div style="width:420px; margin-bottom:30px; vertical-align:top">
<div><strong>{title}</strong></div>
<div style="text-align:justify; padding:3px; margin-top:3px; margin-bottom:5px; border-top:1px solid #D3D3D3;">{short-story}</div>
<div style="float: right;">[full-link]Read more •[/full-link]  [com-link]{comments-num} Comments[/com-link]</div>
<div><em>Posted on {date} by {author}</em></div></div>

Modificamos:
Código: [Seleccionar]
<div style="width: 20%; padding: 5px; float: left;">
<h1>{title}</h1>
<p style="text-align: justify;">
{short-story}<br><br>
<b>Publicado el día {date} por {autor}</b>
</p>
</div><!--noticia-->

Tendrías un bloque que contiene la noticia y se multiplica por el número de noticias mostradas, como me dices que son 5 noticias, entonces declaramos un ancho relativo a través de porcentaje y no de pixeles.

Entonces de un total de 100% / 5 = 20% (por bloque), si el contenedor donde se muestran las noticias tiene un ancho definido y quieres ponerlo en pixeles más adelante entonces divide ese ancho en 5 y el resultado será el ancho de cada uno de los 5 bloques..


Desconectado guillem2000

  • PHPerit@
  • *
  • Mensajes: 11
  • Karma: 0
  • Nuev@ PHPer@
    • Ver Perfil
Re:[AYUDA] CuteNews en Horizontal
« Respuesta #6 en: 01 de Agosto de 2012, 00:56:15 am »
Creo que esto es lo que buscaba!
;)

« Última modificación: 01 de Agosto de 2012, 03:13:02 am por guillem2000 »

Desconectado AlejoSketch

  • PHPero Avanzado
  • ****
  • Mensajes: 339
  • Karma: 12
  • Sexo: Masculino
  • Aprendiendo algo nuevo cada día!
    • Ver Perfil
Re:[AYUDA] CuteNews en Horizontal
« Respuesta #7 en: 18 de Septiembre de 2012, 16:32:56 pm »
Creo que esto es lo que buscaba!
;)

Vale! me alegra haberte ayudado.


Desconectado mUrtiaga

  • PHPerit@
  • *
  • Mensajes: 1
  • Karma: 0
  • Nuev@ PHPer@
    • Ver Perfil
Re:[AYUDA] CuteNews en Horizontal
« Respuesta #8 en: 15 de Diciembre de 2012, 11:50:25 am »
Vale! me alegra haberte ayudado.

Hola, me da gusto encontrar que el tema no es tan viejo, pues necesito ayuda en algo que me urge, yo tengo una tabla donde muestro los "headlines" de las últimas 5 noticias publicadas con el código que da "cutenews" pero al mostrarlas no tienen un salto de línea, se pegan los headlines y no se distinguen, me gustaría que me pudieras ayudar a saber a qué código le muevo para hacer éste salto entre los "headlines" espero me hayas entendido y me puedas ayudar, te lo agradecería mucho. Un saludo!