Seleccionar idioma:
Realizar Donación - Mods Premium - Portfolio



Este sitio utiliza cookies propias y de terceros. Si continúa navegando consideramos que acepta el uso de cookies. OK Más Información.
* Como modificar tu Activity Bar - estilos CSS
  Leído 3212 veces
* Viendo el foro
 0 Usuarios y 1 Visitante están viendo este foro.


*
Autor: Kvev
Ago 26 2012
Gente, hoy les traigo una simple modificación del Mod Activity Bar; En google encontraras bastantes temas con respecto a esta modificacion pero en ninguna tendras los resultados concretos como te los doy a conocer ya que dicho MOD fue actualizado.

Comencemos.

Instalas el MOD antes mencionado Aqui!

Vamos a /Themes/default/Profile.template.php

Buscamos esto
Código: [Seleccionar]

if(!empty($modSettings['Activity_Bar_enable']) && !empty($modSettings['Activity_Bar_show_in_profile']) && !empty($context['Activity_Bar']))
echo '
<dt>', !empty($modSettings['Activity_Bar_label']) ? $modSettings['Activity_Bar_label'] : $txt['Activity_Bar_standardlabel'], ':</dt>
<dd><div class="activity_holder" style="width: ', !empty($modSettings['Activity_Bar_max_width']) ? $modSettings['Activity_Bar_max_width'] : 139, 'px;"><div class="activity_bar" style="width: ', $context['Activity_Bar']['width'], 'px;"><div class="activity_percentage smalltext">', $context['Activity_Bar']['percentage'], '%</div></div></div></dd>';


Reemplazamos por esto

Código: [Seleccionar]
if(!empty($modSettings['Activity_Bar_enable']) && !empty($modSettings['Activity_Bar_show_in_posts']) && !empty($message['Activity_Bar']))

echo '
<li class="smalltext">', !empty($modSettings['Activity_Bar_label']) ? $modSettings['Activity_Bar_label'] : $txt['Activity_Bar_standardlabel'], '<span class="smalltext">', $message['activitybar']['percentage'], ' <br />
<div class="activity_holder" style="width: ', !empty($modSettings['Activity_Bar_max_width']) ? $modSettings['Activity_Bar_max_width'] : 139, 'px;"><div class="activity_bar" style="width: ', $message['Activity_Bar']['width'], 'px;"><div class="activity_percentage">', $message['Activity_Bar']['percentage'] , '%</div></div></div></li>';

Luego nos vamos a /Themes/default/dispay.template.php

Buscamos esto
Código: [Seleccionar]
/* Activity Bar Mod */
if(!empty($modSettings['Activity_Bar_enable']) && !empty($modSettings['Activity_Bar_show_in_posts']) && !empty($message['Activity_Bar']))
echo '
<li class="activity_li">', !empty($modSettings['Activity_Bar_label']) ? $modSettings['Activity_Bar_label'] : $txt['Activity_Bar_standardlabel'], ':
<div class="activity_holder" style="width: ', !empty($modSettings['Activity_Bar_max_width']) ? $modSettings['Activity_Bar_max_width'] : 139, 'px;"><div class="activity_bar" style="width: ', $message['Activity_Bar']['width'], 'px;"><div class="activity_percentage">', $message['Activity_Bar']['percentage'], '%</div></div></div></li>';
/* Activity Bar Mod */

Reemplazamos por esto

Código: [Seleccionar]
/* Activity Bar Mod */
if(!empty($modSettings['Activity_Bar_enable']) && !empty($modSettings['Activity_Bar_show_in_posts']) && !empty($message['Activity_Bar']))

echo '
<li class="smalltext">', !empty($modSettings['Activity_Bar_label']) ? $modSettings['Activity_Bar_label'] : $txt['Activity_Bar_standardlabel'], '<span class="smalltext">', $message['activitybar']['percentage'], ' <br />
<div class="activity_holder" style="width: ', !empty($modSettings['Activity_Bar_max_width']) ? $modSettings['Activity_Bar_max_width'] : 139, 'px;"><div class="activity_bar" style="width: ', $message['Activity_Bar']['width'], 'px;"><div class="activity_percentage">', $message['Activity_Bar']['percentage'] , '%</div></div></div></li>';
                                                                                                                                                                                                                                           
/* Activity Bar Mod */

Por ultimos para modificar nustro estilo nos vamos a /sources/ActivityBar.php

Buscamos esto

Código: [Seleccionar]
<style type="text/css">
.activity_holder
{
height: 15px;
border: 1px solid #9BAEBF;
}

.activity_bar
{
height: 15px;
background: url('. $settings['default_theme_url'] .'/images/theme/main_block.png) 90% -200px;
}

.activity_percentage
{
height: 15px;
color: #333333;
text-align: center;
}
</style>

Reemplazamos por esto

