joomlablogger-logo

JoomlaBlogger
  • Home
  • Tutorials
    • Joomla extension tutorials
    • Joomla core tutorials
    • Template tutorials
  • Joomla Tips
    • Joomla security tips
    • General Joomla Tips
    • Beginners tips
    • Joomla extension tips
  • News
    • Weekly Joomla news posts
    • Joomla Evangelism
    • Personal views
    • Joomla Templates
    • Interviews
    • Joomla extension news
    • General web tips
    • Joomla events
    • Joomla development
  • Videos
  • SEO
    • Joomla SEO
  • About
    • Off-topic
      • Books I like
    • Advertise
      • Disclaimer
    • Subscribe
  • About
  • Subscribe
  • Joomla Tutoriales
  • Joomla CSS para principiantes

Joomla CSS para principiantes

Joomla CSS para principiantes
Kristoffer Sandven

by Kristoffer Sandven

Regularmente reviso las entradas que no han recibido respuesta en los foros de Joomla. Muchas veces, las cuestiones planteadas tienen que ver con la forma en la que se presenta la salida de Joomla. Esto puede tener que ver con el código de la plantilla, pero muchas veces tiene más que ver directamente con el CSS (hoja de estilos) de la plantilla.

Los nuevos usuarios suelen estar poco enterados de cómo funciona el CSS en Joomla. A veces hay incluso confusión acerca de si el problema que se plantea está relacionado con el propio “core” (núcleo) de Joomla o es cosa de la plantilla instalada. En este artículo trataré de daros una panorámica general acerca del uso de las hojas de estilos en Joomla. 

Recibí este email hace un tiempo, y es un claro ejemplo de lo que digo: 

Kris, el tipo de cosas con las que me peleo ahora con Joomla son temas de diseño. Tengo clientes a los que les encanta una plantilla -de hecho ellos eligen la plantilla- PERO quieren que el fondo sea distinto, o que haya más pestañas de las que caben en un menú horizontal, o quieren un área de usuario donde no la hay. “Oh, simplemente mueve eso a la izquierda y pon ahí nuestra dirección, y añade una barra azul entre este sitio y ese”.

Sólo conozco el suficiente PHP y CSS para ser peligroso. Sería de gran ayuda si simplemente pudiera entender todos los pasos necesarios para crear una nueva área de usuario, y que incluyera dónde poner el código PHP y CSS.

En este artículo escribiré acerca de cómo trabajo yo con CSS en Joomla. En un artículo posterior, me adentraré en cómo añadir una posición de módulo en una plantilla.

¿Qué es CSS?

Antes de que empecemos, debes saber qué es CSS. Creo firmemente que las habilidades más importantes que un usuario de Joomla debe tener son las relacionadas con HTML y CSS. Y la simpatía, claro ;).

Esto es lo que la Wikipedia dice acerca de las Hojas de Estilo en Cascada (CSS – Cascading Style Sheets):

Las hojas de estilo en cascada (en inglés Cascading Style Sheets), CSS es un lenguaje usado para definir la presentación de un documento estructurado escrito en HTML o XML (y por extensión en XHTML). El W3C (World Wide Web Consortium) es el encargado de formular la especificación de las hojas de estilo que servirán de estándar para los agentes de usuario o navegadores.

La idea que se encuentra detrás del desarrollo de CSS es separar la estructura de un documento de su presentación.

La parte fundamental de este extracto de la Wikipedia es en mi opinión lo más importante que debe saberse acerca  de CSS: Separación del contenido (HTML) de la presentación (CSS). Usando CSS, podemos tener un único archivo en el que centralizaremos todos nuestros estilos de forma separada a nuestros artículos de contenido de Joomla. De esta forma, grandes cambios de aspecto en nuestro sitio podrán abordarse de forma sencilla. Imagina que aplicaste estilos específicos e individuales a todos y cada uno de los artículos de tu sitio Joomla; sería una pesadilla realizar cambios de estilo – en caso de un rediseño completo del sitio o cosas similares.

El CSS de Joomla y las plantillas

