¿Supiste lo que acaba de lanzar LagriHost? Sí, como lo estabas esperando, ahora vendemos Web Hosting y Dominios. Conoce más :)


Calificación:
  • 0 voto(s) - 0 Media
  • 1
  • 2
  • 3
  • 4
  • 5
TUTORIAL Tipsy al estilo facebook
#1
Post 
0
Hola!

Tal vez has visto en el foro en cuando pones el mouse sobre links o imágenes que le sale un globito con color negro y con gravedad, a pedido de uno de los usuarios vamos a dejar el tutorial de como hacerlo Guiño

1. Nos bajamos los recursos que subiremos a nuestro foro por el FTP:

.zip   Recursos Tipsy - LagriHost.zip (Tamaño: 3.3 KB / Descargas: 9)

2. Entramos al Panel de Administración → Estilos y plantillas → Plantillas → Tu plantilla → Plantillas sin grupo → headerinclude → Buscamos:

Código PHP:
{$stylesheets

Abajo agregamos:

Código PHP:
<link type="text/css" rel="stylesheet" href="{$mybb->settings['bburl']}/tipsy.css" /> 

* Opcionalmente, el código CSS del Tipsy lo podés agregar al global.css y saltarse este paso.

3. Ahora como último paso, agregaremos el .js y activamos así el tipsy. Seguimos el paso anterior (paso 2) y buscamos:

Código PHP:
{$stylesheets

Y abajo agregamos:

Código PHP:
<script type="text/javascript" src="{$mybb->settings['bburl']}/jscripts/tipsy.js"></script>
<
script type='text/javascript'
jQuery.noConflict();
jQuery(function() {
jQuery("a").tipsy({gravityjQuery.fn.tipsy.autoNS});
jQuery("img").tipsy({gravityjQuery.fn.tipsy.autoNS});
  });
</
script

Las rutas para subir los recursos es (en el FTP):
  • tipsy.css → En la carpeta public_html
  • tipsy.js → En la carpeta public_html → jscripts
Es todo, espero les sirva Pulgar para arriba
Reglas de LagriHost | WIKI/Ayuda-FAQ | Nuestro Equipo | Solicita tu Hosting en 7 Pasos
No doy soporte por MP! Para eso esta el foro Guiño


[Imagen: banner-colabora.gif][Imagen: 8mt2wBp.jpg]

#2
0
Gracias si me funciono, despues de muchos intentos. Sonreir

#3
0
gracias por el aporte voy a probar en mi foro a ver que tal me va ^^

#4
0
gracias por este tutorial amigo
la música nó se escucha con los oídos, sino con el corazón

#5
0
segui los paso al pie de la letra y aun asi no se ve el nuevo tipsy

#6
0
(16-11-2013, 10:12 PM)DarkEternity escribió: segui los paso al pie de la letra y aun asi no se ve el nuevo tipsy

Si después de agregarlo y darle F5 no funciona, un .js debe estar causando conflicto.
Reglas de LagriHost | WIKI/Ayuda-FAQ | Nuestro Equipo | Solicita tu Hosting en 7 Pasos
No doy soporte por MP! Para eso esta el foro Guiño


[Imagen: banner-colabora.gif][Imagen: 8mt2wBp.jpg]

#7
0
este es mi HeaderInclude
Código PHP:
<link rel="alternate" type="application/rss+xml" title="{$lang->latest_threads} (RSS 2.0)" href="{$mybb->settings['bburl']}/syndication.php" />
<
link rel="alternate" type="application/atom+xml" title="{$lang->latest_threads} (Atom 1.0)" href="{$mybb->settings['bburl']}/syndication.php?type=atom1.0" />
<
meta http-equiv="Content-Type" content="text/html; charset={$charset}/>
<
meta http-equiv="Content-Script-Type" content="text/javascript" />
<
script type="text/javascript" src="{$mybb->settings['bburl']}/jscripts/prototype.js?ver=1603"></script>
<
script type="text/javascript" src="{$mybb->settings['bburl']}/jscripts/general.js?ver=1603"></script>
<
script type="text/javascript" src="{$mybb->settings['bburl']}/jscripts/popup_menu.js?ver=1600"></script>
{
$stylesheets}
<
script type="text/javascript" src="{$mybb->settings['bburl']}/jscripts/tipsy.js"></script>
<
script type='text/javascript'
jQuery.noConflict();
jQuery(function() {
jQuery("a").tipsy({gravityjQuery.fn.tipsy.autoNS});
jQuery("img").tipsy({gravityjQuery.fn.tipsy.autoNS});
  });
</
script
</
script
<
script type="text/javascript">
<!--
    var 
cookieDomain "{$mybb->settings['cookiedomain']}";
    var 
cookiePath "{$mybb->settings['cookiepath']}";
    var 
cookiePrefix "{$mybb->settings['cookieprefix']}";
    var 
deleteevent_confirm "{$lang->deleteevent_confirm}";
    var 
removeattach_confirm "{$lang->removeattach_confirm}";
    var 
loading_text '{$lang->ajax_loading}';
    var 
saving_changes '{$lang->saving_changes}';
    var 
use_xmlhttprequest "{$mybb->settings['use_xmlhttprequest']}";
    var 
my_post_key "{$mybb->post_code}";
    var 
imagepath "{$theme['imgdir']}";
// -->
</script>





{
$newpmmsg

y agregue el css directo al global
Código PHP:
.tipsy font-size10pxpositionabsolutepadding5pxz-index100000; }
  .
tipsy-inner background-color#000; color: #FFF; max-width: 200px; padding: 5px 8px 4px 8px; text-align: center; }

  /* Rounded corners */
  
.tipsy-inner border-radius3px; -moz-border-radius3px; -webkit-border-radius3px; }
  
  
/* Uncomment for shadow */
  /*.tipsy-inner { box-shadow: 0 0 5px #000000; -webkit-box-shadow: 0 0 5px #000000; -moz-box-shadow: 0 0 5px #000000; }*/
  
  
.tipsy-arrow positionabsolutewidth0height0line-height0border5px dashed #000; }
  
  /* Rules to colour arrows */
  
.tipsy-arrow-border-bottom-color#000; }
  
.tipsy-arrow-border-top-color#000; }
  
.tipsy-arrow-border-left-color#000; }
  
.tipsy-arrow-border-right-color#000; }
  
    
.tipsy-.tipsy-arrow top0pxleft50%; margin-left: -5pxborder-bottom-stylesolidborder-topnoneborder-left-colortransparentborder-right-colortransparent; }
    .
