Trabajar con CSS en Joomla! puede ser un poco intimidante al principio. Pero como con cualquier cosa nueva, después de estudiar y aprender los diferentes aspectos, actualizará fácilmente sus archivos CSS. Familiarizarse con Joomla! CSS, es importante saber en qué se diferencian del diseño típico de CSS con el que podría estar acostumbrado a trabajar para sitios HTML estáticos.
Como sabes con Joomla!, no trabajas con páginas net, trabajas con artículos, extensiones y módulos. Cada una de estas partes diferentes puede tener su propio CSS, según la plantilla con la que esté trabajando. A los efectos de este artículo, veremos la plantilla Milky Means, que es la plantilla principal al instalar Joomla! 1.5. Si está comenzando con la versión 1.6, los modelos pueden ser ligeramente diferentes, pero los conceptos básicos seguirán siendo los mismos.
Primero veamos dónde encontrar archivos CSS en Joomla!. Hay dos maneras de abordar esto. Puede encontrarlos en el directorio de archivos, por ejemplo, lo que descargó en su ftp o lo que instaló en su máquina native. Para encontrar los archivos CSS en el directorio de carpetas, abra la carpeta de plantillas, luego la carpeta rhuk_milkway y luego la carpeta css. Ahora verá unos 16 archivos CSS diferentes. No huyas gritando de inmediato. Solo necesita usar el archivo template.css. Adelante, ábrelo. Si comienza a jugar aquí con fines de prueba, es posible que desee cambiar el nombre del archivo para mantener el archivo unique.
Otra forma de encontrar el archivo CSS es a través del backend de Joomla! Abra la parte Administrador de su Joomla! sitio y navegue hasta el administrador de plantillas.
En el administrador de plantillas, elija la plantilla que desea actualizar de la lista de plantillas disponibles. Luego haga clic en Editar en la esquina superior derecha.
Desde allí, en el área de Configuración, puede cambiar las variaciones de coloration y fondo de su sitio, así como el ancho de la plantilla. ¿Recuerdas cuando navegaste por la estructura de carpetas, abriste la carpeta CSS y viste los 16 archivos CSS diferentes? ¿Ha notado que la mayoría de ellos se nombran por coloration, como negro, azul, verde, naranja, rojo, and so forth.? ? Estos son los archivos que Joomla! utiliza cuando cambia las variaciones de coloration desde el administrador de plantillas.
Ahora ya sabe cómo cambiar los colores de su sitio con solo hacer clic en un botón. Pero supongamos que desea actualizar las fuentes. Para hacer esto, profundicemos en el propio CSS. Para abrir el archivo CSS en Joomla!, haga clic en el botón Editar CSS, que se encuentra directamente encima del área de Configuración.
Ahora verá la misma lista de archivos CSS que vio en las carpetas del directorio. También verá que los archivos están marcados como escribibles o no escribibles. Desde mi experiencia private, no tomaría esta columna demasiado en serio. He realizado muchos cambios en los archivos CSS que están marcados como no escribibles y los cambios surten efecto independientemente. Continúe y seleccione el archivo template.css, luego haga clic en Editar cerca de la esquina superior derecha. Tenga cuidado, ahora es peligroso, los cambios que realice afectarán la plantilla a menos que haga clic en Cancelar antes de hacer clic en Guardar o Aplicar.
Quizás se pregunte cuál es la diferencia entre Guardar y Aplicar. Si hace clic en Guardar, los cambios realizados surtirán efecto, esta pantalla se cerrará y volverá a la pantalla de edición de plantillas. Si hace clic en Aplicar, los cambios surten efecto pero la pantalla permanece abierta. Esto es útil si desea realizar cambios, ver cómo se ven los cambios (haga clic en el botón Vista previa para ver su sitio en vivo; el botón Vista previa está directamente encima de los botones Guardar y Aplicar), luego continúe editando.
Un primer vistazo al archivo CSS le cube que es como cualquier otro archivo CSS con el que haya trabajado antes. Tú defines tus fuentes, enlaces, listas, and so forth. Cuando te desplazas hacia abajo, verás etiquetas div (al menos para la plantilla de la Vía Láctea) y definiciones para h1, h2, and so forth. Luego verás que los módulos tienen sus propios estilos. De esta manera, puede establecer diferentes atributos para sus artículos que para sus módulos. Esto proporciona un buen contraste entre los diferentes tipos de contenido en su sitio.
La parte del módulo de CSS afecta a cualquier módulo o extensión nuevo o de terceros que pueda agregar. Un hermoso aspecto de Joomla! es la compatibilidad entre modelos y módulos y cómo encajan todos juntos. No habría nada peor que un módulo que se vea completamente diferente a cualquier cosa en su sitio. Sería muy discordante y molesto para los visitantes.
En futuros artículos, profundizaré en Joomla! CSS y empiece a buscar configuraciones CSS más complejas. Si hay algo en specific que desea que cubra, por favor deje un comentario con lo que le gustaría ayudar.
