Cerrar Ventana

Algunas cookies de este sitio son esenciales, y el sitio no funcionará como se espera sin ellas. Estas cookies se establecen en el momento de enviar un formulario, inicie sesión o interactuar con el sitio realizando una acción que va más allá de hacer clic en un simple enlace.


Leer Más

Somos un foro de soporte en español que no tiene publicidad y tiene muchas cosas gratuitas aportadas por la comunidad, contribuye con el foro para poder así obtener alguna membresía de manera gratuita.
SoporteMyBB tiene un total de
1124 temas de soporte.
0 quedan aún por resolver, 244 han quedado obsoletos y 880 han sido resueltos.
Aún no tienes una cuenta, regístrate es gratis.

Calificación:
  • 0 voto(s) - 0 Media
  • 1
  • 2
  • 3
  • 4
  • 5
Estilizar plugin avatar en temas y foros 2.8.3
 Whiteneo
Equipo de Soporte

Estado: Sin conexión Soporte Técnico
354
4,693
Mexico
5
93
576
16 August 2015, 13:18
#1
11
Mejor respuesta del mensaje Estilizar plugin avatar en temas y foros 2.8.3Pasos a seguir:

  1. Obtener el archivo desde el enlace que dejaré adjunto al tema, actualmente está en github, sin embargo aqui dejaré el archivo referencia de esta guia.
  2. Activar el plugin.
  3. Ir a estilos y plantillaas y verificar que la hoja de estilo llamada avatarep.css existe y tiene contenido, cual, lo veremos en la guia.
  4. Acomodar las plantillas necesarias para una visuallización correcta.
  5. Ajustar la configuración al gusto.
  6. Editar lo necesario como hojas de estilo o la ventana de datos de la ventana emergente.
Listo sería todo, comencemos...

Como pueden ver al final de las hojas de estilo he creado la llamada avatarep.css, ya que el plugin no la creo o el tema instalado es uno reciente o sea que se instaló después del plugin.
 
La creamos manualmente con el nombre avatarep.css y agregamos el contenido manualmente:

/* POPUP MENU*/
.tavatar {
                padding: 0px 10px;
                text-align: center;
}
               
.tavatar img {
    height: 80px;
    width: 80px;
    padding: 8px;
}
 
.avatarep_online {
                border: 1px solid #008000;
                box-shadow: 1px 1px 4px 2px rgba(14, 252, 14, 0.8);
                border-radius: 5px;
                opacity: 0.8;
}
 
.avatarep_offline{
    border: 1px solid #FFA500;
                box-shadow: 1px 1px 4px 2px rgba(252, 165, 14, 0.8);
                border-radius: 5px;
                opacity: 0.8;
}
 
.hr {
                background-color:#089;
}
 
.trow_profile{
                vertical-align: top;
                padding-left: 9px;
                width:340px;
                color:#424242;
}
 
.trow_profile a{
                color: #051517;
}
 
.trow_profile a:hover{
                color: #e09c09;
}
 
.trow_uprofile{
                min-height:175px;
                line-height:1.2;
}
 
.trow_uname{
                font-size:15px;
}
 
.trow_memprofile{
                font-size:11px;
                font-weight:bold;
}
 
.trow_status{
                font-size: 11px;
}
 
.avatarep_img{
    padding: 3px;
                border: 1px solid #D8DFEA;
    width: 40px;
                height: 40px;
                border-radius: 50%;
                opacity: 0.9;
}
 
.avatarep_fs{
                position: relative;
                font-size: 12px;
}
 
.avatarep_fd{
                margin-left: -5px;
                margin-top: -40px;
                position: relative;
                float: left;
                padding: 0 5px;
}
 

Luego de agregar esto guardamos nuestro archivo.
Y visualizamos el foro de nuevo para acomodar bien las cosas.
 
Ahora buscaremos en este caso Caja del foro – Plantillas y elegimos de la lista la llamada forumbit_depth2_forum_lastpost:
 
Cambio todo el contenido de esa plantilla por este:
 
