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.
* [Tip.v2] Estilo elegante ActivityBar + animacion !
  Leído 4078 veces
* Viendo el foro
 0 Usuarios y 1 Visitante están viendo este foro.


*
Autor: Principiante1
Oct 03 2012
[TIP.v2]: Estilo elegante ActivityBar + animacion !

Hola amigos de Skm/Smfp ^-^ !

Hace mucho tiempo cuando estaba en eso de las creaciones de foros, siempre busque un estilo unico
para el mod Activity bar:
http://custom.simplemachines.org/mods/index.php?mod=1929
(enlace oficial)

toda la idea salio, en la publicacion de este post:
http://www.skinmod.eu/index.php?topic=3171.0

Al final veran algo parecido, pero lo cual no le quedaba bien a un usuario porque faltaba modificar el CSS
y muy aparte, ademas el Activitybar fue actualizado en su descarga oficial.

Y en esta ocacion lo compartire con ustedes para que puedan implementarlo en su foro,
sin mas aqui les dejare un mini-tutorial de como tener un estilo nuevo , elegante
y mas que todo funcional.
No soy un capo pero hay algunas cosas que las hago por instinto:


*




Necesitaremos:

-Display.template.php
-index.css
(del theme que usan)



En el Display.tempalte.php buscar:

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 */
Reemplazarlo por:

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="progress-bar blue stripes" style="width: ', !empty($modSettings['Activity_Bar_max_width']) ? $modSettings['Activity_Bar_max_width'] : 139, 'px;"><span style="width: ', $message['Activity_Bar']['width'], 'px;">', $message['Activity_Bar']['percentage'], '%</span></div></li>';
/* Activity Bar Mod */

Agregar al final del index.css :
Código: [Seleccionar]
.progress-bar {
        background-color: #7D7D7D;
        height: 25px;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
        border-radius: 5px;
        -moz-box-shadow: 0 1px 2px #000 inset, 0 1px 0 #444;
        -webkit-box-shadow: 0 1px 2px #000 inset, 0 1px 0 #444;
        box-shadow: 0 1px 2px #000 inset, 0 1px 0 #444;
padding: 3px;
text-align: left;
}

.progress-bar span {
        display: inline-block;
padding: 5px 0;
text-align: center;
        -moz-border-radius: 3px;
        -webkit-border-radius: 3px;
        border-radius: 3px;
        -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset;
        -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset;
        box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset;
        -webkit-transition: width .4s ease-in-out;
        -moz-transition: width .4s ease-in-out;
        -ms-transition: width .4s ease-in-out;
        -o-transition: width .4s ease-in-out;
        transition: width .4s ease-in-out;
color: #113347;
text-shadow: 0 1px 0 #8CD5F2;
font-weight: bold;
}
.blue span {
        background: #0087D5;
}

.stripes span {
        -webkit-background-size: 30px 30px;
        -moz-background-size: 30px 30px;
        background-size: 30px 30px;
        background-image: -webkit-gradient(linear, left top, right bottom,
                                                color-stop(.25, rgba(255, 255, 255, .15)), color-stop(.25, transparent),
                                                color-stop(.5, transparent), color-stop(.5, rgba(255, 255, 255, .15)),
                                                color-stop(.75, rgba(255, 255, 255, .15)), color-stop(.75, transparent),
                                                to(transparent));
        background-image: -webkit-linear-gradient(135deg, rgba(255, 255, 255, .15) 25%, transparent 25%,
                                                transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%,
                                                transparent 75%, transparent);
        background-image: -moz-linear-gradient(135deg, rgba(255, 255, 255, .15) 25%, transparent 25%,
                                                transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%,
                                                transparent 75%, transparent);
        background-image: -ms-linear-gradient(135deg, rgba(255, 255, 255, .15) 25%, transparent 25%,
                                                transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%,
                                                transparent 75%, transparent);
        background-image: -o-linear-gradient(135deg, rgba(255, 255, 255, .15) 25%, transparent 25%,
                                                transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%,
                                                transparent 75%, transparent);
        background-image: linear-gradient(135deg, rgba(255, 255, 255, .15) 25%, transparent 25%,
                                                transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%,
                                                transparent 75%, transparent);           

        -webkit-animation: animate-stripes 3s linear infinite;
        -moz-animation: animate-stripes 3s linear infinite;
}




@-webkit-keyframes animate-stripes {
   0% {background-position: 0 0;} 100% {background-position: 60px 0;}
}

@-moz-keyframes animate-stripes {
   0% {background-position: 0 0;} 100% {background-position: 60px 0;}
}