Siempre me divierto cuando leo un 'tweet' diciendo algo como: “¡Joomla no soporta IE!”. O: “Joomla no está optimizado para los motores de búsqueda”. ¡Por supuesto que lo está! Pero es posible que la plantilla no. Esto depende de cómo esté construido el HTML de la plantilla y de cómo estén implementado el código CSS.

La mayoría de las veces,  los archivos CSS de la plantilla se encuentran en la carpeta /templates/nombre-de-la-plantilla/css.

Algunas plantillas tienen un único archivo CSS (llamado template.css casi siempre), si bien otros tienen unos cuantos. Para un rendimiento de página óptimo, el número de archivos css debería mantenerse al mínimo. Esto reduce el número de peticiones al servidor necesarias para mostrar la página. A veces puedes encontrarte con que la plantilla una un archivo CSS principal que importa todos los demás mediante esta sintaxis (ejemplo):

@import url('reset.css');
@import url('joomla.css');
@import url('typography.css');
@import url('modules.css');
@import url('custom.css');

Mejores prácticas con el CSS

Imaginemos que tienes instalada una plantilla de YooTheme. Podrías volverte majareta y cambiar todos los archivos CSS a lo loco. Probablemente no sería algo tan malo a fin de cuentas, ya que podrías volver a descargarte los archivos originales de nuevo si te hubieras cargado algo.

De cualquier manera, hay una manera mejor de modificar el CSS. Cuando quieras usar estilos CSS en una plantilla distintos de los que esta trae (nota del T: esto es lo que se llama “hacer override de plantilla”, o “hacer template override”), simplemente usa una hoja estilos distinta. YooTheme ya ha implementado esta característica en sus diseños (nota del T: de hecho, la mayoría de los proveedores de plantillas de pago ya lo hacen, aunque en el momento en el que se escribió el artículo era bastante novedoso). Han incluido un archivo CSS en blanco llamado custom.css que se carga justo después que el resto de archivos CSS de la plantilla. En este archivo es donde pongo mis cambios de estilo.

Si quiero actualizar mi plantilla, puedo simplemente copiar este archivo custom.css, actualizar mi plantilla a la última versión y subir de nuevo el archivo custom.css. ¡Y todo listo!

No repitas estilos si no es necesario

Al aplicar estilos a distintos elementos del HTML con CSS es importante ser específico. Y mantener tu hoja de estilos lo más escueta posible. Lo que quiero decir es que no necesitas repetir estilos simplemente porque quieres cambiar el estilo de un elemento. Digamos que, por ejemplo, tienes definido el siguiente estilo para el elemento H1 en tu archivo de CSS principal (template.css o similar):

h1 {
font-size:24px;
color:#d7d7d7;
margin-bottom:1em;
text-transform:uppercase;
}

El estilo normal para los elementos H1 es negrita. Quizá quieras añadir el estilo necesario para que el elemento de encabezamiento use el estilo de fuente normal, y no el negrita. Y, al mismo tiempo, no quieres que el elemento H1 use letras mayúsculas. Por supuesto, podrías hacerlo de la siguiente manera, añadiendo este código al archivo custom.css:

h1 {
font-size:24px;
color:#d7d7d7;
margin-bottom:1em;
text-transform:none;
font-weight:normal;
}

Esto funciona, pero no es un código de calidad. Repites todos los estilos incluso cuando sólo quieres alterar un único estilo y añadir otro. He aquí una mejor manera de hacerlo:

h1 {
text-transform:none;
font-weight:normal;
}

En este caso simplemente añades estilos que son distintos del original. Los otros estilos se mantienen inalterados.

Usa Firebug para probar tu CSS

Una de las herramientas que uso para probar mi CSS se llama Firebug. Es un complemento de Firefox que te proporciona mucha información acerca de la estructura del HTML y el CSS de una página web. Cuando tienes Firebug instalado, puedes hacer clic con el botón derecho sobre cualquier elemento y en el menú contextual que se abre elegir “Inspeccionar elemento”. Se abrirá la ventana de Firebug en la parte inferior de la pantalla; en ella podrás ver la estructura del HTML (a la izquierda) y la del CSS (a la derecha).

