Continuando con el tema del chat es momento de embellecer nuestra lista de usuarios.
Es el momento de crear y modificar el archivo chatStyle.css en la carpeta raíz/css/chatstyle.css, para ello, lo creamos y comenzamos a agregar los estilos a las diferentes clases.
chatstyle.css
Esto dejara una lista de usuarios con el siguiente estilo
Es el momento de crear y modificar el archivo chatStyle.css en la carpeta raíz/css/chatstyle.css, para ello, lo creamos y comenzamos a agregar los estilos a las diferentes clases.
chatstyle.css
body {
font: 13px Helvetica, Arial;
}
.contentUser {
border: solid 1px;
width: 300px;
position: absolute;
top: 10px;
left: 10px;
border-radius: 5px;
height: 500px;
}
ul#usersActivos {
list-style: none;
padding: 0;
height: 445px;
overflow: hidden;
overflow-y: scroll;
}
.title-users {
padding: 1em;
background-color: #2f2f5d;
text-align: center;
color: #f1f1f1;
cursor: move;
}
#usersActivos li {
border-bottom: solid 1px;
padding: 0.75em;
cursor: pointer;
}
#usersActivos li div {
font-size: 1.15em;
}
Esto dejara una lista de usuarios con el siguiente estilo
Y es así como concluimos esta entrada...
Esperare sus comentarios, si no se han unido al blog, agrégalo como favorito.
No hay comentarios:
Publicar un comentario