Resultados 1 al 2 de 2

Tema: [CSS] Chat Grupo 2.0

  1. #1
    PAULO (956544769)


    Avatar de xLaming
    Fecha de ingreso
    28 nov, 14
    Ubicación
    C. Grande, MS, Brasil
    Mensajes
    287
    Poder de reputación
    3

    Exclamation [CSS] Chat Grupo 2.0

    ¿Te gusta el diseño bootstrap/html5 que el xat.com usa? ¿Sí? ¡Ok!
    Es en el tema les dejaré un código css para chat que convierte tu chat en bootstrap.

    CSS:
    Código:
    background:#F3F3F3}#glu{position:absolute}img[height='32']{display:none}table{background:transparent}#glu{width:100%}td[width='2%'] img{opacity:0}#glu{right:0}#glu{height:850px}#glu{top:0}#glu{z-index:1}[colspan='27']{display:none}.vbmenu_control{display:none}img,a,embed{position:relative}img,a,embed{z-index:2} .btext2{display:none} table[height='51'],table[bgcolor='#000000']{opacity:0;}
    HTML:
    Código:
    </center>
    <!DOCTYPE html>
    <html>
       <head>
          <META http-equiv="Content-Type" content="text/html; charset=UTF-8">
          <link rel="stylesheet" href="//xat.com/css/bootstrap.min.css?v=8JbD3">
          <link rel="stylesheet" href="//xat.com/css/bootstrap-responsive.min.css?v=8JbD3">
          <link rel="stylesheet" href="//xat.com/css/main.css?v=8JbD3">
          <title>xLaming</title>
          <LINK REL="SHORTCUT ICON" href="//xat.com/web_gear/chat/icon.ico">
    	  <style>
    	    .chat {
    			height:130px;
    		}
    		.hidden {
    			display:none;
    		}
    		.menu {
    			top:15px; 
    			background:url(http://i65.tinypic.com/2akcsk6.png) no-repeat;
    			position:relative;
    			width:29px;
    			height:528px;
    		}
    		.logo {
    			position:relative;
    			margin-left:-25px;
    		}
    		.logo span{
    			color:#ffffff;
    			font-size:40px;
    			position:relative;
    			top:10px;
    		}
    	  </style>
       </head>
       <div class="hidden"><a href="http://xat.com" target="_blank"><img src="http://i.imgur.com/L7UD2kb.png"/></a></div>
       <body topmargin="0" leftmargin="0">
          <a href="#" class="scrolltop">
          <span style="margin-left: 2px;"><i class="icon-arrow-up"></i></span>
          </a>
          <div class="navbar navbar-fixed-top">
             <div class="navbar-inner">
                <div class="container">
                   <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
                   <span class="icon-bar"></span>
                   <span class="icon-bar"></span>
                   <span class="icon-bar"></span>
                   </a>
                   <a class="brand scroller" href="//xat.com" target="_blank">
                   <div class="logo"><img src="//xat.com/images/xatblk.gif" alt="logo" /> <span>xLaming</span></div>
                   </a>
                   <div class="nav-collapse collapse">
                      <ul class="nav pull-right">
                         <li><a href="//xat.com/groups.php" target="_blank">Groups</a></li>
                         <li><a href="//xat.com/twitter" target="_blank">News</a></li>
                         <li><a href="//xat.com/GetPowers" target="_blank">Powers</a></li>
                         <li><a href="//xat.com/Trade_" target="_blank" id="tradeb">Trade</a></li>
                         <li><a href="//xat.com/Help_" target="_blank" id="helpb">Help</a></li>
                      </ul>
                   </div>
                </div>
             </div>
          </div>
    	  <div class="menu"></div>
          <div class="chat"></div>
          <table width="100%" height="30" border="0" cellpadding="2" cellspacing="0" bgcolor="#000000" style="filter: alpha (opacity=90)" class="btext2">
             <tr>
                <td width="10">&nbsp;</td>
                <td><a href="//xat.com" target="_blank" title="Back to xat.com Home!">Home</a></td>
    			<td width="10">&nbsp;</td>
                <td><a href="//xat.com/web_gear/chat/embed.php?id=216013814&GroupName=xLaming" target="_blank" title="Put this chat group on your page!">Embed</a></td>
                <td width="100%">&nbsp;</td>
                <td><a href="//xat.com/web_gear/chat/editgroup.php?GroupName=xLaming" target="_blank" title="Edit your chat!">Edit</a></td>
                <td width="10">&nbsp;</td>
                <td><a href="//xat.com/web_gear/chat/events.php?roomid=216013814&GroupName=xLaming" target="_blank" title="See your chat events, ranks etc!">Events</a></td>
                <td width="10">&nbsp;</td>
                <td><a href="//xat.com/web_gear/chat/ownerfeedback.php?GroupName=xLaming" target="_blank" title="Send owner feedback">Message</a></td>
                <td width="10">&nbsp;</td>
                <td><a href="//xat.com/web_gear/chat/inappropriate.php?id=216013814&GroupName=xLaming" target="_blank" title="Report this chat for inappropriate content!"> Inappropriate</a></td>
                <td width="10">&nbsp;</td>
                <td width="10">&nbsp;</td>
             </tbody>
          </table>
    	  <TABLE bgColor=#000000 width="100%" border=0 cellpadding="0" cellspacing="0">
    	<TBODY>
    	<TR><TD align=center>
    	<strong style="font-size:11px;color: #C00000;">Note: the content above does not come from xat. Please be cautious before installing apps.</strong></td></tr>	
    		<TR >
    		  <TD class="foot" align=center>&copy;2016 xat - <A target="_blank" href="//xat.com/privacy.html">Privacy</A> - <A target="_blank" href="//xat.com/terms.html">Terms</A> - <A target="_blank" href="//xat.com/safety.html">Safety</A></TD>
    		</TR>
    	</TBODY>
    	</TABLE>
       </body>
    </html>

    Tutorial:
    *- 216013814 cambiar por la ID de tu chat.
    *- xLaming cambiar por el nombre de tu chat.
    *- Cambir la color de los botones por: #000066
    *- Gscol(se tienes) cambiar por: #D9D445
    *- Se quieres puedes activar la opción "Transparent" en tu Edit para tener un design mejor.

    - Primero debes entrar en el Edit de tu chat:


    - Ahora vamos agregar los codigos css y html, en Background debes agregar el codigo css, y en la caja grande debes agregar el codigo html:


    Ahora solo guardar los cambios y listo!

    Demo:
    #1:

    #2:


    Creditos:
    xat.com por hacer todo el diseño bootstrap etc
    PAULO (956544769) por hacer todo el codigo a chat grupo
    Odin (206159116) por hacer los iconos de los apps
    ELECK (87504767) por reportar un bug/error
    Última edición por xLaming; 23/09/2016 a las 14:54

  2. #2
    Usuario activo Avatar de Temo
    Fecha de ingreso
    22 oct, 16
    Mensajes
    24
    Poder de reputación
    0

    Predeterminado

    ¡ Hola amigo laming !
    te quedó fantastico , se que eres un buen programador y muy buen ccs para el chat
    lo utilizaré para el mio .

    SALUDOS

¿Te ha sido útil este articulo? Compártelo!

¿Te ha sido útil este articulo? Compártelo!

Permisos de publicación

  • No puedes crear nuevos temas
  • No puedes responder temas
  • No puedes subir archivos adjuntos
  • No puedes editar tus mensajes
  •