Tutorial básico de CSS #2.
Después de mucho ocio por parte mía, y lo lamento de verdad, me pondré ahora sí a hacer el tutorial que tanto
me han pedido sobre CSS que en esta ocasión aprenderemos: CÓMO ARMAR UN CSS sencillo.
Quiero hacer un agradecimiento especial a SARALLEINE ya que fue gracias a ella y a GERMANGABRIEL que con
sus tutoriales yo aprendí a modificar el CSS y de hecho aún utilizo la base que ellos dieron en dicho tutorial.
NOTA: Este tutorial sólo aplica para Gabito grupos.
Pero primero me gustaría dejar en claro algunos términos generales en el uso de CSS, así irán aprendiendo
para que se usan determinadas etiquetas.
A - Se relaciona con todos los vinculos o links de un grupo.
A:hover - Modifica todos los vinculos o links al pasar el raton por encima.
A.Command - Modifica todos los links en Novedades.
A.MsgLink - Modifica todos los links en el Panel de Mensajes.
.ThmBgAlternate - Este cambiará el fondo del Menú de tu grupo.
.ThmFgStandard - Modifica el nombre de los Participantes.
.ThmBgHighlightLight - Cambiará el fondo de la página de Novedades y las Hojas Administrativas.
.ThmBgUnknown1 - Modifica el color de la barra sobre Novedades.
.ThmBgFraming - Modifica el color de la barra sobre los mensajes en Novedades.
.ThmBgHeader - Cambia el color de las cajas de los mensajes.
.ThmFgTitleLightBk - Modifica los títulos en general.
.ThmFgCommand - Modifica el color de la información de mensajes y archivos.
.ThmFgColumnHeader - Modifica el color en Tema del panel de mensajes.
PASO 01. Abrir el programa BLOC DE NOTAS que esta disponible en cualquier PC. Aqui haremos y guardaremos nuestro CSS para después usarlo en nuestra página online.
Empezaremos con ir modificando todo lo que corresponderá con los vinculos y/o links dentro de nuestro grupo.
Recuerda SIEMPRE cerrar con un corchete { } y terminar una etiqueta con ;
EJEMPLO:
A {color: #464A4D;}
A:hover {color: #DDDDDB;}
A.Command {color: #5493A4;}
A.Command:hover {color: #9fc2cc}
A.MsgLink {color: #93B6C9;}
A.MsgLink:hover {color: #d91438;}
A.NavLink {color: #b7b7b7;}
A.NavLink:hover {color: #00bff3;}
PASO 02. Ve agregando los términos que deseas modificar y que vimos en el TUTORIAL #1, esos irán
dentro de los { } corchetes y modificarán los comandos en nuestra página; por ejemplo el tipo de letra, color,
sombra, tamaño, ect.
EJEMPLO:
A {color: #464A4D; font-family: arial; font-size:9px; letter-spacing: -1px; text-decoration:none; }
A:hover {color: #DDDDDB;font-family: georgia; font-size: 11px; letter-spacing: 1px; text-decoration:none;}
A.Command {color: #5493A4; font-family: arial; font-size:9px; letter-spacing: -1px;}
A.Command:hover {color: #9fc2cc; font-family: arial; font-size:9px; letter-spacing: -1px;}
A.MsgLink {color: #93B6C9; font-family: arial; font-size:9px; letter-spacing: -1px;}
A.MsgLink:hover {color: #d91438; font-family: arial; font-size:9px; letter-spacing: -1px;}
A.NavLink {color: #b7b7b7; font-family: arial; font-size:9px; letter-spacing: -1px;}
A.NavLink:hover {color: #00bff3; font-family: arial; font-size:9px; letter-spacing: -1px;}
Paso 03. Ya que tengas modificado todo a tu gusto, pasemos a cambiar el ambiente del resto del grupito,
como es el fondo del menú, el fondo de novedades, etc.
EJEMPLO:
.ThmBgAlternate {background-image:url(URLDETUIMAGEN); background-repeat: repeat}
.ThmFgStandard {color: #C1C1C3;}
.ThmBgHighlightLight {background-image:url(URLDETUIMAGEN); background-repeat: repeat}
.ThmBgUnknown1 {background-color: #363636;}
.ThmBgFraming {background-color: #363636;}
.ThmBgHeader {background-color: #FFFFFF;}
.ThmFgTitleLightBk {color: #9F3A48;}
.ThmFgCommand {color: #757671;}
.ThmFgColumnHeader {color: #757671; text-decoration:none;}
.ThmFgInactiveText {color: #93B6C9; text-decoration:none;}
PASO 04. Ya que tenemos todos los comandos listos vamos a guardar nuestro archivo con un título corto por ejemplo: 001 y al final
agregaremos .CSS asi que nuestro titulo sera 001.CSS sólo así podrá reconocerlo y funcionar más adelante ES MUY MPORTANTEI que lo
guardes así.
El siguiente tutorial consistirá en DONDE subir este archivo para que funcione en Gabito y COMO aplicarlo ;) dejen sus dudas aquí.
Tema anterior
Primer 