<table border="0">
  <tr>
    <td width="20%" align="left" valign="middle"><span class="smalltext">{$lastpost_profilelink}</span></td>
    <td width="80%" align="left" valign="top">
<span class="smalltext">
<a href="{$lastpost_link}" title="{$full_lastpost_subject}"><strong>{$lastpost_subject}</strong></a>
<br />{$lastpost_date} {$lastpost_time}</span>
   </td>
  </tr>
</table>


Ahoraa buscaremos en este caso Caja del foro – Plantillas y elegimos de la lista la llamada forumbit_depth2_forum:
 
Aquí cambiaremos los contenidos por:

<tr>
<td class="{$bgcolor}" align="center" width="5%"><span class="forum_status forum_{$lightbulb['folder']} ajax_mark_read" title="{$lightbulb['altonoff']}" id="mark_read_{$forum['fid']}"></span></td>
<td class="{$bgcolor}" width="50%">
<strong><a href="{$forum_url}">{$forum['name']}</a></strong>{$forum_viewers_text}<div class="smalltext">{$forum['description']}{$modlist}{$subforums}</div>
</td>
<td width="10%" class="{$bgcolor}" align="center" style="white-space: nowrap">{$threads}{$unapproved['unapproved_threads']}</td>
<td width="10%" class="{$bgcolor}" align="center" style="white-space: nowrap">{$posts}{$unapproved['unapproved_posts']}</td>
<td width="25%" class="{$bgcolor}" align="left" style="white-space: nowrap">{$lastpost}</td>
</tr>

 Esa es la lista de foros, aquí acomodaremos esto en un solo cambio :D
 
Elegimos las plantillas Mostrar foro y ahi la que se llama forumdisplay_showthread
 
Cambiamos todo por esto:
 
<tr class="inline_row">
            <td align="center" class="{$bgcolor}{$thread_type_class}" width="2%"><span class="thread_status {$folder}" title="{$folder_label}">&nbsp;</span></td>
            <td align="center" class="{$bgcolor}{$thread_type_class}" width="2%">{$avatarep_avatar['avatarep']}</td>
            <td class="{$bgcolor}{$thread_type_class}">
                        {$attachment_count}
                        <div>
                                   <span>{$icon}{$prefix} {$gotounread}{$thread['threadprefix']}<span class="{$inline_edit_class} {$new_class}" id="tid_{$inline_edit_tid}"><a href="{$thread['threadlink']}">{$thread['subject']}</a></span>{$thread['multipage']}</span>
                                   <div class="author smalltext">{$thread['profilelink']}</div>
                        </div>
            </td>
            <td align="center" class="{$bgcolor}{$thread_type_class}"><a href="javascript:MyBB.whoPosted({$thread['tid']});">{$thread['replies']}</a>{$unapproved_posts}</td>
            <td align="center" class="{$bgcolor}{$thread_type_class}">{$thread['views']}</td>
            {$rating}
            <td class="{$bgcolor}{$thread_type_class}" style="white-space: nowrap; text-align: left;">
        <table border="0">
         <tr>
         <td>{$avatarep_lastpost['avatarep']}</td>
         <td>
                        <span class="lastpost smalltext">{$lastpostdate} {$lastposttime}<br />
                        <a href="{$thread['lastpostlink']}">{$lang->lastpost}</a>: {$lastposterlink}</span>
        </td>
        </tr>
        </table>
            </td>
{$modbit}
</tr>

En esa misma parte buscamos esta: forumdisplay_announcements_announcement
 
Cambiamos el contenido de todo por este:

<tr>
<td align="center" class="{$bgcolor}" width="2%"><span class="thread_status {$folder}">&nbsp;</span></td>
<td align="center" class="{$bgcolor}" width="2%">{$anno_avatar['avatarep']}</td>
<td class="{$bgcolor} forumdisplay_announcement">
            <a href="{$announcement['announcementlink']}"{$new_class}>{$announcement['subject']}</a>
            <div class="author smalltext">{$announcement['profilelink']}</div>
