Finer   20 May, 2015, 3:09 pm
#1


Bueno este tutorial es bastante simple, no es nada fuera de otro mundo Tongue
Como hacer el portal que los posts se vean en columnas..

1)  Descargamos el plugin de leefish
http://community.mybb.com/mods.php?action=view&pid=332
¿¿Que hace este plugin??
Pues este plugin lo unico que hace es limital el numero de caracteres en el portal y te agrega un boton de read more (que no sirve y no funciona pero eso no lo vamos a usar, solo vamos a limitar caracteres)
Tambien se puede limitar caracteres de diferentes formas con javascript o php pero aqui vamos a usar el plugin ya que es bastante sencillo

1.5) Luego de instalar el plugin que lo unico que tienen que hacer es activarlo y listo
Vamos a configuracion> opciones del portal y abajo de todo les debe salir las opciones del plugin
Lo tienen que dejar como en esta imagen
[Imagen: yyRy4Oj.png]

Solo usaremos el limitar caracteres que tienen que poner 300 o cada cual sus gustos esto hara que se vean mas texto en los portales.

2) Bueno cuando ya tenemos el plugin instalado empezamos a editar las planillas del portal, ustedes solo tienen que copiar y pegar las siguentes planillas que dejare ya editadas por mi..
Vamos a las planillas del portal  ( Estilos y planillas> planillas> tutheme> Portal )

portal_announcement
<div class="elportal0">
	<div class="thead">	{$avatar}  <strong>{$icon} <a href="{$mybb->settings['bburl']}/{$announcement['threadlink']}">{$announcement['subject']}</a></strong>
		<span class="float_right">
			<strong>{$anndate}</strong>
			</span>
	</div>
<div class="elportal1 scaleimages">
<span class="eltextoportal">
				{$message}<br />
	<span class="elauthor">
		{$lang->posted_by} {$profilelink}<br />
	{$lang->forum} <a href="{$mybb->settings['bburl']}/{$announcement['forumlink']}">{$announcement['forumname']}</a></span>
			{$post['attachments']}
	</span>
</div>
		        <div class="leermas"><strong><a href="{$mybb->settings['bburl']}/{$announcement['threadlink']}">Leer mas</strong> <span class="float_right">{$numcomments}</span></div>
<div style="clear: both"></div>
	</div>

portal_announcement_avatar
<div class="portalavatar"><img src="{$useravatar['image']}" alt="" {$useravatar['width_height']} /></div>

portal_announcement_numcomments
<div class="float_right"><strong>{$lang->replies}  ({$announcement['replies']})</strong></div>

portal_announcement_numcomments_no
{$lang->no_replies}

Bueno solo tienen que copiar y reemplazar por las actuales que tienen

3) Hora del CSS bueno aqui tambien copiar y luego pegan su CSS en global css de tu theme.
.elportal1:hover img {
    opacity: 1;
}
.elportal1 img {
    height: 190px;
    opacity: 0.9;
}
.elportal1 {
    background: white none repeat scroll 0 0;
    border: 1px solid #d9d9d9;
    font-size: 11px;
    min-height: 313px;
    padding: 4px;
    position: relative;
}
.elportal0 {
    background: white none repeat scroll 0 0;
    float: left;
    font-size: 11px;
    margin-bottom: 20px;
    margin-left: 10px;
    position: relative;
    width: 280px;
}
.portalavatar img {
    height: 20px;
    width: 20px;
}
.portalavatar {
    float: left;
    margin-right: 1px;
    margin-top: -2px;
}
.leermas a:visited, a:link {
    color: white;
}
.leermas {
    background: #0066a2 none repeat scroll 0 0;
    color: white;
    display: block;
    margin-top: 0px;
    padding: 7px;
}

Es recomendable siempre tener una imagen primera y luego el texto abajo, se vera mejor Wink

Y con esto ya tendran su portal en columnas como en la imagen de arriba
Cuestion que si mybb no estaria ligada la imagen y luego el texto en el portal en una sola variable se podrian hacer muchas mas cosas

