Tutorial 1: Skin básica.
Buenas querido usuario, este es un tutorial para todo aquel que no conoce absolutamente nada y recién esta iniciando en la edición de skins. Por ello es que les traigo esta semana algo sumamente sencillo. Algo que me sucedió al iniciar mi primer skin, fue preguntarme al ver la parte del css en blanco, ¿Y ahora qué?. Ooooh... ¿Cómo inicio?. Aquí lo que te daré es eso... el inicio: En mi caso, suelo primero pensar en la idea de qué quiero hacer (escuchar música, ver una película, leer un libro, cualquier cosa que te inspire sirve), para ello debo ponerme una base sobre la que trabajar, lo que leerán es como hacer una base para esa hoja en blanco.
Como algunos sabrán y otros quizás ahorita les dió curiosidad por hacer su propio skin la base se llama #wrap, (les recuerdo siempre luego de cada sección abrir una llave y al finalizar con su contenido total cerrarla { }):
/***Foro básico también llamado wrap***/
#wrap {
}
/***¿Qué propiedades van dentro de esto?.***/
* Width: xxxpx;
Es el ancho del foro: ¿De cuánto lo queremos?. ¿Quieres que sea angosto o más ancho?.
Aquí pondremos primero un número que les recomiendo este entre 900px a 1000px; un poco más o un poco menos esto depende de gustos. También existe la propiedad max-width y min-width que sirven para determinar el mínimo y máximo para pantallas con distinta resolución por ejemplo.
* Height: xxxxpx;
Largo del foro: Esto en general no lo agrego pero a veces puede resultar útil depende el diseño que tengas planeado.
* Background: #xxxxxx;
Color de base o imagen: Aquí podrás agregar una imagen o un color sobre el que irá el foro (no es lo mismo que la imagen de fondo). Esto determinará sí tu foro es claro u oscuro por ejemplo, una manera sencillo de hacerlo es colocarle un color hexadecimal, los invitó a probar con distintos tonos partiendo como base que: #000 es negro, #fff es blanco, y a jugar.
* Border: xxpx solid #xxxxxx;
Bordes: ¿Quieres que el foro tenga bordes a los costados o totalmente o nada?. Esto es totalmente opcional. Recuerda que para usarlo debes poner el tamaño del borde, el tipo y luego el color. Además puedes hacer que solamente esté en un sitio o dos agregando la palabra de ubicación usando en vez de border, border-left (para izquierda), border-right (para derecha), border-top (para arriba) y border-bottom (para abajo).
* Margin: xxpx;
Margen: ¿Deseas dejar un espacio para colocar widgets o una imagen de fondo?, Incluso porque quieres que la barra de navegación se vea arriba.
Entonces un ejemplo de base sería así:
/*Cuerpo del Foro*/ #wrap { width: 1000px; margin-top: 10px; background: #151515; border: 30px solid #000; }
Espero no haberlos mareado mucho y que se entendiera, hay más opciones de cosas que se pueden poner aquí, pero no los quería cansar con un tutorial interminable. ¡Tengan bonito día y ojala les salga!.