</td>
<td align="center" class="{$bgcolor} forumdisplay_announcement">-</td>
<td align="center" class="{$bgcolor} forumdisplay_announcement">-</td>
{$rating}
<td class="{$bgcolor} forumdisplay_announcement" style="white-space: nowrap; text-align: right"><span class="smalltext">{$postdate}</span></td>
{$modann}
</tr>

 
Luego como los anuncios no se visualizan en MyBB 1.8.5 pero igual lo corrijen y en futuras releases será necesario.

Ahora las edicioes finales, ya estamos máas cerca :D

Búsqueda plantillas aquí editaremos lo último:
 
Plantilla: search_results_posts_post cambiar todo por
 
<tr class="inline_row">
            <td align="center" class="{$bgcolor}" width="2%"><span class="thread_status {$folder}">&nbsp;</span>{$icon}&nbsp;</td>
            <td align="center" class="{$bgcolor}" width="2%">{$avatarep_avatar['avatarep']}</td>
            <td class="{$bgcolor}">
                        <span class="smalltext">
                                   {$lang->post_thread} <a href="{$thread_url}{$highlight}">{$post['thread_subject']}</a><br />
                                   {$lang->post_subject} <a href="{$post_url}{$highlight}#pid{$post['pid']}">{$post['subject']}</a>
                        </span><br />
                        <table width="100%"><tr><td><span class="smalltext"><em>{$prev}</em></span></td></tr></table>
            </td>
            <td align="center" class="{$bgcolor}">{$post['profilelink']}</td>
            <td class="{$bgcolor}" >{$post['forumlink']}</td>
            <td align="center" class="{$bgcolor}"><a href="javascript:MyBB.whoPosted({$post['tid']});">{$post['thread_replies']}</a></td>
            <td align="center" class="{$bgcolor}">{$post['thread_views']}</td>
            <td class="{$bgcolor}" style="white-space: nowrap; text-align: center;"><span class="smalltext">{$posted}</span></td>
            {$inline_mod_checkbox}
</tr>
 
Plantilla: search_results_threads_thread cambiar todo por
 
<tr class="inline_row">
            <td align="center" class="{$bgcolor}" width="2%"><span class="thread_status {$folder}" title="{$folder_label}">&nbsp;</span></td>
            <td align="center" class="{$bgcolor}" width="2%">{$avatarep_avatar['avatarep']}</td>
            <td class="{$bgcolor}">
                        {$attachment_count}
                        <div>
                                   <span>{$icon}{$prefix} {$gotounread}{$thread['threadprefix']}<a href="{$thread_link}{$highlight}" class="{$inline_edit_class} {$new_class}" id="tid_{$inline_edit_tid}">{$thread['subject']}</a>{$thread['multipage']}</span>
                                   <div class="author smalltext">{$thread['profilelink']}</div>
                        </div>
            </td>
            <td class="{$bgcolor}">{$thread['forumlink']}</td>
            <td align="center" class="{$bgcolor}"><a href="javascript:MyBB.whoPosted({$thread['tid']});">{$thread['replies']}</a></td>
            <td align="center" class="{$bgcolor}">{$thread['views']}</td>
            <td class="{$bgcolor}" style="white-space: nowrap">
            <table border"0">
                <tr>
                                                           <td width="2%">
                                                                       {$avatarep_lastpost['avatarep']}
                                                           </td>
                                                           <td>
                                                                       <span class="smalltext">
                                                                                  {$lastpostdate}<br />
                                                                                  <a href="{$thread['lastpostlink']}">{$lang->lastpost}</a>: {$lastposterlink}
                                                                       </span>
                                                           </td>
                                               </tr>
                                   </table>
            </td>
            {$inline_mod_checkbox}
</tr>


Eso es todo, gracias….
 
P.D. Los contenidos de esta ventana se modifican en plantillas globales y elegimos avatarep_popup.
 
Desde allí modificamos lo contenidos de dicha ventana trayendo más datos o eliminando los que no se requieran.
 
Los textos de la ventana están en el archivo de idioma avatarep.lang.php
 