¡Y ahora empieza la diversión! Puedes empezar a experimentar con el CSS directamente en Firebug. ¿Quieres cambiar el margen de un elemento? ¿El color de fondo? ¿Eliminar el borde? Cualquier ajuste que desees está disponible para jugar con él, y el resultado se muestra instantáneamente en el navegador. Por supuesto, si refrescas la página los cambios se perderán. Cuando estés conforme con los cambios, copia el CSS en tu archivo personalizado (custom.css en el ejemplo) y súbelo a tu servidor por ftp.

Échale un vistazo a mi artículo previo sobre las 8 extensiones gratuitas para Firefox que todo usuario de Joomla debería tener (“8 Free Firefox extensions every Joomla user should have”, el artículo está en inglés, aunque será el próximo que traduciremos ;) ) .

Dedica algún tiempo a aprender CSS

Creo que todo usuario de Joomla/desarrollador web debería aprender algo de CSS y saber HTML de memoria. Esto hace mucho más sencillo modificar tus plantillas y conseguir lo que tú (¿y tu cliente?) quieres.

No es como aprender PHP. Apenas conozco más que unas cuantas cosas útiles sobre PHP. HTML y CSS sin embargo con como una segunda naturaleza para mí. Ello es así porque he invertido tiempo en aprender y practicar el uso de estas habilidades. Esto es especialmente cierto en el caso de CSS.

Es fácil empezar con CSS y Joomla

La manera más fácil de empezar a aprender CSS es echarle un vistazo al template.css de tu plantilla.  Fíjate en su estructura y trata de cambiar alguno de los estilos. No olvides hacer una copia de seguridad del archivo antes.

Podrías probar a cambiar las etiquetas HTML de los encabezamientos en primer lugar. ¿Quieres que la etiqueta H2 sea un poco más pequeña?  Ya lo tienes ;). Y se trata de un cambio de gran calado, que afecta a todas las etiquetas H2 de tu sitio. Otras etiquetas que puedes cambiar son la a (los enlaces web), la p (los párrafos, por ejemplo probando ajustando el espaciado entre líneas ) y las ul e il (las listas).

Lectura recomendada para aprender CSS

Para aprender CSS, siempre recomiendo los libros del gurú del CSS Eric Meyer. Tiene algunas grandes intuiciones y un vasto conocimiento acerca del CSS. Describe su uso de una manera fácil de entender, y proporciona un montón de ejemplos de uso en sus libros. Mi primer libro sobre CSS fue “Eric Meyer on CSS”, y me enseñó muchísimo. Por ejemplo, recorre todo el proceso de convertir un diseño basado en tablas en otro basado en hojas de estilo en cascada (CSS). Explicando cada paso del camino.

Otro gran recurso es “A List Apart”. Es un portal (en inglés) acerca de desarrollo web, y explica muchas técnicas sobre CSS. “La revista A List Apart explora el diseño, desarrollo y significado del contenido web, centrándose especialmente en los estándares web y las buenas prácticas.” ¡Realmente genial! 

Este artículo es una traducción de Gnumla del original 'Joomla CSS for beginners', escrito por Kristoffer Sandven en JoomlaBlogger.

Translation by Isidro Baquero, gnumla.com: CSS para principiantes


  • twitter
  • facebook
  • google+
  • pinterest
  • linkedin
  • pocket
Read 50153 times Originally published on Friday, 15 January 2010 02:00
Last modified on Friday, 16 March 2012 15:22
 
comments powered by Disqus
Published in Joomla Tutoriales
  • Beginners tips
  • templates
  • CSS
  • principiantes

Related items

  • Joomla business templates, June 2013
  • Nuevvo relaunches as Joomla template club
  • Joomla blog posts from around the web (9/12)
  • What if Frank Gehry were a web-designer?
  • How to hide the "Home" menu item on your frontpage

