Topic: Modificacion del teme Modern City Theme By Smfsimple

June 17, 2013 - 04:00 16:00

En este tema les enseñare a modificar el social bar del tema

.
una muestra
http://servidornolimit.net/tutosmfsimple/
Empecemos:
1- Vamos a nuestra carpeta temas
2-Entramos a Modern_city_by_SMFSimple
3-Luego entramos a css
4-Ahí abrimos el archivo index.css
6- manos a la obra.

7- Buscamos lo siguiente

Code: [Select]

.share-square {
    -moz-transition: all 0.2s linear 0s;
    background: url(../images/social-icons.png) no-repeat scroll left top transparent;
    display: inline-block;
    height: 32px;
    line-height: 0;
    margin: 2px;
    width: 32px;
}

y lo remplazamos por

Code: [Select]

    -moz-transition: all 0.6s linear 0s;
    background: url(../images/social-icons.png) no-repeat scroll left top transparent;
    display: inline-block;
    height: 32px;
    line-height: 0;
    margin: 2px;
    width: 32px;
    -webkit-transition:-webkit-transform 0.5s,box-shadow 0.5s,opacity 0.5s;
    -o-transition-property:-o-transform,box-shadow 0.5s,opacity;
    -o-transition-duration:0.5s,0.5s,0.5s,0.5s,0.5s,0.5s;
    -moz-transition-property:-o-transform,box-shadow,opacity;
    -moz-transition-duration:0.5s,0.5s,0.5s,0.5s,0.5s,0.5s;
    transition-property:transform,box-shadow,opacity;
    transition-duration:0.5s,0.5s,0.5s,0.5s,0.5s,0.5s;
    opacity:0.7;
    box-shadow: 2px 2px 10px #000;
}

Luego abajo del } del primer código agregamos

Code: [Select]

.share-square:hover {
    -moz-transition: all 0.6s linear 0s;
    background: url(../images/social-icons.png) no-repeat scroll left top transparent;
    display: inline-block;
    height: 32px;
    line-height: 0;
    margin: 2px;
    width: 32px;
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
    opacity:1;
    box-shadow: 5px 5px 20px #000;
}

Y tadam ya tenemos nuestro bar social modificado.
- una muestra:
http://servidornolimit.net/tutosmfsimple/

**Reply #1** June 17, 2013 - 04:02 16:02

Podrias poner alguna imagen de como queda al inicio del post como para saber de que se trata?
salutes

**Reply #2** June 17, 2013 - 04:02 16:02

Quote from: Lean on June 17, 2013 - 04:02 16:02

Podrias poner alguna imagen de como queda al inicio del post como para saber de que se trata?
salutes

ok, ok

Ya esta

**Reply #3** June 17, 2013 - 04:18 16:18

A mira, esta bueno el efecto eh. Gracias por aportar! +10

**Reply #4** June 17, 2013 - 05:57 17:57

Ya se arreglo mi web para que lo vean

**Reply #5** June 17, 2013 - 08:51 20:51

Muy lindo efecto!

**Reply #6** June 17, 2013 - 08:54 20:54

Esta espectaculaaaaaaaaaaaaaaaaaaaaaaaaaaaaaar!

**Reply #7** June 17, 2013 - 09:10 21:10

Quote from: Lean on June 17, 2013 - 08:51 20:51

Muy lindo efecto!

Gracias

Quote from: 4kstore on June 17, 2013 - 08:54 20:54

Esta espectaculaaaaaaaaaaaaaaaaaaaaaaaaaaaaaar!

Gracias

**Reply #8** June 17, 2013 - 09:55 21:55

muy bueno felicitaciones, gracias por compartit

**Reply #9** June 18, 2013 - 12:21 12:21

Quote from: EduardO on June 17, 2013 - 09:55 21:55

muy bueno felicitaciones, gracias por compartit

gracias

Modificacion del teme Modern City Theme By Smfsimple