LOG IN
Usuario:

Contraseña:


Últimos temas
» [PHPBB3] Tema Ubuntu
[Sugencia] Clase #3 CSS EmptyMar Feb 27, 2024 10:22 am por hoanglongnhatbao

» [PHPBB3] Fondo y otros efectos al texto llamado "Por X" debajo de los titulos de los post.
[Sugencia] Clase #3 CSS EmptyMar Mayo 30, 2023 8:52 am por hoanglongnhatbao

» Skin: Academy [Adaptado por: 15-tronos]
[Sugencia] Clase #3 CSS EmptyMar Mayo 30, 2023 8:47 am por hoanglongnhatbao

» [PHPBB3] KN-Anime - VAngel.
[Sugencia] Clase #3 CSS EmptyMar Mayo 30, 2023 8:46 am por hoanglongnhatbao

» [PHPBB3] Element Professional Style
[Sugencia] Clase #3 CSS EmptyMar Mayo 30, 2023 8:45 am por hoanglongnhatbao

» Menu minimalista
[Sugencia] Clase #3 CSS EmptyMar Mayo 30, 2023 8:44 am por hoanglongnhatbao

» [Todas] Efecto Slider Transition en el Logo
[Sugencia] Clase #3 CSS EmptyMar Mayo 30, 2023 8:43 am por hoanglongnhatbao

» [PHPBB3] Mejores Posteadores flotantes.
[Sugencia] Clase #3 CSS EmptyMar Mayo 30, 2023 8:41 am por hoanglongnhatbao

» [phpbb3] Agrandar el nombre de usuario en el perfil
[Sugencia] Clase #3 CSS EmptyMar Mayo 30, 2023 8:41 am por hoanglongnhatbao

Estadísticas
Tenemos 2351 miembros registrados
El último usuario registrado es Jhunky

Nuestros miembros han publicado un total de 41254 mensajes en 3360 argumentos.
Afiliados





No estás conectado. Conéctate o registrate

Ver el tema anterior Ver el tema siguiente Ir abajo  Mensaje [Página 1 de 1.]


1[Sugencia] Clase #3 CSS Empty [Sugencia] Clase #3 CSS Sáb Sep 29, 2012 6:55 pm

`pxl´

`pxl´
Soy new user
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"

[Sugencia] Clase #3 CSS GCq2q

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

[Sugencia] Clase #3 CSS 9SSwU

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".

[Sugencia] Clase #3 CSS GnfMl

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.


2[Sugencia] Clase #3 CSS Empty Re: [Sugencia] Clase #3 CSS Lun Oct 01, 2012 5:06 pm

Fernando

Fernando
Mod.Gráficos
Por mi, clase aceptada.

http://www.webdesignforo.net/

Ver el tema anterior Ver el tema siguiente Volver arriba  Mensaje [Página 1 de 1.]

Permisos de este foro:
No puedes responder a temas en este foro.