Most popular posts

  • How to add a PDF file to a Joomla article

    A common task many web site owners do regularly, is to add PDF files or other documents to their articles. In this post, you will learn how to add a link to a PDF or any other document file to a…
    in Joomla core tutorials Read more...
  • Joomla CSS for beginners

    Joomla CSS for beginners I regularly scan the unanswered questions in the Joomla forums. Many times, the questions posted have to do with how the output of Joomla is presented. This may have to do with the template, but oftentimes it has to do…
    in Joomla beginners tips Read more...
  • Oops: Page not Found

    Are you lost? Sorry, but the content you requested could not be found. Did you write the correct address? You have a few options now - don't despair: - Use the top menu to navigate my articles- Visit the sitemap…
    in Uncategorised Read more...
  • Six steps to get your Joomla site indexed in Google

    Six steps to get your Joomla site indexed in Google OK, so you have a brand new site going on - and it's all made in Joomla. But how to get traffic from the search engines? There are several things you can do to ensure that Google and other search…
    in Joomla SEO Read more...
  • 9 awesome free Joomla templates for Joomla 1.5

    9 awesome free Joomla templates for Joomla 1.5 Finding a great template for your Joomla site can be a challenge. There are tons of free Joomla templates out there, but to be honest: Most of them are junk. Finding quality free Joomla templates is important to ensure you…
    in Templates Read more...
  • Tutorial: How to add module positions to a Joomla template - part 1

    Tutorial: How to add module positions to a Joomla template - part 1 Last week, I did a post on how to add Javascript snippets to Joomla. The way I did this was by adding module positions to the template. In this post, I will delve deeper into how to add module positions…
    in Joomla template tutorials Read more...
  • Joomla tutorial: Link to Joomla! articles with no menu item

    Sometimes, you might want to create a Joomla page that is not available through a menu. You only want the page to appear when the URL is entered. This might be a 'thank you' page after form submission, a log…
    in Joomla core tutorials Read more...
  • Joomla tutorial: Free yourself with Joomla template overrides

    Even though Joomla is a great platform as it is, there are times when you will have to alter the core files to fit certain needs. For instance, you can't stand how the elements in Joomla content are put together…
    in Joomla core tutorials Read more...
  • How to insert a PDF file in a Joomla article with JCE File Manager

    How to insert a PDF file in a Joomla article with JCE File Manager Earlier this week, I explained how to add a link to a PDF file to an article by using the Joomla core installation. This time around, I will show you how to accomplish the same using the File Manager plug-in…
    in Joomla extension tutorials Read more...
  • How to optimize your Joomla site for iPad

    How to optimize your Joomla site for iPad Earlier this year I went to London for a couple of days of vacation. And, as the Mac addict I am, I "had to" visit the Apples Stores. The first one I visited was the one in Regent Street, and…
    in Joomla template tutorials Read more...

Recent comments

  • Sitemap
  • Log in
  • Joomla CMS
  • Subscribe
  • Log in

The Joomla!® name is used under a limited license from Open Source Matters in the United States and other countries.
joomlablogger.net is not affiliated with or endorsed by the Joomla!® Project or Open Source Matters.
The Joomla!® logo is used under a limited license granted by Open Source Matters the trademark holder in the United States and other countries.

All content is copyright © 2009-2013 JoomlaBlogger.net - owned by iSee Communications as, Norway

© 2008 - 2023 Joomlablogger.net / iSee Communications as, Oslo, Norway.

Joomlablogger.net is not affiliated with or endorsed by The Joomla! Project™. Use of the Joomla!® name, symbol, logo and related trademarks is permitted under a limited license granted by Open Source Matters, Inc.

     
  • Home
  • Tutorials
    • Joomla extension tutorials
    • Joomla core tutorials
    • Template tutorials
  • Joomla Tips
    • Joomla security tips
    • General Joomla Tips
    • Beginners tips
    • Joomla extension tips
  • News
    • Weekly Joomla news posts
    • Joomla Evangelism
    • Personal views
    • Joomla Templates
    • Interviews
    • Joomla extension news
    • General web tips
    • Joomla events
    • Joomla development
  • Videos
  • SEO
    • Joomla SEO
  • About
    • Off-topic
      • Books I like
    • Advertise
      • Disclaimer
    • Subscribe