Topic: [TIP] Centrar barra del Mod ActivityBar

[^HeRaCLeS^]

Centrar barra del Mod ActivityBar

Debido a la gran cantidad de mensajes que eh leido acerca de como centrar la barra del ActivityBar,
me decidi a hacer este tip.
Vamos a tener que modificar tres archivos para lograrlo.

• index.css
• Display.template
• Profile.template.php

Empecemos con el index.css

Buscar:

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;
}

Remplazar por:

Code: [Select]

.activity_holder
{
height: 15px;
border: 2px solid #9BAEBF;
  margin:0 auto;
}
.activity_holders
{
height: 15px;
border: 2px solid #9BAEBF;
}
.activity_bar
{
height: 15px;
background: #00FF00;
}

.activity_percentage
{
height: 15px;
color: #000000;
text-align: center;
}
.poster li.activity
{
text-align: center;
}

En el display.template.php

Buscar:

Code: [Select]

// Show a activitybar.
if(!empty($modSettings['activitybar_enable']) && !empty($modSettings['activitybar_show_in_posts']))
echo '
<li><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 smalltext">', $message['activitybar']['percentage'], '%</div></div></div></li>';


Remplazar por:

Code: [Select]

// Show a activitybar.
if(!empty($modSettings['activitybar_enable']) && !empty($modSettings['activitybar_show_in_posts']))
echo '
<li class="activity">', !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 smalltext">', $message['activitybar']['percentage'], '%</div></div></div></li>';


Por ultimo el profile.template.php

Buscar:

Code: [Select]

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


Remplazar por:

Code: [Select]

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


Espero que les sea de utilidad.


Saludos  ;)

[adthz]

Buen tip amigo Pero Fueras posteado esto antes xP Yo solo cambio el grandor de la barra y lo acomodo de manera tal que se ve como si estuviera en el medio xP


Saludos

[^HeRaCLeS^]

Gracias.
No se como queda la manera en que decis, ¿Centra todo, barra y texto dentro de ella?

Podrias postear aqui tu metodo, para que tengan otra opcion mas para lograrlo!!

Saludos 

[pablo24]

Me funciona en que el rectangulo queda centrado,
¿Pero no hay alguna forma de que el porcentaje también esté centrado?

[^HeRaCLeS^]

El texto del porcentaje??

se supone que con esos cambios te tiene que quedar en texto del porcentaje centrado.

[lean]

Agregado al listado de tips!
Gracias por compartir con la comunidad.
Saludos

[^HeRaCLeS^]

Agregado al listado de tips!
Gracias por compartir con la comunidad.
Saludos

 

Para eso estamos!!

[pablo24]

Que raro, por que hice todos los cambios y no me quedó centrado

[^HeRaCLeS^]

Proba vaciando la cache de tu foro y navegador.
Si no lo solucionas con eso, adjuntame los archivos quq modificaste para que le eche una mirada.

[pablo24]

Los que modifique fueron el index.css y el display.template ya que no lo use para el perfil.

Acá te dejo los archivos para que puedas ver como están:

Display.template

Index.css

Para descargarlos.
Presióna aquí


Espero que me puedas ayudar

De antemano Gracias

[^HeRaCLeS^]

Fijate con este index.css a ver si queda mejor.
Espero que te sirva.

Saludos 

[pablo24]

Ahí funcionó, ¿¿que hiciste para lograrlo??

[^HeRaCLeS^]

le agregue padding al activity_percentage dejandolo asi

Code: [Select]

.activity_percentage
{
height: 15px;
color: #000000;
text-align: center;
padding: 0em 0em 0em 4.5em;
}

Cualquier cosita por aca andamos.

Saludos

[enik]

Buen tip heracles 

[naanoh]

ami me paso lo mismo que el  otro chico el porcentaje no se me ve centrado. me decis que modificar?

saludos.

[^HeRaCLeS^]

le agregue padding al activity_percentage dejandolo asi

Code: [Select]

.activity_percentage
{
height: 15px;
color: #000000;
text-align: center;
padding: 0em 0em 0em 4.5em;
}

Cualquier cosita por aca andamos.

Saludos

[naanoh]

lo hice el tema es que se ven toods los % bien menos el 100% que se ve corrido.

saludos.

[^HeRaCLeS^]

Deja un link donde se pueda ver

[naanoh]

Aca te dejo la imagen



saludos, del 0.0% al 10% digamos que se ve bien pero a medida que va aumentando la barra verde cada ves mas a la derecha se mueve. saludos.

[^HeRaCLeS^]

Deja un link donde se pueda ver

Osea un link donde pueda ver el codigo, no una imagen donde solo veo lo que pasa pero no puedo ver el codigo.