Advertisement:

Author Topic: Como puedo hacer que el avatar tenga un borde que cambie al subir de rango.  (Read 672 times)

Offline elfenix70

  • Newbie
  • *
  • Posts: 3
Hola a todos los que hacen posible este sitio. Quisiera me ayudaran a colocarle un borde al avatar y que este cambie al subir de rango. Adjunto los bordes:


Adicionalmente a estos marcos les acompañan unas chapas con los rangos, las cuales si supe colocar y cambian al llegar los mensajes al conteo preestablecido.


Igualmente, se tienen las chapas para los rangos del staff:


Espero me puedan ayudar para con este caso.

Saludos

ELFENIX70

Offline Gluz

  • Local Moderator
  • Sr. Member
  • *
  • Posts: 945
  • Gender: Male
Hay varias formas en que se puede hacer eso, pero se me ocurre que se puede usar como base lo que hace el MOD SimpleColorizer, solo que en vez de poner el color en el nombre de usuario, hacerlo en un marco alrededor del avatar, aunque necesitaría probar para decirte si mi idea funciona o no.

También puede ser que agregando el ID del rango como clase en el avatar y por medio de reglas CSS poner el marco adecuado sobre el avatar.
Need help with PHP, HTML, CSS, Themes or MODs?

Quote
Think in spanish, habla en inglés.

Offline elfenix70

  • Newbie
  • *
  • Posts: 3
Hay varias formas en que se puede hacer eso, pero se me ocurre que se puede usar como base lo que hace el MOD SimpleColorizer, solo que en vez de poner el color en el nombre de usuario, hacerlo en un marco alrededor del avatar, aunque necesitaría probar para decirte si mi idea funciona o no.

También puede ser que agregando el ID del rango como clase en el avatar y por medio de reglas CSS poner el marco adecuado sobre el avatar.

Gracias por responder, espero me puedas ayudar para con esto. Gracias de antemano.

Offline Gluz

  • Local Moderator
  • Sr. Member
  • *
  • Posts: 945
  • Gender: Male
Muy bien, ya tengo mas o menos algo como podría quedar bien, solo debes crear las imágenes de los marcos del tamaño que van a ir, en formato PNG con transparencia para que se vea el avatar por debajo.

Ésto lo probé con un marco de 163x210 para poner sobre un avatar de 150x200. Si en tu foro son de diferente tamaño, hay que ajustar un poco los valores del CSS para que quede bien alineado.

Hay que tomar en cuenta también que si el avatar es mas pequeño que el tamaño máximo, se va a ver mal, porque por defecto SMF no estirla los avatares, los pone en la esquina superior izquierda y por tanto no quedará con el marco, ya que ese es de tamaño fijo.

Las imágenes deben llamarse group_[número de ID del grupo] (por ejemplo, administrador es 1 por lo que quedaría como group_1.png, y así cada grupo tiene su ID, ese número es el que debe llevar). Esas imágenes debes subirlas al FTP de tu foro al directorio /Themes/tu_tema/images/ que es de donde se cargan las imágenes del tema.

Luego de eso hay que editar el archivo /Themes/tu_tema/css/index.css y agregar al final lo siguiente:
Code: [Select]
img.avatar {
border-radius: 30px;
position: relative;
left: 7px;
margin-top: -203px !important;
float: none !important;
}

img.avatars {
position: relative;
z-index: 10;
}

#main_admsection #basicinfo span.avatars {
float: right;
}

span.avatars {
display: grid;
}


Luego de eso, editar el archivo /Sources/Load.php, buscar lo siguiente:
Code: [Select]
// First do a quick run through to make sure there is something to be shown.
Y reemplazarlo con ésto:
Code: [Select]
$memberContext[$user]['avatar']['image'] = '<span class="avatars"><img class="avatars" src="' . $settings['images_url'] . '/groups_' . $profile['id_group'] . '.png" />' . $memberContext[$user]['avatar']['image'] . '</span>';

// First do a quick run through to make sure there is something to be shown.
Need help with PHP, HTML, CSS, Themes or MODs?

Quote
Think in spanish, habla en inglés.

Offline elfenix70

  • Newbie
  • *
  • Posts: 3
Estimado amigo Gluz, muchísimas gracias por tu aporte, en este momento me pondré a hacer los cambios que me recomiendas. Te mantendré informado de como me fue.