[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 Expand


.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 Expand


.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 Expand


// 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 Expand


// 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 Expand


// 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 Expand


// 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 Expand

.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 Expand

.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.

[naanoh]

el code es el mismo que vos pusistes que agregemos. total mente el mismo que el del otro chico. ubicado en el mismo lugar.

[^HeRaCLeS^]

Me parece que no nos entendemos. ¿Queres o no queres Ayuda?
Si es asi hay dos opciones, o colaboras con las cosas que te pedimos para ayudarte o te arreglas solo.
Ya no se de que manera decirte que necesito ver el codigo en tu web, ya se que pusiste lo mismo que ahi dice, pero no todos los themes son iguales y no en todos lleva los mismos porcentajes, necesito poder modificar el codigo directamente desde tu web para poder decirte exactamente que es lo que tenes que hacer.

[naanoh]

bueno primero tranquilito y si quiero ayuda ahora te muestro elcodigo u.u

[kevinava96]

a  mi no me sale la barra de actividad, que agoooo