• ¡Bienvenido a XenFácil!

    Estás viendo el sitio como Invitado. Para poder participar en este sitio

    y obtendrás privilegios adicionales, acceso a otras áreas y mucho mas.

    ¡Es gratis!


    ¿Ya eres miembro? Inicia sesión

Mod.Plantilla Aviso Flotante Css no carga servidor...

lenin

lenin

XenForoUser
bueno les dejo esta alerta flotante espero les sirva de algo...
no carga el servidor y no requiere de imagenes....
admincp /tu estilo/plantillas./extra.css

agregas:

Insertar CODE, HTML o PHP: 
#lwflotante {
    background: none repeat scroll 0 0 @primaryMedium;
    border: 2px solid @primaryDark;
    border-radius: 3px 3px 3px 3px;
    bottom: 62px;
    box-shadow: 0 1px 4px   @tooltipBackground  0 1px 0;
    color: #FFFFFF;
    font-family: Tahoma;
    font-size: 11px;
    height: auto;
    line-height: 16px;
    opacity: 0.8;
    padding: 10px;
    position: fixed;
    right: 82px;
    text-decoration: none;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3);
    width: 260px;
    z-index: 30000;
}
#lwflotante a {
    color: #FFFFFF;
    font-weight: bold;
    text-decoration: none;
}
#lwflotante:hover {
    opacity: 1;
}

guardas luego vas a:

admicp/tu estilo/plantillas/login_bar,
ahi buscas
Insertar CODE, HTML o PHP: 
<span class="helper"></span> y por debajo agregas:
por debajo agregas:
Insertar CODE, HTML o PHP: 
<div>
<div id="lwflotante">
Bienvenido a kpumco.com | mi sitio!
<br>
por favor registrate
<a title="" href="register/">Register </a>
ó
<a title="" href="login/">inicia sesión </a>
para poder ver todas las secciones
</div>
</div>
y listo...
puedes ir modificando el codigo que pones en login_bar a tu gusto =)
espero les sirva.. demo:;

http://demo.kpumco.com/index.php?threads/test.1/#post-1
es el de la derecha de abajo...

Pantallazo del 2012-04-11 06:40:46.png
 
lenin

lenin

XenForoUser
le dejo otra variante que me cree..
Pantallazo del 2012-04-11 07:05:44.png


solo es de que juegen un poco con la configuracion....

ahi les dejo el codigo..

Insertar CODE, HTML o PHP: 
#lwflotante {
    background: none repeat scroll 0 0 @primaryMedium;
    border: 2px solid @primaryDark;
    border-radius: 40px 40px 40px 40px;
    bottom: 62px;
    box-shadow: 0 1px 4px @tooltipBackground, 0 1px 0;
    color: #FFFFFF;
    font-family: Tahoma;
    font-size: 11px;
    height: auto;
    line-height: 16px;
    opacity: 0.8;
    padding: 10px;
    position: fixed;
    right: 82px;
    text-decoration: none;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3);
    width: 260px;
    z-index: 30000;
}
#lwflotante a {
    color: #FFFFFF;
    font-weight: bold;
    text-decoration: none;
}
#lwflotante:hover {
    opacity: 1;
}
 
 
#lwflotante:after{
    content:'';
    background:@primaryMedium;
    height:30px;
    width:30px;
    border-radius:15px;
    position:absolute;
    display:block;
    right:20px;
    bottom:-35px;
    border: 2px solid @primaryDark;
    box-shadow: 0 1px 4px @tooltipBackground, 0 1px 0;
}
 
#lwflotante:before{
    content:'';
    background:@primaryMedium;
    height:20px;
    width:20px;
    border-radius:10px;
    position:absolute;
    display:block;
    right:0;
    bottom:-55px;
    border: 2px solid @primaryDark;
    box-shadow: 0 1px 4px @tooltipBackground, 0 1px 0;
}

si ustedes gustan pueden agregar background :url(ruta de imagen);
bueno es a su gusto a mi me gusta como queda asi.. =)
 
Hay que estar conectado o registrado para responder aquí.
Arriba