1 [Sugencia] Clase #3 CSS Sáb Sep 29, 2012 6:55 pm
`pxl´
Bueno estuve mirando todo lo que compone WD School y como CSS no tiene demaciadas clases se me ocurrio idear una clase mas.
¿cual sera el tema?
Bueno como muchos Foros utilizan la CB (Chatbox) a la vista en su foro, aveces ese gran tamaño no puede arruinar nuestro espectacular Foro. Asi que el tutoria tratara de como crear una ChatBox Desplegable.
EMPEZAMOS (Yo are el tuto pero el mod acargo o administrador, si es que lo aceptan, que lo haga de manera mas "formal".
Vamos a nuestro foro, nos dirigimos al Panel de administración donde buscaremos "Visualización"
Dentro de "Visualización" no vamos a dirigir a "Imagenes y colores" luego click en "Colores" y le damos a la solapa "CSS Stylesheet" y en el cuadro de codigo CSS colocaremos esto:
Luego vamos a "Modulos" y nos dirigimos a "Gestion de codigos Javascript". Ponemos "Nuevo codigo Javascript" y de titulo le ponemos "ChatBox Desplegable" y en la posición ponemos "En todas las paginas".
Luego en el cuadro de codigo colocaremos esto:
Bueno gente eso es todo el tutorial, si lo hacen y no les funciona algo no duden en consultarme ami.
¿cual sera el tema?
Bueno como muchos Foros utilizan la CB (Chatbox) a la vista en su foro, aveces ese gran tamaño no puede arruinar nuestro espectacular Foro. Asi que el tutoria tratara de como crear una ChatBox Desplegable.
EMPEZAMOS (Yo are el tuto pero el mod acargo o administrador, si es que lo aceptan, que lo haga de manera mas "formal".
Vamos a nuestro foro, nos dirigimos al Panel de administración donde buscaremos "Visualización"
Dentro de "Visualización" no vamos a dirigir a "Imagenes y colores" luego click en "Colores" y le damos a la solapa "CSS Stylesheet" y en el cuadro de codigo CSS colocaremos esto:
- Código:
#chatbox_ret_cont{
x-index: 10000;
z-index: 999;
background-color: transparent;
position: fixed;
bottom: 0;
}
#chatbox_ret_cont.chatbox_derecha{
right: 0;
}
#chatbox_ret_cont.chatbox_izquierda{
left: 0;
}
#chatbox_ret_cont div{
cursor: pointer;
}
#chatbox_ret_cont iframe#chatbox_ret{
background-color: white;
border: 4px solid red;
display: none;
height: 300px;
margin-bottom: 0;
width: 800px;
}
Luego vamos a "Modulos" y nos dirigimos a "Gestion de codigos Javascript". Ponemos "Nuevo codigo Javascript" y de titulo le ponemos "ChatBox Desplegable" y en la posición ponemos "En todas las paginas".
Luego en el cuadro de codigo colocaremos esto:
- Código:
//Inicio variables a editar por el usuario
var imagen_chatbox_desplegable = "ACÁ LA IMAGEN PARA CLICKEAR Y QUE APARESCA LA CHATBOX";
var posicion_chatbox_desplegable = "derecha"; //Admite también 'izquierda'
//Fin variables a editar por el usuario
document.write("<div id=\"chatbox_ret_cont\" class=\"chatbox_" + posicion_chatbox_desplegable + "\">");
document.write(" <div onclick=\"(document.getElementById('chatbox_ret').style.display=='block')?my_setcookie('chatbox_ret','0',0,0):my_setcookie('chatbox_ret','1',1,0); jQuery('#chatbox_ret').toggle('normal');\">");
document.write(" <span id=\"chatbox_ret_online\">");
document.write(" <img title=\"Abrir o cerrar el Chat\" src=\"" + imagen_chatbox_desplegable + "\">");
document.write(" <\/span>");
document.write(" <span id=\"chatbox_ret_offline\"><\/span>");
document.write(" <\/div>");
document.write(" <iframe src=\"\/chatbox\" id=\"chatbox_ret\" name=\"chatbox_ret\" ");
document.write(" scrolling=\"no\" frameborder=\"0\" marginwidth=\"0\" marginheight=\"1px\"");
document.write(" onload=\"if(cb_new){cb_start();cb_new=0;}\">");
document.write(" <\/iframe>");
document.write("<\/div
Bueno gente eso es todo el tutorial, si lo hacen y no les funciona algo no duden en consultarme ami.