[Tutorial] Personalizar Avatar en Temas y Foros Plugin

**2,958** · 30 July 2018, 01:06

Dejaré este tutorial por todas las dudas que existen similares de funcionamiento y estilización.

1.- Se ve mal o descuadrado.

Imagen Previa:

[Imagen: ESbW3ld.png]

Hay dos partes que vamos a tocar:

a.- Dirígete a estilos y plantillas en tu panel de administración, elige el estilo que tiene problemas, en la parte de Estilos y plantillas selecciona plantillas.

[Imagen: lgcikGw.png]

De esa parte Caja del foro plantillas damos click y sale la lista, vamos a editar estas tres:

Código: ( Seleccionar Todo )

forumbit_depth1_cat - Parte de arriba de la caja en el index.php

forumbit_depth2_cat - Este es el contenido de la caja en el index.php

forumbit_depth2_forum - Este es el contenido de la caja en forumdisplay.php

Estas son para las vistas de la parte de la lista de foros, ambas deben acomodarse bien.

1a.- forumbit_depth1_cat

Abrimos y encontramos algo similar a esto:

Código: ( Seleccionar Todo )

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

En la parte del ancho de 200 hay que colocarle el número de pixeles deseado para ajustar el tamaño de la caja, justo donde cubra todo el texto de un tema con texto demasiado largo.

Yo casi siempre lo dejo en 250, pero puedes probar el valor adecuado.

2a.- forumbit_depth2_cat

Abrimos y encontramos algo similar a esto:

Código: ( Seleccionar Todo )

<td class="{$bgcolor}" align="right" style="white-space: nowrap">{$lastpost}</td>

Agregamos el width necesario, yo lo pongo en 250 igual de este modo:

Código: ( Seleccionar Todo )

<td class="{$bgcolor}" align="right" style="white-space: nowrap;width:250px">{$lastpost}</td>

3a.-forumbit_depth2_forum

Abrimos y encontramos algo similar a esto:

Código: ( Seleccionar Todo )

<td class="{$bgcolor}" align="right" style="white-space: nowrap">{$lastpost}</td>

Lo cambiamos por:

Código: ( Seleccionar Todo )

<td class="{$bgcolor}" align="right" style="white-space: nowrap;width: 250px">{$lastpost}</td>

Luego vamos a editar la caja de los subforos en las siguientes plantillas:

Mostrar foro - Plantillas

Código: ( Seleccionar Todo )

forumdisplay_subforums - Parte de arriba en la caja de forumdisplay.php

Buscamos por esto:

Código: ( Seleccionar Todo )

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

Es importante ajustar este valor y acomodar los demás si es posible.

Yo cambiaría este otro ajustando ambos para que sumados den el mismo valor:

Código: ( Seleccionar Todo )

<td class="tcat" width="59%"><span class="smalltext"><strong>{$lang->forumbit_forum}</strong></span></td>

Código: ( Seleccionar Todo )

<td class="tcat" width="54%"><span class="smalltext"><strong>{$lang->forumbit_forum}</strong></span></td>



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

Así los dejaría. Ya dependiendo tu resolución o tu tema se pueden agregar clases y anchos para cada resolución Sonrisa

Sólo dejo el ejemplo clásico en una pantalla de dimensiones estándard.

Luego de acomodar esto el resultado sería agradable a la vista.

[Imagen: WYCP6Ps.png]

Después de esto ya lo tenemos acomodado que es la parte más complicada.

2.- Ahora el segundo error común es este:

[Imagen: qkSmjuk.png]

Como puedes ver los nombres de usuario tienen números debido a que hay otro plugin de formateo de los nombres, así que en tu plugin de avatares deshabilita la penúltima opción.

[Imagen: MgG7miV.png]

Con esto ya quedará todo listo...

[Imagen: IYuhvNG.png]

3.- Cambios de estilo.

En tus estilos ahora verás esta hoja de estilos.

[Imagen: b52Y5OI.png]

La abrimos en modo avanzado y la editamos al gusto:

[Imagen: Fn98Q1l.png]

Por ejemplo el avatar no me gusta redondo lo quiero cuadrado y más pequeño:

Código: ( Seleccionar Todo )