tipsy-nw .tipsy-arrow top0left10pxborder-bottom-stylesolidborder-topnoneborder-left-colortransparentborder-right-colortransparent;}
    .
tipsy-ne .tipsy-arrow top0right10pxborder-bottom-stylesolidborder-topnone;  border-left-colortransparentborder-right-colortransparent;}
  .
tipsy-.tipsy-arrow bottom0left50%; margin-left: -5pxborder-top-stylesolidborder-bottomnone;  border-left-colortransparentborder-right-colortransparent; }
    .
tipsy-sw .tipsy-arrow bottom0left10pxborder-top-stylesolidborder-bottomnone;  border-left-colortransparentborder-right-colortransparent; }
    .
tipsy-se .tipsy-arrow bottom0right10pxborder-top-stylesolidborder-bottomnoneborder-left-colortransparentborder-right-colortransparent; }
  .
tipsy-.tipsy-arrow right0top50%; margin-top: -5pxborder-left-stylesolidborder-rightnoneborder-top-colortransparentborder-bottom-colortransparent; }
  .
tipsy-.tipsy-arrow left0top50%; margin-top: -5pxborder-right-stylesolidborder-leftnoneborder-top-colortransparentborder-bottom-colortransparent; } 

#8
0
Buen aporte Guiño a muchos les sera Útil.q
Lo anterior es, probablemente, mi sarcasmo habitual y no refleja en absoluto mi opinión real.
Puedo incluir sutilezas de la rareza, suficiente como para aparecer a los incautos como un galimatías total.


Si te ayude o te gusto mi aporte no te olvides de poner [Imagen: plus_post.png]


[Imagen: b1WJVXP.png]

#9
0
Kevinex me podrias ayudar hay te deje la plantilla del Header include a ver si le puedes hechar un ojo a ver si encuentras el error

#10
0
(19-11-2013, 05:12 PM)DarkEternity escribió: Kevinex me podrias ayudar hay te deje la plantilla del Header include a ver si le puedes hechar un ojo a ver si encuentras el error

Disculpa la demora xD Me había olvidado del tema. Antes de esto:

Código PHP:
<script type="text/javascript" src="{$mybb->settings['bburl']}/jscripts/tipsy.js"></script

Agrega esto:

Código PHP:
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script

Debería funcionar, sino.. avisa Guiño
Reglas de LagriHost | WIKI/Ayuda-FAQ | Nuestro Equipo | Solicita tu Hosting en 7 Pasos
No doy soporte por MP! Para eso esta el foro Guiño


[Imagen: banner-colabora.gif][Imagen: 8mt2wBp.jpg]





Usuarios navegando en este tema:
1 invitado(s)


Forum software by © MyBB Theme © Kevinex & iAndrew 2018