Con eso ya tendran su barra de progreso optimizado + movimiento, para lo que era antes:

el diseño no es tan prolijo verdad?

Como extra les dejo, aqui algunos css con mas colores a rayas:
http://sevenspark.com/free-stuff/css3-progress-bars

Bueno esto seria todo en este mini-tutorial, ya saben que cualquier cosita comentar en el post,
lo mismo para los que quieren cambiar de color a la barra, porque el color que yo le puse
solo es para muestra de ustedes, OJO al piojo no olvidar que aqui estamos utilizando css3
por lo que en todos los navegadores no se vera tan igual, no recomiendo explorer.
Los que ya siguieron el tutorial pueden dejar un post de sus foros, para dejarlo como demo.

Solo 2 ultimas cositas:
- Dejen sus comentarios asi alientan a seguir aprendiendo a este principiante
- Y Si van a distribuir este mini-tutorial ya saben de donde lo sacaron  +10

PD: un saludito para un buen amigo en la imagen  :P  !


« Última Modificación: Octubre 03, 2012, 08:21:59 pm por Principiante1 »



O por dios, que bello
enseguida lo voy a usar jojjojo, estaba esperando algo asi hace tiempo xdd




jajah muchas gracias por el comentario, si pues este tutorial
del ActivityBar esta rebuscado y pues hasta ahora no han indicado los pasos.
Por eso lo hice pensando en ustedes  +10


« Última Modificación: Octubre 03, 2012, 05:33:51 pm por Principiante1 »




jajah muchas gracias por el comentario, si pues este tutorial
del ActivityBar esta rebuscado y pues hasta no han indicado los pasos.
Por eso lo hice pensando en ustedes  +10
super super, ya lo instale y uff, exelentesimo
pero hay un pequeño problema
La barra no me queda centrata, me puedes ayudar?




No tienes celdas en tu foro?
haber deja un link de algun post para ver como te quedo




No tienes celdas en tu foro?
haber deja un link de algun post para ver como te quedo
http://pirated.es/reglamento-general/3/reglas-de-pirated/2/msg626#new
hay amigo y gracias por la ayuda




Busca esto:
Código: [Seleccionar]
<div class="progress-bar blue stripes" style="width: ', !empty($modSettings['Activity_Bar_max_width']) ? $modSettings['Activity_Bar_max_width'] : 139, 'px;"><span style="width: ', $message['Activity_Bar']['width'], 'px;">', $message['Activity_Bar']['percentage'], '%</span></div></li>';
Y reemplazalo por:
Código: [Seleccionar]
<div align=center><div class="progress-bar blue stripes" style="width: ', !empty($modSettings['Activity_Bar_max_width']) ? $modSettings['Activity_Bar_max_width'] : 139, 'px;"><span style="width: ', $message['Activity_Bar']['width'], 'px;">', $message['Activity_Bar']['percentage'], '%</span></div></div></li>';
con eso estara centrado, pero es algo raro, a ti no te sale el efecto animado  :o
PD: Ha creo que es la configuracion del mod, y todos tienen pocos mensajes  :D


« Última Modificación: Octubre 03, 2012, 05:23:19 pm por Principiante1 »




Muy bueno felicitaciones  8) 8)




Busca esto:
Código: [Seleccionar]
<div class="progress-bar blue stripes" style="width: ', !empty($modSettings['Activity_Bar_max_width']) ? $modSettings['Activity_Bar_max_width'] : 139, 'px;"><span style="width: ', $message['Activity_Bar']['width'], 'px;">', $message['Activity_Bar']['percentage'], '%</span></div></li>';
Y reemplazalo por:
Código: [Seleccionar]
<div align=center><div class="progress-bar blue stripes" style="width: ', !empty($modSettings['Activity_Bar_max_width']) ? $modSettings['Activity_Bar_max_width'] : 139, 'px;"><span style="width: ', $message['Activity_Bar']['width'], 'px;">', $message['Activity_Bar']['percentage'], '%</span></div></div></li>';
con eso estara centrado, pero es algo raro, a ti no te sale el efecto animado  :o
PD: Ha creo que es la configuracion del mod, y todos tienen pocos mensajes  :D
Ooouuc siii xd
hay quedo perfecto, muchas gracias, sos un capo




De nada adthz, un gusto poder ayudarles a todos y si supiera mas, les prometo
que les haria un foro personalizado a todos jajah
y como ya dije en el post:
No soy un capo pero hay algunas cosas que las hago por instinto:

Muchas gracias Gonza por el comentario amigo




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,