.avatarep_img, .avatarep_bg{padding: 3px;border: 1px solid #D8DFEA;width: 40px;height: 40px;border-radius: 50%;opacity: 0.9;display: inline-table;margin-bottom: -35px}

En esta parte lo cambio de tamaño y borde, a esto:

Código: ( Seleccionar Todo )

.avatarep_img, .avatarep_bg{padding: 3px;border: 1px solid #D8DFEA;width: 30px;height: 30px;border-radius: 3px;opacity: 0.9;display: inline-table;margin-bottom: -35px}

Listo guardamos y probamos, hay que tomar en cuenta que debemos cambiar la parte de estilo responsive a nuestro gusto de igual modo.

Pero ya esto es a detalle como puedes acomodarlo.

Todos los ajustes son personalizables, si no quieres que se aplique en cierta zona simplemente bastará con editar cada ajuste del plugin a nuestro gusto desactivando las mejoras innecesarias y listo !!!

Con esto tendríamos el plugin funcionando de una manera mejor y estilizada.

10 January 2024, 01:58

0

Buenas noches Whiteneo, estaba mirando y leyendo esto, y revisando entre lo que comentastes aquí para cuadrar el plugins Last Post Avatar y como ando usando un Theme Responsive, no me sale nada de lo que comentastes para modificar, aquí te pongo todo lo que me sale, incluyendo el theme que estoy usando.

Theme: MyBB-Responsive 2.0
Autor: PARADOX987
URL: Registrate o inicia tu sesión para ver este contenido

Y esto que te comento aquí abajo son los scrip, o códigos que me salen, y mirando no encontré ninguno de los que publicastes, supongo que debo agregarlos,

forumbit_depth1_cat:

Código: ( Seleccionar Todo )

<div class="forum-parent">

    <div class="forum-parent-card">

        <div class="block-header bar{$forum['fid']}">

            <div class="forum-header thead{$expthead}">

                <div class="forum-category">

                    <a href="{$forum_url}" title="{$forum['description']}">{$forum['name']}</a>

<!--                     <span class="smalltext">{$forum['description']}</span> -->

                </div>

                <span class="expcolimage">

                    <img src="{$theme['imgdir']}/{$expcolimage}" id="cat_{$forum['fid']}_img" class="expander" alt="{$expaltext}" title="{$expaltext}" />

                </span>

            </div>

        </div>

        <div style="{$expdisplay}" id="cat_{$forum['fid']}_e">

            {$sub_forums}

        </div>

    </div>

</div>

forumbit_depth2_cat:

Código: ( Seleccionar Todo )

<tr>

<td class="{$bgcolor}" align="center" width="1"><div class="forum_status forum_{$lightbulb['folder']} ajax_mark_read" title="{$lightbulb['altonoff']}" id="mark_read_{$forum['fid']}"></div></td>

<td class="{$bgcolor}">

<strong><a href="{$forum_url}" title="{$forum['description']}">{$forum['name']}</a></strong>{$forum_viewers_text}<div class="smalltext"><div class="hide_mobile">{$forum['description']}</div><div class="show_mobile"><br /><br />{$lastpost}</div><span class="show_mobile"><br /></span>{$subforums}</div>

</td>

<td id="info" class="{$bgcolor}" align="center" style="white-space: nowrap"><div class="infostats">{$threads}{$unapproved['unapproved_threads']} Temas: <br /> {$posts}{$unapproved['unapproved_posts']} Respuestas:</div></td>

<td id="threads" class="{$bgcolor}" align="center" style="white-space: nowrap">{$threads}{$unapproved['unapproved_threads']} Temas: <br /> {$posts}{$unapproved['unapproved_posts']} Respuestas:</td>

<td id="lastpost" class="{$bgcolor}" align="right" style="white-space: nowrap">{$lastpost}</td>

</tr>

forumbit_depth2_forum:

Código: ( Seleccionar Todo )

<div class="forum-inner-card">

    <div class="forum-icon flex-center">

        <div class="forum_status forum_{$lightbulb['folder']} ajax_mark_read" title="{$lightbulb['altonoff']}" id="mark_read_{$forum['fid']}"></div>

    </div>

    <div class="forum-name">

        <span>

            <strong><a href="{$forum_url}">{$forum['name']}</a></strong>{$forum_viewers_text}

        </span>

        <span class="smalltext forum-decription">{$forum['description']}</span>

        <div class="forum-meta-card">

            <div class="forum-infocard-meta">

                <div class="forum-details-meta">

                    <span> Temas: </span>

                    <span> {$threads}{$unapproved['unapproved_threads']} </span>

                </div>

                <div class="forum-details-meta">

                    <span> Respuestas: </span>

                    <span> {$posts}{$unapproved['unapproved_posts']} </span>

                </div>

            </div>

        </div>

        <div class="sub-forum">

            {$subforums}

        </div>{$modlist}

    </div>

    <div class="forum-info flex-center">

        <div class="forum-infocard">

            <div class="forum-details">

                <span> Temas: </span>

                <span> {$threads}{$unapproved['unapproved_threads']} </span>

            </div>

            <div class="forum-details">

                <span> Respuestas: </span>

                <span> {$posts}{$unapproved['unapproved_posts']} </span>

            </div>

        </div>

    </div>

    {$lastpost}

</div>

Aquí te comento, lo que me sale, pero no me sale lo que has publicado en este tutorial. Agradeceria que cuando tuvieras un tiempo, le hecharas un ojo a eso, y me comentaras donde puedo ubicarlo, pues me sale así...

[Imagen: Jtv3pXy.png]

**2,958** · 13 January 2024, 23:20

0

Te recomiendo crear un tema de soporte con un título descriptivo para que los usuarios con el mismo problema puedan resolver de cierto modo su mismo problema o similares, ya que estas creando en la zona plugins y se está revolviendo la información.

Te voy a responder algo rápido, es cosa de revisar las plantillas únicamente, como son diferentes deberás hacer varios cambios, el primero y más sencillo es la parte del foro que deberás acomodar de este modo, para este tema exclusivamente:

Plantilla : forumbit_depth2_forum_lastpost

Código: ( Seleccionar Todo )

<div class="forum-lastpost">

    <div class="forum-lastpost-inner">

        <div class="lastpost-avatar"><avatarep_uid_[{$lastpost_data['lastposteruid']}]></div>

        <div class="lastpost-info">

            <div class="lastpost-sub">

                <a href="{$lastpost_link}" title="{$full_lastpost_subject}"><strong>{$lastpost_subject}</strong></a>

            </div>

            <div class="time-auth">

                <div class="lastpost-date">

                    {$lastpost_date}

                </div>

                <div class="dot flex-center"></div>

                <div class="lastpost-author"><span>by</span> <a href="#">{$lastpost_profilelink}</a>

                </div>

            </div>

        </div>

    </div>

</div>

Como puedes ver el autor del tema ya tenía asignado un div para el avatar sólo era acomodarlo en su zona y ya estaba, te recomiendo usar el mismo para el depth1, ya que por defecto lo puso simple, pero debería poderse modificar o en otro caso quedar bien por defecto.

Lo que yo hice fue acomodar para el tema default y basados en el mismo, pero en cada tema deben realizarse ciertos ajustes, y más aún si tienes la versión nueva del sistema que ha cambiado bastante.

Pero de momento eso es lo que he revisado así en un tiempillo libre que tuve hoy.

Saludos...

Posibles temas similares…
Tema		Autor	Respuestas	Vistas	Último mensaje
	[Tutorial] Poner imagen a los foros ( No Ficons ) en MyBB 1.8	ZEUZ01	3	1,749	21 February 2020, 22:53 Último mensaje: blongso
	[Tutorial] Crear menu en tabs en tus foros.	Whiteneo	9	1,619	29 December 2019, 12:48 Último mensaje: Adfe
	[Videotutorial] Crear temas en mybb 1.8.x	Whiteneo	18	2,220	29 October 2019, 05:28 Último mensaje: Whiteneo
	[Tutorial] NinjaFirewall Para foros Mybb	ZEUZ01	0	429	17 June 2019, 07:49 Último mensaje: ZEUZ01
	[Tutorial] Foros al estilo VBulletin	Yadomi	6	3,083	1 July 2018, 21:31 Último mensaje: spyke
	[Videotutorial] Personalizar imagen de los foros (Ficons) en MyBB 1.8	rcruz37	8	3,802	31 January 2018, 05:19 Último mensaje: #Taylor
	Estilizar plugin avatar en temas y foros 2.8.3	Whiteneo	9	2,422	8 December 2017, 19:46 Último mensaje: happy2007
	[Tutorial] Pasar temas (themes) a mybb 1.8.10	Whiteneo	4	1,805	1 June 2017, 01:39 Último mensaje: Whiteneo
	[Tutorial] Poner anuncios en mis foros	Whiteneo	5	2,414	23 November 2015, 20:31 Último mensaje: TaurusZDK
	[Tutorial] Como instalar temas en MyBB	Whiteneo	1	2,091	23 October 2015, 01:56 Último mensaje: Whiteneo