CSS J! A Fondo

CSS Joomla A Fondo

Tutorial avanzado sobre CSS enfocado a Joomla y sus estilos.Angus Yg, AutorSe presuponen conocimientos de maquetación, html y PHP.

 

Este tutorial se publica con licencia Creative Commons Atribución-No Comercial-Sin Derivadas-Argentina y está registrado en SafeCreative. Se prohibe la reproducción total o parcial de los artículos sin el previo consentimiento del autor. Solicitar permiso.

Por: Angus Yg : Metalero

El objetivo de este tutorial es darle al diseñador una introducción muy breve a CSS (Cascading Style Sheet, Hojas de Estilo en Cascada), ya que presupongo que algo sabe del tema, y luego adentrarme en los estilos propios de Joomla de manera que pueda personalizar su plantilla, sea comprada o bajada de la web gratuitamente, al máximo.

Miércoles, 29 Julio 2009
(Tiempo estimado: 2 - 4 minutos)

Todos sabemos que CSS se utiliza para maquetar, pero este término muchas veces es bastardeado y se lo considera como algo "superior", inalcanzable, incomprensible, sin embargo veremos que es más fácil de lo que pensamos y no solo eso, sino que además, nos permite obtener resultados brillantes y darle una gran presentación y apariencia a nuestra web impecable o deseada. Por otro lado, es más fácil maquetar que crear webs a puro HTML e imágenes.

[...]

Por: Angus Yg : Metalero

Haciendo un repaso muy ligero podemos decir que el código CSS puede estar embebido en la web, es decir dentro del HMTL, o fuera del HTML, enlazándolo mediante un link con una etiqueta HTML especial. En ambos casos todo debe estar ubicado dentro de las etiquetas "head".

Miércoles, 29 Julio 2009
(Tiempo estimado: 2 - 4 minutos)

Para embeberlo debemos utilizar las etiquetas HMTL:

<style type="text/css"> código css </style>

Para vincularlo, debemos poner un enlace dentro de head de la forma:

<link href="/estilo.css" rel="stylesheet" type="text/css" />

Donde estilo.css sería nuestro archivo de estilos.
Para el diseño de plantillas Joomla se utiliza el segundo caso con una pequeña modificación:

[...]

Por: Angus Yg : Metalero

La continuidad de este tutorial estará compuesta por distintos capítulos en los que aprenderemos lo siguiente:
- Adaptar una plantilla CSS gratuita para usarla en Joomla
- Modificar la plantilla "Ja_Purity" de JoomlaArt y que trae Joomla
Me he salteado la creación de una plantilla de cero porque ya fue objeto de otro tutorial que hay en esta web, sin embargo, al final de este tutorial veremos cómo crear una plantilla desde cero utilizando Adobe Photoshop.

Lunes, 21 Septiembre 2009
(Tiempo estimado: 1 - 2 minutos)

El software que utilizaremos para todas estas tareas será el siguiente:
1. Servidor Local: recomiendo Xampp con Joomla la última versión instalado. Al respecto de Xampp u otro similar, les recomiendo que tengan instalado PHP en su versión 5.2 ya que la versión 5.3 ocasiona problemas con algunas extensiones debido a nuevas funciones y comandos.
2. Editor de texto: recomiendo Notepadd++ ya que no solo es GNU sino que además es muy completo, sencillo de manejar y está en castelllano:
3. Navegador Mozilla-Firefox.
4. Adobe Photoshop (de pago).

[...]

Por: Angus Yg : Metalero

CSS como dijimos significa Cascading Style Sheet, traducido Hojas de Estilo en Cascada, pero ¿por qué lo de "cascading"? Esto se refiere a la de herencia que poseen los elementos, es decir, cuando definimos una regla para determinada propiedad las demás heredarán dichas propiedades. {definitionbot=disable}Veamos un ejemplo: supongamos un div identificado como:

Martes, 04 Agosto 2009
(Tiempo estimado: 3 - 6 minutos)

<div id="main" class="mainbg1">

dentro del CSS podemos hacer algo como esto:

#main{
width: 100%;padding: 4px; }

y la clase mainbg1 así:

[...]

Por: Angus Yg : Metalero

Si bien este capítulo será teórico y conceptual, he querido detenerme un poco más y explayarme en algunas definiciones ya que es necesario que se comprenda el punto de partida del diseño. Siempre el primer paso es el más importante y si arrancamos con el pie izquierdo sin entender bien hacia donde vamos no llegaremos a un buen destino.

Miércoles, 05 Agosto 2009
(Tiempo estimado: 2 - 4 minutos)

Cuando encaramos una maquetación para Joomla, sea su creación o adaptación, tenemos que tener en cuenta tres actividades distintas y ordenadas:

  • La generación o estado de las posiciones modulares
  • El estilo de dichas posiciones
  • Las gráficas o imágenes

Dichas actividades tienen que ser cuidadosamente planeadas y enfocadas en el objetivo final de la web ya que no es lo mismo hacer una plantilla para un profesional que para un diario digital o una red social.

[...]

Joomla-GNU.com not affiliated with or endorsed by Open Source Matters or the Joomla! Project. The Joomla!, logo and name is used under a limited license from Open Source Matters in the United States and other countries.