23 May 2014, 03:06
1
Hola seguramente has querido darle un buen estilo a esos pequeños iconos llamados Tooltips por eso me he dedicado a hacer este pequeño tutorial, aclaro que el archivo no es mio ni las cosas que en el contiene, sin embargo este tutorial esta completamente elaborado por mi @ Brown
Primero descargamos:
Registrate o inicia tu sesión para ver este contenido
Extraemos el archivo Winrar CSS3Tooltips.zip y adentro aparecerán
Aquí puedes ir abriendo cada "Index" y ver la animación que mas te guste.Cuando ya tengas el Index que quieras sube la carpeta Images a tu FTP, si te pide combinar la carpeta le das que "si"
Ahora copia el CSS del index que escogiste y lo pegas en tu global.css
Ejemplo:
Ahora abre el Index que escogiste (en mi caso "Index2.html", copia y pega todo el código en la plantilla "Index" de tu estilo, pero recuerda también editar las url de los iconos, eso se encuentra en la Index que escogiste, editala y cámbialo por los tuyos
Ejemplo:
Abro "Index2.html" y edito estas opciones
Por estas
Ahora solo faltaría acomodar tu código, eliminando cosas que no te gusten de el, editalo a tu gusto pero recuerda tener precaución para no estropearlo
Bueno, aquí les dejo una captura del resultado que obtuve, edite ciertas cosas que no me gustaban
Registrate o inicia tu sesión para ver este contenido
:D cualquier duda pueden colocarlas acá mismo ^^
Primero descargamos:
Registrate o inicia tu sesión para ver este contenido
Extraemos el archivo Winrar CSS3Tooltips.zip y adentro aparecerán
Cita:*CSS
*Images
*Index.html
*Index2.html
*Index3.html
*Index4.html
Aquí puedes ir abriendo cada "Index" y ver la animación que mas te guste.Cuando ya tengas el Index que quieras sube la carpeta Images a tu FTP, si te pide combinar la carpeta le das que "si"
Ahora copia el CSS del index que escogiste y lo pegas en tu global.css
Ejemplo:
Cita:Si yo escogí Index2.html me tengo que ir a la carpeta CSS y copiar todo el código de (preferiblemente abrirlo con Notepad++) Style2.css
Ahora abre el Index que escogiste (en mi caso "Index2.html", copia y pega todo el código en la plantilla "Index" de tu estilo, pero recuerda también editar las url de los iconos, eso se encuentra en la Index que escogiste, editala y cámbialo por los tuyos
Ejemplo:
Abro "Index2.html" y edito estas opciones
Código PHP: ( Seleccionar Todo )
<li><a class="tt-gplus" href="#"><span>Google Plus</span></a></li>
<li><a class="tt-twitter" href="#"><span>Twitter</span></a></li>
<li><a class="tt-dribbble" href="#"><span>Dribbble</span></a></li>
<li><a class="tt-facebook" href="#"><span>Facebook</span></a></li>
<li><a class="tt-linkedin" href="#"><span>LinkedIn</span></a></li>
<li><a class="tt-forrst" href="#"><span>Forrst</span></a></li>
Por estas
Código PHP: ( Seleccionar Todo )
<li><a class="tt-gplus" href="AQUI LA URL DEL GOOGLE PLUS DE TU FORO"><span>Google Plus</span></a></li>
<li><a class="tt-twitter" href="AQUI LA URL DEL TWITTER DE TU FORO"><span>Twitter</span></a></li>
<li><a class="tt-dribbble" href="AQUI LA URL DEL DRIBBBLE DE TU FORO"><span>Dribbble</span></a></li>
<li><a class="tt-facebook" href="AQUI LA URL DEL FACEBOOK DE TU FORO"><span>Facebook</span></a></li>
<li><a class="tt-linkedin" href="AQUI LA URL DEL LINKEDEN DE TU FORO"><span>LinkedIn</span></a></li>
<li><a class="tt-forrst" href="AQUI LA URL DEL FORRST DE TU FORO"><span>Forrst</span></a></li>
Ahora solo faltaría acomodar tu código, eliminando cosas que no te gusten de el, editalo a tu gusto pero recuerda tener precaución para no estropearlo
Bueno, aquí les dejo una captura del resultado que obtuve, edite ciertas cosas que no me gustaban
Registrate o inicia tu sesión para ver este contenido
:D cualquier duda pueden colocarlas acá mismo ^^
Última modificación: 23 May 2014, 03:08 por Brown.