Advertisement:

Author Topic: Barra Flotante que invita a registrarse  (Read 181537 times)

Offline EgAr™

  • SMF Hero
  • ******
  • Posts: 1,596
  • Gender: Male
  • [=';'=]
Barra Flotante que invita a registrarse
« on: October 29, 2007, 08:33:30 PM »
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]
      // ]]></script>
</head>

Reemplazar por:
Code: [Select]
      // ]]></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:
Quote
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]
<body>';
y reemplazar por:
Code: [Select]
<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]
#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
« Last Edit: October 08, 2008, 06:02:32 PM by NIBOGO »

Offline Doro

  • Sr. Member
  • ****
  • Posts: 881
  • Gender: Female
  • In The DarkNess..
    • Foro ganar dinero en internet
Re: Barra Flotante que invita a registrarse
« Reply #1 on: October 29, 2007, 08:41:12 PM »
¡Genial como siempre EgAr! Lo tengo que probar a ver cómo queda.



Saludos,
Doro
*En buena medida, ser cristiano equivale a ser cruel respecto a uno mismo y a los demás, odiar a quienes piensan de forma diferente, y un afán de perseguir. Ser cristiano implica odiar la inteligencia, el orgullo, la valentía, la libertad, el libertinaje del espíritu; odiar los sentidos, el gozo sensual, el placer en cuanto tal.Friedrich Nietzsche

Offline bigo

  • Sophist Member
  • *****
  • Posts: 1,343
  • Gender: Male
  • Planetashile.com
    • http://www.simplemachines.org
Re: Barra Flotante que invita a registrarse
« Reply #2 on: October 30, 2007, 01:33:21 PM »
jeje eso ya lo tenia instaldo en mi pagina... estaba esperando tener tiempo para crear el mod

www.planetashile.cl
Devuelta pero sin pagina :P

Mis Mod:
multiples bbcode - Nuevo  MessagePreview - firma por defecto

Offline Casal

  • Sr. Member
  • ****
  • Posts: 820
  • Gender: Male
Re: Barra Flotante que invita a registrarse
« Reply #3 on: October 30, 2007, 03:51:02 PM »
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.
♫♪♫♪

Offline EmiOconnor

  • Jr. Member
  • **
  • Posts: 171
  • Gender: Male
  • www.argmu.com.ar
    • .:: Argentina MU ::. Foro
Re: Barra Flotante que invita a registrarse
« Reply #4 on: October 30, 2007, 03:57:00 PM »
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 ;)

Offline johnnie

  • Jr. Member
  • **
  • Posts: 261
Re: Barra Flotante que invita a registrarse
« Reply #5 on: October 30, 2007, 03:58:35 PM »
Buenisimo lo mismo lo pongo aunque ami las barra flotantes siempre me rayaron un poco. pero aún asi esta genial

Offline Mundo

  • Semi-Newbie
  • *
  • Posts: 46
Re: Barra Flotante que invita a registrarse
« Reply #6 on: October 30, 2007, 06:43:26 PM »
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!!

Offline EgAr™

  • SMF Hero
  • ******
  • Posts: 1,596
  • Gender: Male
  • [=';'=]
Re: Barra Flotante que invita a registrarse
« Reply #7 on: October 30, 2007, 09:06:43 PM »

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]
<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]
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]
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"  8)




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


Saludos
« Last Edit: October 31, 2007, 01:17:02 AM by EgAr »

Offline Jose7up

  • Full Member
  • ***
  • Posts: 450
  • Gender: Male
  • MundoXbox.NeT
    • Mundo Xbox
Re: Barra Flotante que invita a registrarse
« Reply #8 on: October 30, 2007, 09:57:39 PM »

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]
#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.

Offline EgAr™

  • SMF Hero
  • ******
  • Posts: 1,596
  • Gender: Male
  • [=';'=]
Re: Barra Flotante que invita a registrarse
« Reply #9 on: October 30, 2007, 10:32:10 PM »
Exelente...
se ve muy bien...

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

Saludos
« Last Edit: October 30, 2007, 10:35:58 PM by EgAr »

Offline Casal

  • Sr. Member
  • ****
  • Posts: 820
  • Gender: Male
Re: Barra Flotante que invita a registrarse
« Reply #10 on: October 31, 2007, 07:22:28 AM »
Una pregunta como hago para centrarlo y que no me salga por la parte izquierda del foro.
♫♪♫♪

Offline johnnie

  • Jr. Member
  • **
  • Posts: 261
Re: Barra Flotante que invita a registrarse
« Reply #11 on: October 31, 2007, 09:40:44 AM »
ponle la etiquetas

Offline EmiOconnor

  • Jr. Member
  • **
  • Posts: 171
  • Gender: Male
  • www.argmu.com.ar
    • .:: Argentina MU ::. Foro
Re: Barra Flotante que invita a registrarse
« Reply #12 on: October 31, 2007, 10:00:29 AM »
Perfecto EgAr! Muchisimas gracias... mira como me quedo... http://www.stunidos.com.ar/foro/index.php  ;D

Un saludo! ;)

Offline minos

  • Full Member
  • ***
  • Posts: 509
  • Gender: Male
  • metalminos.com
    • Metal Minos Foro
Re: Barra Flotante que invita a registrarse
« Reply #13 on: October 31, 2007, 02:50:08 PM »
oye eso solo sirve para el foro verdd? porque yo quisiera opnerlo desde el mkportal

Offline EgAr™

  • SMF Hero
  • ******
  • Posts: 1,596
  • Gender: Male
  • [=';'=]
Re: Barra Flotante que invita a registrarse
« Reply #14 on: October 31, 2007, 03:01:54 PM »
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]
var startX = 30 //set x offset of bar in pixelsaumentalo hasta que logres dejarlo a la distancia que desees..

Offline Casal

  • Sr. Member
  • ****
  • Posts: 820
  • Gender: Male
Re: Barra Flotante que invita a registrarse
« Reply #15 on: October 31, 2007, 03:46:09 PM »
Ok EdgAr estoy en ello y funciona.
« Last Edit: October 31, 2007, 03:49:57 PM by Casal »
♫♪♫♪

Offline EgAr™

  • SMF Hero
  • ******
  • Posts: 1,596
  • Gender: Male
  • [=';'=]
Re: Barra Flotante que invita a registrarse
« Reply #16 on: October 31, 2007, 04:18:53 PM »
QUE MI NOMBRE ES EGAR !!!

Offline juanpons14

  • Jr. Member
  • **
  • Posts: 240
  • Gender: Male
    • Planetdescargas.com
Re: Barra Flotante que invita a registrarse
« Reply #17 on: October 31, 2007, 06:53:49 PM »
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 ;)

Descarga deirecta de series, películas, música y mucho más! en
Planetdescargas.com

 

Offline Casal

  • Sr. Member
  • ****
  • Posts: 820
  • Gender: Male
Re: Barra Flotante que invita a registrarse
« Reply #18 on: November 01, 2007, 05:54:44 AM »
QUE MI NOMBRE ES EGAR !!!

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

Offline juanpons14

  • Jr. Member
  • **
  • Posts: 240
  • Gender: Male
    • Planetdescargas.com
Re: Barra Flotante que invita a registrarse
« Reply #19 on: November 01, 2007, 04:02:43 PM »
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

Descarga deirecta de series, películas, música y mucho más! en
Planetdescargas.com