Y con eso sería todo lo relacionado a este maravilloso e increíble plugin creado con el afán de darle más visualización a sus foros.

La guia completa con imágenes y ediciones en caso de mostrarse distinto a lo que deseamos será adjuntada en formato pdf y sólo en idioma español de momento.

Los casos pueden variar, sin embargo con la guia con imagenes seguro que acomodan todo perfecto.

Saludos...

Esta guia la dejare como tema principal ya que me han preguntado muchas veces esto y es uno de los plugins maas utilizados y recomendados en el foro oficial, asi que mejor tengamos esto aqui que es uno de los plugins de nosotros, al igual haremos una guia en video y luego más guias alusivas a esto y más cosas, saludos...
Última modificación: 16 August 2015, 13:19 por Whiteneo.


Archivos adjuntos
.pdf   Last Poster Avatar Guia de Usuario.pdf (Tamaño: 1.21 MB / Descargas: 203) - 16 August 2015, 13:16
.zip   lastposter-avatar-mybb18x-series.zip (Tamaño: 12.41 KB / Descargas: 37) - 16 August 2015, 13:17
 
 Locked4466
Usuario del Foro

Estado: Sin conexión Registrados
4
16
10
Argentina
0
0
10
6
24 August 2017, 06:46
#2
0
Compañero, imágenes? Me gustaría primero ver como queda antes de instalar o modificar algo.
 
 Whiteneo
Equipo de Soporte

Estado: Sin conexión Soporte Técnico
354
4,693
Mexico
5
93
576
24 August 2017, 14:02
#3
0
De hecho te recomiendo la versión en desarrollo 2.9.7 que ya intenta hacer todo el trabajo, quizá se hagan ajustes menores.

Pero ya funciona y el resultado es parecido a lo que miras aquí en el foro y en las imágenes del sitio oficial, no las he actualizado aún ya que son muchas revisiones las que han salido desde la 1.0 pasando por muchas 1.0.1, 1.0.10, 1.2, etc. Si cada versión sacara imagenes sería un lío, pero hay videos y en la guía en pdf se ve el resultado de estos archivos.

Sin embargo la versión final trae mucho más opciones, viene mejor renderizada y corrige muchos bugs posibles y adhiere bastantes cosas nuevas.

Es la que yo uso aquí en el foro la nueva 2.9.7 y es la que te recomiendo instalar, simplemente la instalas y listo ya el plugin hace todo el estilizado automáticamente. O al menos eso intenta y si a caso son ajustes menores, pero cada tema es distinto, en el default queda bien.

Saludos...
 
 happy2007
happy2007

Estado: Sin conexión Registrados
19
62
6
Colombia
0
0
5
28
7 December 2017, 18:13
#4
0
Codial saludo.

@ Whiteneo Al activarle el plugin se sale el texto de la plantilla last post, cómo puedo solucionarlo?
 
 Whiteneo
Equipo de Soporte

Estado: Sin conexión Soporte Técnico
354
4,693
Mexico
5
93
576
7 December 2017, 18:23
#5
0
Eso ya lo he contestado muchas veces, pero es en estas dos plantillas: (Se encuentran en Caja del foro plantillas).

forumbit_depth1_cat
forumbit_depth2_forum

Por defecto está esto:

<td class="tcat" width="200" align="center"><span class="smalltext"><strong>{$lang->forumbit_lastpost}</strong></span></td>

Hay que cambiar el ancho a 280.

Depende de tu tema yo me baso en el default, pero en cada tema cambia el valor de el último width por el deseado, casi siempre ese valor funciona, pero puede cambiar por el tema, tipo de fuente, etc...
 
 happy2007
happy2007

Estado: Sin conexión Registrados
19
62
6
Colombia
0
0
5
28
7 December 2017, 18:34
#6
0
Tengo una plantilla responsiva y el ancho es de 20%, pero le ajusté al 25% y la sección no se mueve Indeciso
 
 Whiteneo
Equipo de Soporte

