Barra Flotante que invita a registrarse

[EgAr]

MOD EMPAQUETADO , CON ALGUNAS MODIFICACIONES Y MANEJO DE LA ADMINISTRACION:
Floating Bar Mod / Mod de Barra Flotante

Esta muy de moda en otros sistemas de foros un Mod que crea una barra flotante que invita a registrarse en el foro.  He logrado implementar un "scrip" que encontré en Dynamicdrive.com en nuestro querido SMF.

El Scrip original se encuentra en:
http://www.dynamicdrive.com/dynamicindex17/floatbar.htm

Esta implementación la he realizado en el theme default, pero es totalmente posible de hacer en otros themes, quizas haciendo alguna pequeña modificación.

¿Como hacerlo?

1.- Editar el archivo index.template.php

Buscar:

Code Select Expand

      // ]]></script>
</head>

Reemplazar por:

Code Select Expand

      // ]]></script>';
   // Barra Flotante
   echo '
<script type="text/javascript">

/***********************************************
* Floating Top Bar script- © Dynamic Drive (www.dynamicdrive.com)
* Sliding routine by Roy Whittle (http://www.javascript-fx.com/)
* This notice must stay intact for legal use.
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/

var persistclose=0 //set to 0 or 1. 1 means once the bar is manually closed, it will remain closed for browser session
var startX = 30 //set x offset of bar in pixels
var startY = 40 //set y offset of bar in pixels
var verticalpos="frombottom" //enter "fromtop" or "frombottom"

function iecompattest(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}

function get_cookie(Name) {
var search = Name + "="
var returnvalue = "";
if (document.cookie.length > 0) {
offset = document.cookie.indexOf(search)
if (offset != -1) {
offset += search.length
end = document.cookie.indexOf(";", offset);
if (end == -1) end = document.cookie.length;
returnvalue=unescape(document.cookie.substring(offset, end))
}
}
return returnvalue;
}

function closebar(){
if (persistclose)
document.cookie="remainclosed=1"
document.getElementById("topbar").style.visibility="hidden"
}

function staticbar(){
   barheight=document.getElementById("topbar").offsetHeight
   var ns = (navigator.appName.indexOf("Netscape") != -1) || window.opera;
   var d = document;
   function ml(id){
      var el=d.getElementById(id);
      if (!persistclose || persistclose && get_cookie("remainclosed")=="")
      el.style.visibility="visible"
      if(d.layers)el.style=el;
      el.sP=function(x,y){this.style.left=x+"px";this.style.top=y+"px";};
      el.x = startX;
      if (verticalpos=="fromtop")
      el.y = startY;
      else{
      el.y = ns ? pageYOffset + innerHeight : iecompattest().scrollTop + iecompattest().clientHeight;
      el.y -= startY;
      }
      return el;
   }
   window.stayTopLeft=function(){
      if (verticalpos=="fromtop"){
      var pY = ns ? pageYOffset : iecompattest().scrollTop;
      ftlObj.y += (pY + startY - ftlObj.y)/8;
      }
      else{
      var pY = ns ? pageYOffset + innerHeight - barheight: iecompattest().scrollTop + iecompattest().clientHeight - barheight;
      ftlObj.y += (pY - startY - ftlObj.y)/8;
      }
      ftlObj.sP(ftlObj.x, ftlObj.y);
      setTimeout("stayTopLeft()", 10);
   }
   ftlObj = ml("topbar");
   stayTopLeft();
}

if (window.addEventListener)
window.addEventListener("load", staticbar, false)
else if (window.attachEvent)
window.attachEvent("onload", staticbar)
else if (document.getElementById)
window.onload=staticbar
</script>';  

   echo '        
</head>

Si se fijan, al principio encontraran la siguientes lineas:

var persistclose=0 //set to 0 or 1. 1 means once the bar is manually closed, it will remain closed for browser session
var startX = 30 //set x offset of bar in pixels
var startY = 40 //set y offset of bar in pixels
var verticalpos="frombottom" //enter "fromtop" or "frombottom"

las cuales pueden cambiar, para configurar el scrip a su gusto la distancia desde el eje X, y desde el eje Y, ademas si quieren que la barra se ubique arriba(fromtop) o abajo(frombottom).


Luego buscar:

Code Select Expand

<body>';

y reemplazar por:

Code Select Expand

<body>';
   if ($context['user']['is_guest'])
   {
   echo '
<div id="topbar">
<a href="" onClick="closebar(); return false"><img src="', $settings['images_url'], '/close.gif" border="0" /></a>
Bienvenido(a), Visitante. Por favor, <a href="', $scripturl, '?action=login"><b>ingresa</b></a> o <a href="', $scripturl, '?action=register"><b>regístrate</b></a>.

</div>';
   }

aqui es donde pueden usar HTML para dejar la barra mas bonita, y no tan simple como es este ejemplo.



2.- Editar el archivo style.css

agregar al final:

Code Select Expand

#topbar{
position:absolute;
border: 1px solid black;
padding: 2px;
background-color: lightyellow;
width: 450px;
visibility: hidden;
z-index: 100;
}

aqui tambien se pueden hacer modificaciones para hacer más atractiva la barra, por ejemplo agregar una imagen de fondo, determinar una altura fija, cambiar colores, etc.


3.- Subir el archivo close.gif a la carpeta "images" del theme.




Eso es todo.

la barra desaparece al estar "logueado" en el foro.

Les recuerdo que corre por cuenta de ustedes hacer mas atractiva esta barra, usando html y css se pueden lograr cosas bastantes bonitas.

Saludos

[Doro]

¡Genial como siempre EgAr! Lo tengo que probar a ver cómo queda.



Saludos,
Doro

[bigo]

jeje eso ya lo tenia instaldo en mi pagina... estaba esperando tener tiempo para crear el mod

www.planetashile.cl

[Casal]

Muy bueno el mod haber si tengo tiempo y lo pruebo en mi foro lo vi el otro dia en varios foros y me llamo mucha la atencion.

Ya os contare como me ha ido.

[EmiOconnor]

Primero que nada, Gracias por el aporte! hace tiempo lo estaba buscando...

Ahora vengo con la duda... como hago para que aparezca directamente esta imagen?



Y el otro problema es que no me flota  ... solo aparece en el head del foro, que puedo estar haciendo mal??

Desde ya gracias!
Saludos

[johnnie]

Buenisimo lo mismo lo pongo aunque ami las barra flotantes siempre me rayaron un poco. pero aún asi esta genial

[Mundo]

Muchisimas gracias!! esta muy bien pero como ago como dijo el de arriba para que salga mi propia imagen o barrita? miren como quedo!
www.mundoaviacion.es
Gracias!!

[EgAr]

Y el otro problema es que no me flota  ... solo aparece en el head del foro, que puedo estar haciendo mal??

-para la imagen, solo debes utilizar html...

Code Select Expand

<a href="', $scripturl, '?action=register"><img src="http://img218.imageshack.us/img218/4485/invitacionuw2.gif" border="0" /></a>
pero va a quedar debajo de la "X" para cerrar... por lo que yo crearia 2 imagenes, la prinera solo con el marco y el fondo, que agregaria al Style.css, por ejemplo

Code Select Expand

background: #fff url(images/fondo.png)

ademas de definir las dimensiones escatas de la barra para que sea del mismo tamaño que el de la imagen

Code Select Expand

height: 100px;
width: 300px;


y otra imagen con la frase de invitacion, que pondrias con el codigo html que te di al principio...


- sobre porque no te flota, debe ser que no hiciste bien la edicion del archivo Style.css, recuerda que debes editar el archivo correspondiente a tu theme.

¡Genial como siempre EgAr! Lo tengo que probar a ver cómo queda.
Saludos,
Doro

Gracias... esto es lo que se obtiene al trabajar escuchando buena musica.... tenia de fondo a "Epica - The Divine Conspiracy" 




cr4sill
ya la vi en tu web... queda bien...
lo de la imagen ya lo respondi mas arriba...


Saludos

[Jose7up]

Muchisimas gracias EgAr, ya lo he añadido yo tb, solo me falta crear otra imagen, ya que elegi la que llevo en mi firma para probar, pero jugando con el css he logrado lo que buscaba, ahora solo a darle un poco al photoshop.

Mi firma es de 400 x 130 y al final para que se vea bien tanto en IE como en Firefox, he dejado el archivo Style.css de esta manera, haciendo algunas modificaciones, hasta ponerlo tal y como queria, hay distintas formas de acerlo, en esta se ve el texto por defecto pero centrado, luego es ir jugando con los valores padding-top y height estos hay que añadirlos:

Code Select Expand

#topbar{
position:absolute;
border: 1px solid black;
padding-top: 4em;
background-image:url(http://img170.imageshack.us/img170/120/mundoxboxnb2.jpg);
width: 400px;
height: 80px;
visibility: hidden;
z-index: 100;
}

Quedaría como se puede ver en: www.mundoxbox.net

Un saludo.

[EgAr]

Exelente...
se ve muy bien...

me alegro que el fruto de mis "horas de ocio"  sea de utilidad...

Saludos

[Casal]

Una pregunta como hago para centrarlo y que no me salga por la parte izquierda del foro.

[johnnie]

ponle la etiquetas

[EmiOconnor]

Perfecto EgAr! Muchisimas gracias... mira como me quedo... http://www.stunidos.com.ar/foro/index.php 

Un saludo!

[minos]

oye eso solo sirve para el foro verdd? porque yo quisiera opnerlo desde el mkportal

[EgAr]

oye eso solo sirve para el foro verdd? porque yo quisiera opnerlo desde el mkportal

intenta usando el scrip original y modificando el index del mkportal...

Una pregunta como hago para centrarlo y que no me salga por la parte izquierda del foro.

Aumenta la distancia desde el eje X...

Code Select Expand

var startX = 30 //set x offset of bar in pixels
aumentalo hasta que logres dejarlo a la distancia que desees..

[Casal]

Ok EdgAr estoy en ello y funciona.

[EgAr]

QUE MI NOMBRE ES EGAR !!!

[juanpons14]

jajaj es verdad joder no le llameis asi XDDDD a k si edgar jajaj xDDD es broma muxas gracias por esto se modifica un pokito y de lujo gracias

[Casal]

QUE MI NOMBRE ES EGAR !!!

No me hagas caso a veces tengo alucinaciones que ni yo mismo comprendo EgAr ja ja ja.

[juanpons14]

bueno egar ya lo e exo porfin e puesto la imagen y el boton de cerra pero una cosa para poner la imagen y no poner texto no hace falta poner nada mas en el style porque ami el boton de cerrar me sale arriba solo canvio lo de bienvenido ....etc....por el codigo que pusiste de la imagen pongo en el sty el widht y height y ya ta va a i de background-color pongo transparent y keda to guapo, xk parece que el boton de x este flotando de verdad mas realista xDDD pasate por mi web que aun esta en construccion y si kieres la miras feliz puento k esty de vacaciones aki en pamplona y luego a bilbao xDDDajajaj jgracias