News:

Bored?  Looking to kill some time?  Want to chat with other SMF users?  Join us in IRC chat or Discord

Main Menu

Barra Flotante que invita a registrarse

Started by EgAr, October 29, 2007, 08:33:30 PM

Previous topic - Next topic

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:
      // ]]></script>
</head>


Reemplazar por:
      // ]]></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:
Quotevar 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:
<body>';

y reemplazar por:
<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:
#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
*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

bigo

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

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

#7
Quote from: EmiOconnor on October 30, 2007, 03:57:00 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...
<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
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
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.



Quote from: Doro on October 29, 2007, 08:41:12 PM
¡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

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:

#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

#9
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


EmiOconnor

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

Un saludo! ;)

minos

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

EgAr

Quote from: minos on October 31, 2007, 02:50:08 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...



Quote from: Casal 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.
Aumenta la distancia desde el eje X...
var startX = 30 //set x offset of bar in pixels
aumentalo hasta que logres dejarlo a la distancia que desees..

Casal

#15
Ok EdgAr estoy en ello y funciona.
♫♪♫♪


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 ;)

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

 

Casal

Quote from: EgAr on October 31, 2007, 04:18:53 PM
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

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

 

Advertisement: