[TIP] Centrar barra del Mod ActivityBar

Started by ^HeRaCLeS^, December 05, 2010, 05:37:01 PM

Previous topic - Next topic

^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:

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

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

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

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

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

// 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  ;)
^HeRaCLeS^
*¤×• Ni te molestes en enviarme un Mp porque el soporte lo doy solo por el foro •×¤*


SMFPersonal

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  ;)
^HeRaCLeS^
*¤×• Ni te molestes en enviarme un Mp porque el soporte lo doy solo por el foro •×¤*


SMFPersonal

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.
^HeRaCLeS^
*¤×• Ni te molestes en enviarme un Mp porque el soporte lo doy solo por el foro •×¤*


SMFPersonal

lean

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

^HeRaCLeS^

Quote from: Lean on December 06, 2010, 07:50:01 PM
Agregado al listado de tips!
Gracias por compartir con la comunidad.
Saludos

;)

Para eso estamos!!
^HeRaCLeS^
*¤×• Ni te molestes en enviarme un Mp porque el soporte lo doy solo por el foro •×¤*


SMFPersonal

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.
^HeRaCLeS^
*¤×• Ni te molestes en enviarme un Mp porque el soporte lo doy solo por el foro •×¤*


SMFPersonal

pablo24

#9
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  ;)

^HeRaCLeS^
*¤×• Ni te molestes en enviarme un Mp porque el soporte lo doy solo por el foro •×¤*


SMFPersonal

pablo24

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

^HeRaCLeS^

le agregue padding al activity_percentage dejandolo asi

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





Cualquier cosita por aca andamos.

Saludos ;)
^HeRaCLeS^
*¤×• Ni te molestes en enviarme un Mp porque el soporte lo doy solo por el foro •×¤*


SMFPersonal

enik


naanoh

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

saludos.

^HeRaCLeS^

Quote from: ^HeRaCLeS^ on December 09, 2010, 02:06:18 PM
le agregue padding al activity_percentage dejandolo asi

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





Cualquier cosita por aca andamos.

Saludos ;)
^HeRaCLeS^
*¤×• Ni te molestes en enviarme un Mp porque el soporte lo doy solo por el foro •×¤*


SMFPersonal

naanoh

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

saludos.

^HeRaCLeS^

^HeRaCLeS^
*¤×• Ni te molestes en enviarme un Mp porque el soporte lo doy solo por el foro •×¤*


SMFPersonal

naanoh

#18
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^

Quote from: ^HeRaCLeS^ on April 01, 2011, 07:49:05 PM
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.
^HeRaCLeS^
*¤×• Ni te molestes en enviarme un Mp porque el soporte lo doy solo por el foro •×¤*


SMFPersonal

Advertisement: