Deprecated: str_replace(): Passing null to parameter #3 ($subject) of type array|string is deprecated in /var/www/mybb-es.com/html/inc/class_language.php on line 201
Portal Columnas
MyBB-Es.com     Personalización y configuración de los foros MyBB     Tutoriales / Guías    

Portal Columnas

Finer   20 May, 2015, 3:09 pm
#1
[Imagen: 3s5CMH8.png]


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
Código PHP:
<?php 

<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
Código PHP:
<?php 

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

portal_announcement_numcomments
Código PHP:
<?php 

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

portal_announcement_numcomments_no
Código PHP:
<?php 

{$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.
Código PHP:
<?php 

.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: https://31.media.tumblr.com/b9f3b87cfcc8...r1_500.gif]
  
 Responder
XEDE   20 May, 2015, 4:48 pm
#2
Muy buen tuto @Finer, ojala lo hubieras publicado antes, me hubiera ahorrado un dolor de cabeza cuando hice los portales de mi theme con el portal como este ajajaja Big Grin


Lo único que si te recomendaría como opción por 2 cosas, es que en lugar de usar el plugin que mencionas que ademas no funciona bien y es un plugin, es mejor recortar los temas del portal como puse en este tutorial

las 2 razones serian, 1 que todos los temas publicados tendrían el mismo orden y tamaño indistinto de cuantos caracteres o imágenes tengan, y 2 que el botón de "Read More" si funcionaria Big Grin ademas que no necesitas instalar un plugin y se puede aplicar a cualquier theme ya que es un simple código

En lo personal para mi esto es una de las mejores cosas que se pueden hacer para mejorar Mybb, ya que si hay algo que siempre vi "flojo" en este sistema de foros es justamente el "Portal", siempre me pareció "pésimo" o que "esta por estar", cuando el portal es algo muy importante en un foro a mi entender, ya que es la mejor forma de mostrar al usuario visitante el contenido del foro justamente, pero en Mybb es algo que esta ultra descuidado.
[Imagen: http://i.imgur.com/CCoBXgK.png]
[Imagen: http://i.imgur.com/TQqCgcO.png]
  
 Responder
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: https://31.media.tumblr.com/b9f3b87cfcc8...r1_500.gif]
  
 Responder
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
  
 Responder
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.
  
 Responder
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]
  
 Responder
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]
  
 Responder
Finer   17 Sep, 2016, 9:26 am
#8
Pone un

Código:
<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
Código:
<span class="float_right">
            <strong>{$anndate}</strong>
            </span>
[Imagen: https://31.media.tumblr.com/b9f3b87cfcc8...r1_500.gif]
  
 Responder
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]
  
 Responder
Tema anterior      Tema siguiente
  
 Contáctanos
 Equipo del foro
 MyBB-Es.com - Soporte para los Foros MyBB en Español
 Volver arriba
 Marcar foros como leídos
 Sindicación RSS
 Ayuda
Powered By MyBB, © 2002-2024 MyBB Group.
Made with by Curves UI.