Código: [Seleccionar]
<style type="text/css">
.activity_holder
{
  height: 15px;
  position: relative;
  background-color: #abb2bc;
  border-radius: 35px;
  -moz-border-radius: 35px;
  -webkit-border-radius: 35px;
  background: -webkit-gradient(linear, left bottom, left top, color-stop(0, #b6bcc6), color-stop(1, #9da5b0));
  background: -moz-linear-gradient(#9da5b0 0%, #b6bcc6 100%);
  -webkit-box-shadow: inset 0px 1px 2px 0px rgba(0, 0, 0, 0.5), 0px 1px 0px 0px #FFF;
  -moz-box-shadow: inset 0px 1px 2px 0px rgba(0, 0, 0, 0.5), 0px 1px 0px 0px #FFF;
  box-shadow: inset 0px 1px 2px 0px rgba(0, 0, 0, 0.5), 0px 1px 0px 0px #FFF;
  margin:0 auto;
}

.activity_bar
{
height: 15px;
   position: relative;
  display: block;
  overflow: hidden;
  -moz-border-radius: 35px;
  -webkit-border-radius: 35px;
  border-radius: 35px;
  -webkit-background-size: 44px 44px;
  background-color: #74d04c;
  background: -webkit-gradient(linear, 0 0, 44 44,
    color-stop(0.00, rgba(255,255,255,0.17)),
    color-stop(0.25, rgba(255,255,255,0.17)),
    color-stop(0.26, rgba(255,255,255,0)),
    color-stop(0.50, rgba(255,255,255,0)),
    color-stop(0.51, rgba(255,255,255,0.17)),
    color-stop(0.75, rgba(255,255,255,0.17)),
    color-stop(0.76, rgba(255,255,255,0)),
    color-stop(1.00, rgba(255,255,255,0))
  ), -webkit-gradient(linear, left bottom, left top, color-stop(0, #74d04c), color-stop(1, #9bdd62));
  background: -moz-repeating-linear-gradient(top left -30deg,
    rgba(255,255,255,0.17),
    rgba(255,255,255,0.17) 15px,
    rgba(255,255,255,0) 15px,
    rgba(255,255,255,0) 30px
  ), -moz-linear-gradient(#9bdd62 0%, #74d04c 100%);
  -webkit-box-shadow: inset 0px 1px 0px 0px #dbf383, inset 0px -1px 1px #58c43a;
  -moz-box-shadow: inset 0px 1px 0px 0px #dbf383, inset 0px -1px 1px #58c43a;
  box-shadow: inset 0px 1px 0px 0px #dbf383, inset 0px -1px 1px #58c43a;
  border: 1px solid #4c8932;
text-align: center;
  -webkit-animation: animate-stripes 2s linear infinite;
}

.activity_percentage
{
height: 15px;
color: #000;
font-size: 11px; 
font-weight: bold;
text-align: center;
}
.poster li.activity
{
   text-align: center;
}
</style>

Listo eso es todo, ahora lo que tienen que hacer es modificas el ActivityBar.php y jugas con css para que les quede a su gusto.

Aqui una prueba de como queda.

*


*


Aqui mismo les dejo esta aplicacion Online

http://border-radius.com/

Bueno, espero dejen comentarios y nos veremos en otro tutorial.


« Última Modificación: Agosto 26, 2012, 04:43:37 pm por jairo2608 »



Muy buen tutorial.

Muchas gracias por el aporte.  +10




La idea es que todos tengamos objetividad para aportar así como recibimos de esta comunidad!

Saludos.




Antes de nada muchas gracias por esta gran modificación, te cuento que acabo de hacer los cambios amigo y me sale la barra un poco rara, llevo como 80 mensajes quizás necesite más para ver los porcentajes no? Con la modificación original me marcaba 0.8 %. Como podría modificar las opciones para que suba el porcentaje y ver como queda?

Otra cosa, en el perfil ya no me aparece la actividad, ha desaparecido, al instalar por primera vez el mod, sin fallos en la instalación, si que salía la barra de actividad en el perfil pero ahora no.

Muchas gracias de antemano.

EDITO: He cambiado los valores de Marco de tiempo dentro de la configuración del MOD y jugando con esos valores, me ha marcado la barra 16% y de ahí ni cambio. También edite mi perfil y cambie el número de mensajes enviados, pero tampoco variaba la barra de actividad... espero que funcione correctamente. Me podrías explicar por favor como hace ese porcentaje? Realmente tengo 81 m3nsajes enviados y en Marco de tiempo lo tengo en "30".

Gracias.


« Última Modificación: Marzo 12, 2013, 06:57:37 pm por DaRKeN »




Url de tu sitio web?




Gracias por tu respuesta, www.darken.es




Amigo, en la parte del Profile.template.php al reemplazar eso se me desaparece y no se muestra la barra de actividad del Perfil, lo he dejado por defecto y ya se muestra igual que en los foros pero sale descentrado, me echas una mano?

Y otra cosa, como hiciste para que tenga ese diseño tan ordenado y separado? Como se llama ese MOD? O lo hiciste tu por tu cuenta.

Gracias y disculpa las molestias.


« Última Modificación: Marzo 23, 2013, 10:35:19 pm por DaRKeN »




Por lo visto ya no tienes un foro con smf.... el MOD se llama Profile like mybb




Muchas gracias por tu tutorial me sirvio de mucho amigo!

Y estoy totalmente de acuerdo con lo que dice DaRKeN, yo tengo 90 mensajes sin embargo no me muestra la actividad.

Agradecería que nos pases la configuracion de  administracion asi como tu lo tienes.

Saludos! :)




Solo debes modificarlo a 100 mensajes




Otros temas de su interes




Usuario:
Contraseña:
Sesión:
hermes bracelet replica, christian louboutin replica, van cleef and arpels replica, red bottoms replica, cartier love bracelet replica christian louboutin replica, christian louboutin replica, hermes bracelet replica,