Estado: Sin conexión Soporte Técnico
354
4,693
Mexico
5
93
576
7 December 2017, 19:09
#7
1
Y entonces porque usas una versión tan vieja del plugin ?

La actual es la 2.9.8

Ya paso por todas las 2.8.x luego subio y a 2.9 y de ahi hasta esta son mas de 10 revisiones y actualizaciones de diferencia.

A parte es responsive como aquí en las ultimas versiones. Pero en cada tema dependerá de el uso en hojas de estilo.

Como no soy mago ni adivino se pide crear temas de soporte detallando el problema para así poder apoyarlos de mejor forma.
 
 happy2007
happy2007

Estado: Sin conexión Registrados
19
62
6
Colombia
0
0
5
28
8 December 2017, 00:34
#8
0
Tengo la versión 2.9.7 pero no encuentro la nueva versión que me dices. Dónde puedo encontrar la 2.9.8? Quedo atento.
 
 Whiteneo
Equipo de Soporte

Estado: Sin conexión Soporte Técnico
354
4,693
Mexico
5
93
576
8 December 2017, 04:11
#9
0
@ happy2007 Esa versión está como siempre en github, pero aún estoy desarrollandola, porque quiero terminar de acomodar bien los nuevos estilos de los modals, ya que le hace falta mucho trabajo aún y por las nuevas opciones y ajustes aún no tengo tiempo de probarla al 100%.

Con la 2.9.7 está perfecto ya que es la que ya contiene la parte para el estilo de resoluciones menores.

Simplemente con que uses esa y reacomodes un poco te va a quedar mejor que con la 2.8.3 ya que esa versión tenía muchísimos cambios que hacer manualmente en cada tema que no fuera el default, de hecho está pensado y basado en el default y el que usamos nosotros nada más, pero en otros con pequeños retoques te quedará mucho mejor.

Intenta con esa versión y nos comentas, o igual puedes probar la de github que siempre está disponible y en desarrollo.

Saludos...
 
 happy2007
happy2007

Estado: Sin conexión Registrados
19
62
6
Colombia
0
0
5
28
8 December 2017, 19:46
#10
1
Ya lo he solucionado, le puse el siguiente código y voilá!

.avatarep_fd {
   float: left;
   margin: auto;
   width: 0;
}

Saludos
 


Posibles temas similares…
Tema Autor Respuestas Vistas Último mensaje
Arcoiris [Tutorial] Personalizar Avatar en Temas y Foros Plugin Whiteneo 2 774 13 January 2024, 23:20
Último mensaje: Whiteneo
  [Tutorial] Poner imagen a los foros ( No Ficons ) en MyBB 1.8 ZEUZ01 3 1,740 21 February 2020, 22:53
Último mensaje: blongso
Guiño [Tutorial] Crear menu en tabs en tus foros. Whiteneo 9 1,592 29 December 2019, 12:48
Último mensaje: Adfe
  [Videotutorial] Crear temas en mybb 1.8.x Whiteneo 18 2,193 29 October 2019, 05:28
Último mensaje: Whiteneo
Estrella [Tutorial] NinjaFirewall Para foros Mybb ZEUZ01 0 424 17 June 2019, 07:49
Último mensaje: ZEUZ01
  [Tutorial] Foros al estilo VBulletin Yadomi 6 3,070 1 July 2018, 21:31
Último mensaje: spyke
  [Videotutorial] Personalizar imagen de los foros (Ficons) en MyBB 1.8 rcruz37 8 3,784 31 January 2018, 05:19
Último mensaje: #Taylor
  [Tutorial] Pasar temas (themes) a mybb 1.8.10 Whiteneo 4 1,796 1 June 2017, 01:39
Último mensaje: Whiteneo
  [Tutorial] Poner anuncios en mis foros Whiteneo 5 2,405 23 November 2015, 20:31
Último mensaje: TaurusZDK
  [Tutorial] Como instalar temas en MyBB Whiteneo 1 2,083 23 October 2015, 01:56
Último mensaje: Whiteneo



Usuarios navegando en este tema: 1 invitado(s)