[TIP] Cambiando el estilo del Activity Bar.

[TIP]: Cambiando el estilo del Activity Bar.

Muchas veces queremos que nuestro foro se vea lo mejor posible e incorporar la mayor tecnologia de la fabulosa web 2.0, obviamente por muchos factores (conocimiento; no saber buscar) no lo logramos.. Pero el día de hoy les traigo un nuevo estilo para su Activity Bar con toda la tecnología de CSS3 y hará que se vea muy genial su activity bar.

Manual:

Display.template.php:

Code: [Select]

// Show a activitybar.
if(!empty($modSettings['activitybar_enable']) && !empty($modSettings['activitybar_show_in_posts']))
echo '
<li class="smalltext"><br />', !empty($modSettings['activitybar_label']) ? $modSettings['activitybar_label'] : $txt['activitybar_standardlabel'], '
<div class="activity_holder" style="width: ', !empty($modSettings['activitybar_max_width']) ? $modSettings['activitybar_max_width'] : 139, 'px;"><div class="activity_bar" style="width: ', $message['activitybar']['width'], 'px;"><div class="activity_percentage">', $message['activitybar']['percentage'], '%</div></div></div></li>';

Modificar por:

Code: [Select]

// Show a activitybar.
         if(!empty($modSettings['activitybar_enable']) && !empty($modSettings['activitybar_show_in_posts']))
            echo '
                  <li class="smalltext">', !empty($modSettings['activitybar_label']) ? $modSettings['activitybar_label'] : $txt['activitybar_standardlabel'], ' (<span class="smalltext">', $message['activitybar']['percentage'], '%</span>)<br />
                  <div class="activity_holder" style="width: ', !empty($modSettings['activitybar_max_width']) ? $modSettings['activitybar_max_width'] : 139, 'px;"><div class="activity_bar" style="width: ', $message['activitybar']['width'], 'px;"></div></div></li>';
css/index.css

Code: [Select]


.activity_holder
{
height: 15px;
border: 1px solid #9BAEBF;
}

.activity_bar
{
height: 15px;
background: url(../images/theme/main_block.png) 90% -200px;
}

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

Modificar por:

Code: [Select]

.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_holders
{
   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;
}

Resultado del tip:


Espero que les sirva, aunque sea algo sencillo les gustará el estilo a algunos y anteriormente me lo han pedido.. Por eso lo publique

Saludos.

GEnial! Siempre compartiendo con la comunidad! +1 para vos!

Queda mucho mejor así!
+1 por el aporte!
Saludos!

Queda excelente, a muchos les servira!! Que buen estilo le diste +1

Saludos!

+1 se ve bastante bien!

Estupendo trabajo bro te quedo mas que bien y gracias por compartir

Simplemente impresionante Gracias

Muy buen tip JTX3 gracias +1

Saludos,azecktR12.

Está excelente, pueden ver un demo online en stickplays.net, pero yo le cambie los colores a azul xD

Genial!

Aplausos para ti queda mejor que default +1

gracias por tu post
excelente!!
de 10!!

muy interesante,

pero el unico Display.template.php que he encontrado es que esta en default, pero no encuentro la linea de "Activitybar"

que fichero es que se ha de modificar exactamente ??'

gracias ...

muy interesante,

pero el unico Display.template.php que he encontrado es que esta en default, pero no encuentro la linea de "Activitybar"

que fichero es que se ha de modificar exactamente ??'

gracias ...

SI el unico archivo Display.template.php esta en el theme default.
si no encuntrasa las lineas asegurate que el mod de la barra no haga tirado ningun error
y si no lo encuntras usa el bloc de notas ay una funcion para buscar palabras o lineas.

http://www.midescargawarez.com/index.php?topic=34.msg46#new
miren este post mio en el que no se ve como sale en el tuto algo hize mal?
Sale asi para todos los post...