PD: Les recuerdo que esto esta hecho en el theme default osea me refiero es posible que capaz tengan algunos problemas de width en sentido capaz su theme no es del mismo tamaño que el default y solo hara que se le vean 2 columnas eso se arregla editando el width del "elportal0"

PD2: si no quieres usar plugin podes usar el tutorial de XEDE para recortar el texto del portal
http://www.mybb-es.com/hilo-1-8-recortar...-muy-facil
Última modificación: 17 Sep, 2016, 9:27 am por Finer.

[Imagen: tumblr_nj9sv13aff1tga1sco4_r1_500.gif]
Finer   20 May, 2015, 5:25 pm
#3
No me gusta mucho ese resultado xede ya lo e probado antes de usar el plugin y no me gusta que el texto se corte hasta donde llege el min height, lo habia hecho antes de pedir el plugin porque no me gustaba como quedaba.
Ademas que el portal cargaria mas en cargar si usas en min height porque ejemplo en un posts tenes 10 imagenes y ese post aparece en el portal osea que el portal el posts va a cargar las 10 imagenes pero solo se va a ver una parte del posts en el portal por usar min height
Pero con el plugin esta limitando caracteres osea no va a cargar las 10 imagenes solo cargara las 100 primera caracteres.

Y si no te gusta en sentido usar plugin podes hacerlo con php
http://php.net/manual/es/function.substr.php  o con javascript que e visto algunos.

[Imagen: tumblr_nj9sv13aff1tga1sco4_r1_500.gif]
Gypaete   17 Jun, 2015, 9:38 am
#4
Mu' bueno. Aunque podrías organizarlo para que la última noticia saliera en grande y las demás en pequeña, ¿entiendes? Aún así, mu' bueeeeno.  Angel
master1986   17 Jun, 2015, 10:34 am
#5
que buenisimo en su tiempo que ocupaba vbulletin siempre
la quise implementar pero nunca consequi encontrar
la guia indicada para hacerlo, se ve muy innovador el portal
con ese diseño, se agradece
saludos.
Porta   17 Sep, 2016, 6:55 am
#6
Una pregunta:
Como le corrijo el espacio que esta en azul he tratado de cambiar las dimensiones o reduciendo el numero de caracteres a mostrar en los temas del portal pero no hay resultado:

[Imagen: a0Gfe6M.png]
Porta   17 Sep, 2016, 7:03 am
#7
Ese problema me tre otro sobre la paginacion, que se acomoda como se le pega su regalada gana:



[Imagen: xuySHzK.png]




y me gustaria que siempre se acomode correctamente asi:



[Imagen: Rk8muhk.png]
Finer   17 Sep, 2016, 9:26 am
#8
Pone un

<div style="clear: both"></div>

antes del </div> final y proba sacando el min height a elportal1
con eso se soluciona la pagination.

y para eso del coso azull lo que podes hacer es sacarle la fecha
borra esto
<span class="float_right">
			<strong>{$anndate}</strong>
			</span>

[Imagen: tumblr_nj9sv13aff1tga1sco4_r1_500.gif]
Porta   18 Sep, 2016, 1:58 am
#9
Hola amigo gracias por la ayuda tan rapido,
No funciono hice como dices pero sigue estando un espacio entre las comumnas y la paginacion se coloca donde se le ocurre 

Pero ahora si se ve mejor sin la fecha asi los titulos se ven mas limpios

otra cosa en las columnas algunas imagenes se salen no se si sea el formato de la imagen o el tamaño mira:
no sucede con todas "aclaro" por que otras imagenes apesar de ser muy grandes si las acomoda en miniatura.

[img]blob:https%3A//imgur.com/358e1fb0-2fd3-4f74-bdfc-d6a1a135e90a[/img] [Imagen: 0awVvEX.png]
  
Powered By MyBB, © 2002-2025 MyBB Group.
Made with by Curves UI.