Estilos CSS para Joomla

Crear templates para Joomla usando los estilos CSS para Joomla (como para cualquier otro CMS) no es sencillo pero tampoco imposible. Solo es cuestión de conocer un poco de PHP, HTML y CSS, y sin llegar a ser un sabelotodo o un experto. La experiencia viene con el uso y con el uso la sabiduría.  De igual modo debemos conocer qué usa cada CMS para manejar sus contenidos, como funciona y qué estilos utiliza, cuánto más sepamos de estas tres cosas mejor resultado tendrá el trabajo al que nos lancemos. Por eso, lo básico es leer el manual (RFM!., como dicen en Linux y perdón por el exabrupto: read the fucking manual)…

No soy un gran conocedor de Joomla ni mucho menos, de hecho hace menos de un año que lo utilizo. Si he desarrollado algunas webs usando html y css y conozco PHP porque en un tiempo estuve abocado a la tarea de armar un proyecto de software de gestión basado en este lenguaje y MySQL.

Descubriendo los CSS para Joomla

También participé en un proyecto de software libre de una fundación hoy desaparecida. Ahi aprendí lo que se, que no es mucho, y todo fue a fuerza de “comerme” manuales, googlear hasta más no poder y utilizar toda la materia gris de la que dispongo.

Volviendo al tema de las hojas de estilo, en webs “comunes” uno las utiliza como quiere, es decir, respetando las reglas pero utilizando nombres o identificadores al antojo.

Con Joomla es diferente

En Joomla! la cosa parece que no funciona así, sino que tiene sus propios identificadores para los estilos CSS para Joomla con toda una parafernalia de nombres que al principio me pareció chino básico. Ahi empezó mi debacle y mi aprendizaje porque la idea era llegar a armar una plantilla yo solo, sin “copiar” nada y sin adaptar algún template hecho, pero para ello debía conocer todos esos nombres que en principio parecían descolgados del planeta Saturno.

Se las comparto para que los novatos como yo vayan interiorizándose y para aquellos que saben más las tengan en cuenta para confeccionar un template de locos.

Listado estilos Joomla 1.5

/*Estilos para el Frontend*/

/* Archivo que los utiliza: components\com_contact\views\category\tmpl\default.php */
div.componentheading
div.contentpane
div.contentdescription
td.sectiontablefooter
td.sectiontableheader

/* Archivo que los utiliza: components\com_contact\views\category\tmpl\default_items.php */
a.category
td.sectiontableentry1
td.sectiontableentry2

/* Archivo que los utiliza: components\com_contact\views\contact\tmpl\default.php */
form#selectForm
div.componentheading
table.contentpane
td.contentheading

/* Archivo que los utiliza: components\com_contact\views\contact\tmpl\default_form.php */
form#emailForm
input#contact_name
label#contact_emailmsg
input#contact_email
input#contact_subject
label#contact_textmsg
textarea#contact_text
input#contact_email_copy
form.form-validate
div.contact_email
input.inputbox
input.required
input.validate-email
textarea.inputbox
textarea.required
button.button
button.validate

/* Archivo que los utiliza: components\com_content\helpers\icon.php */
span.hasTip

/* Archivo que los utiliza: components\com_content\models\article.php */
hr#system-readmore

/* Archivo que los utiliza: components\com_content\views\archive\tmpl\default.php */
form#jForm
div.componentheading
input.inputbox
button.button

/* Archivo que los utiliza: components\com_content\views\archive\tmpl\default_items.php */
ul#archive-list
div#navigation
li.row
h4.title
h5.metadata
span.created-date
span.author
div.intro

/* Archivo que los utiliza: components\com_content\views\article\tmpl\default.php */
div.contentpaneopen_edit
table.contentpaneopen
td.contentheading
a.contentpagetitle
td.buttonheading
span.small
td.createdate
td.modifydate
a.readon
span.article_separator

/* Archivo que los utiliza: components\com_content\views\article\tmpl\form.php */
input#title
input#created_by_alias
input#publish_up
input#publish_down
textarea#metadesc
textarea#metakey
table.adminform
td.key
input.inputbox
img.calendar
textarea.inputbox

/* Archivo que los utiliza: components\com_content\views\article\tmpl\pagebreak.php */
input#title
input#alt
td.key

/* Archivo que los utiliza: components\com_content\views\category\tmpl\blog.php */
div.componentheading
table.blog
td.article_column
div.blog_more

/* Archivo que los utiliza: components\com_content\views\category\tmpl\blog_item.php */
div.contentpaneopen_edit
table.contentpaneopen
td.contentheading
a.contentpagetitle
td.buttonheading
span.small
td.createdate
td.modifydate
a.readon
span.article_separator

/* Archivo que los utiliza: components\com_content\views\category\tmpl\blog_links.php */
a.blogsection

/* Archivo que los utiliza: components\com_content\views\category\tmpl\default.php */
div.componentheading
table.contentpane
td.contentdescription

/* Archivo que los utiliza: components\com_content\views\category\tmpl\default_items.php */
input.inputbox
td.sectiontableheader
td.sectiontableentry1
td.sectiontableentry2
td.sectiontablefooter

/* Archivo que los utiliza: components\com_content\views\frontpage\tmpl\default.php */
div.componentheading
table.blog
td.article_column
div.blog_more

/* Archivo que los utiliza: components\com_content\views\frontpage\tmpl\default_item.php */
div.contentpaneopen_edit
table.contentpaneopen
td.contentheading
a.contentpagetitle
td.buttonheading
span.small
td.createdate
td.modifydate
a.readon
span .article_separator

/* Archivo que los utiliza: components\com_content\views\frontpage\tmpl\default_links.php */
a.blogsection

/* Archivo que los utiliza: components\com_content\views\section\tmpl\blog.php */
div.componentheading
table.blog
td.article_column
div.blog_more

/* Archivo que los utiliza: components\com_content\views\section\tmpl\blog_item.php */
div.contentpaneopen_edit
table.contentpaneopen
td.contentheading
a.contentpagetitle
td.buttonheading
span.small
td.createdate
td.modifydate
a.readon
span.article_separator

/* Archivo que los utiliza: components\com_content\views\section\tmpl\blog_links.php */
a.blogsection

/* Archivo que los utiliza: components\com_content\views\section\tmpl\default.php */
div.componentheading
table.contentpane
td.contentdescription
a.category
span.small

/* Archivo que los utiliza: components\com_mailto\views\mailto\tmpl\default.php */
div.componentheading
input.inputbox
button.button

/* Archivo que los utiliza: components\com_mailto\views\sent\tmpl\default.php */
div.componentheading

/* Archivo que los utiliza: components\com_newsfeeds\views\categories\tmpl\default.php */
div.componentheading
table.contentpane
td.contentdescription
a.category
span.small

/* Archivo que los utiliza: components\com_newsfeeds\views\category\tmpl\default.php */
div.componentheading
table.contentpane
td.contentdescription

/* Archivo que los utiliza: components\com_newsfeeds\views\category\tmpl\default_items.php */
td.sectiontableheader
td.sectiontableentry1
td.sectiontableentry2
a.category
td.sectiontablefooter

/* Archivo que los utiliza: components\com_newsfeeds\views\newsfeed\tmpl\default.php */
table.contentpane
td.componentheading
td.contentheading

/* Archivo que los utiliza: components\com_poll\views\poll\tmpl\default.php */
form#poll
div.componentheading
div.contentpane

/* Archivo que los utiliza: components\com_poll\views\poll\tmpl\default_graph.php */
table.pollstableborder
th.sectiontableheader
td.sectiontableentry1
td.sectiontableentry2
td.smalldark

/* Archivo que los utiliza: components\com_search\search.php */
span.highlight

/* Archivo que los utiliza: components\com_search\views\search\tmpl\default.php */
div.componentheading

/* Archivo que los utiliza: components\com_search\views\search\tmpl\default_error.php */
table.searchintro

/* Archivo que los utiliza: components\com_search\views\search\tmpl\default_form.php */
input#search_searchword
input#area_{VALUE} /* Value is set programatically */ table.contentpaneopen
input.inputbox
input.button

/* Archivo que los utiliza: components\com_search\views\search\tmpl\default_results.php */
table.searchintro
table.contentpaneopen
span.small

/* Archivo que los utiliza: components\com_user\views\login\tmpl\default_login.php */
form#login
table.contentpane
div.componentheading
input.inputbox
input.button

/* Archivo que los utiliza: components\com_user\views\login\tmpl\default_logout.php */
form#login
div.componentheading
table.contentpane
input.button

/* Archivo que los utiliza: components\com_user\views\register\tmpl\default.php */
form#josForm
label#namemsg
input#name
label#usernamemsg
input#username
label#emailmsg
input#email
label#pwmsg
input#password
label#pw2msg
input#password2
form.form-validate
div.componentheading
table.contentpane
input.inputbox
input.required
button.button
button.validate

/* Archivo que los utiliza: components\com_user\views\register\tmpl\default_message.php */
div.componentheading
div.message

/* Archivo que los utiliza: components\com_user\views\remind\tmpl\default.php */
input#email
div.componentheading
form.josForm
form.form-validate
table.contentpane
label.hasTip
input.required
input.validate-email
button.validate

/* Archivo que los utiliza: components\com_user\views\reset\tmpl\complete.php */
input#password1
input#password2
div.componentheading
form.josForm
form.form-validate
table.contentpane
label.hasTip
input.required
input.validate-password
button.validate

/* Archivo que los utiliza: components\com_user\views\reset\tmpl\confirm.php */
input#token
div.componentheading
form.josForm
form.form-validate
table.contentpane
label.hasTip
input.required
button.validate

/* Archivo que los utiliza: components\com_user\views\reset\tmpl\default.php */
input#email
div.componentheading
form.josForm
form.form-validate
table.contentpane
label.hasTip
input.required
input.validate-email
button.validate

/* Archivo que los utiliza: components\com_user\views\user\tmpl\default.php */
div.componentheading

/* Archivo que los utiliza: components\com_user\views\user\tmpl\form.php */
input#name
input#email
input#username
input#password
input#password2
div.componentheading
input.inputbox
button.button

/* Archivo que los utiliza: components\com_weblinks\views\categories\tmpl\default.php */
div.componentheading
table.contentpane
td.contentdescription
a.category
span.small

/* Archivo que los utiliza: components\com_weblinks\views\category\tmpl\default.php */
div.componentheading
table.contentpane
td.contentdescription

/* Archivo que los utiliza: components\com_weblinks\views\category\tmpl\default_items.php */
td.sectiontableheader
td.sectiontableentry1
td.sectiontableentry2
td.sectiontablefooter

/* Archivo que los utiliza: components\com_weblinks\views\weblink\tmpl\form.php */
form#adminForm
input#jformtitle
input#jformurl
textarea#jformdescription
div.componentheading
input.inputbox
textarea.inputbox

/* Archivo que los utiliza: components\com_wrapper\views\wrapper\tmpl\default.php */
div.contentpane
div.componentheading

/* Archivo que los utiliza: libraries\joomla\database\database\mysql.php */
table#explain-sql

/* Archivo que los utiliza: libraries\joomla\database\database\mysqli.php */
table#explain-sql

/* Archivo que los utiliza: libraries\joomla\document\error\error.php */
table.Table
td.TD

/* Archivo que los utiliza: libraries\joomla\html\html.php */
span.editlinktip
span.hasTip
img.calendar

/* Archivo que los utiliza: libraries\joomla\html\html\behavior.php */
div#keepAliveLayer

/* Archivo que los utiliza: libraries\joomla\html\html\grid.php */
input#cb{ROW_NUMBER} /* Value is set programatically */

/* Archivo que los utiliza: libraries\joomla\html\html\grid.php */
span.editlinktip
span.hasTip

/* Archivo que los utiliza: libraries\joomla\html\pane.php */
dl.tabs
div.pane-sliders
div.panel
h3.jpane-toggler
h3.title
div.jpane-slider
div.content

/* Archivo que los utiliza: libraries\joomla\html\parameter.php */
table.paramlist
table.admintable
td.paramlist_description
td.paramlist_key
span.editlinktip
td.paramlist_value

/* Archivo que los utiliza: libraries\joomla\html\toolbar.php */
div.toolbar

/* Archivo que los utiliza: libraries\joomla\template\tmpl\adminfilters.html */
#search
input.text_area
input.button
select.inputbox

/* Archivo que los utiliza: libraries\joomla\template\tmpl\adminlists.html */
input#cb{ITEM_ID} /* Value is set programatically */ input.text_area

/* Archivo que los utiliza: libraries\joomla\template\tmpl\breadcrumbs.html */
span.breadcrumbs
span.pathway

/* Archivo que los utiliza: libraries\joomla\template\tmpl\calendar.html */
button#trigger_{ID}  /* Value is set programatically */
button.button

/* Archivo que los utiliza: libraries\joomla\template\tmpl\dtree.html */
div.expander

/* Archivo que los utiliza: libraries\joomla\template\tmpl\forms.html */
input#{NAME} /* Value is set programatically */
input#{VALUE} /* Value is set programatically */

/* Archivo que los utiliza: libraries\joomla\template\tmpl\help.html */
div#overDiv
a.tooltip

/* Archivo que los utiliza: libraries\joomla\template\tmpl\page.html */
form{FORMNAME} /* Value is set programatically */

/* Archivo que los utiliza: libraries\joomla\template\tmpl\tabs.html */
link#luna-tab-style-sheet
div#{PANEID} /* Value is set programatically */
div.tab-page
h2.tab

/* Archivo que los utiliza: modules\mod_banners\tmpl\default.php */
div.bannergroup
div.bannerheader
div.banneritem
div.clr
div.bannerfooter

/* Archivo que los utiliza: modules\mod_breadcrumbs\helper.php */
a.pathway

/* Archivo que los utiliza: modules\mod_breadcrumbs\tmpl\default.php */
span.breadcrumbs
span.pathway

/* Archivo que los utiliza: modules\mod_feed\tmpl\default.php */
table.moduletable
ul.newsfeed

/* Archivo que los utiliza: modules\mod_latestnews\tmpl\default.php */
ul.latestnews
li.latestnews
a.latestnews

/* Archivo que los utiliza: modules\mod_login\tmpl\default.php */
input#mod_login_username
input#mod_login_password
input#mod_login_remember
input.inputbox
input.button

/* Archivo que los utiliza: modules\mod_mainmenu\helper.php */
li#{ITEM ID} /* Value is set programatically */
span.separator

/* Archivo que los utiliza: modules\mod_mainmenu\legacy.php */
ul#mainlevel
ul#sublevel

/* Archivo que los utiliza: modules\mod_mostread\tmpl\default.php */
ul.mostread
li.mostread
a.mostread

/* Archivo que los utiliza: modules\mod_newsflash\tmpl\_item.php */
table.contentpaneopen
td.contentheading
a.contentpagetitle

/* Archivo que los utiliza: modules\mod_newsflash\tmpl\horiz.php */
table.moduletable

/* Archivo que los utiliza: modules\mod_newsflash\tmpl\vert.php */
span.article_separator

/* Archivo que los utiliza: modules\mod_poll\tmpl\default.php */
input#voteid{VOTE ID NUMBER} /* Value is set programatically */
table.poll
table.pollstableborder
input.button

/* Archivo que los utiliza: modules\mod_related_items\tmpl\default.php */
ul.relateditems

/* Archivo que los utiliza: modules\mod_search\helper.php */
input#mod_search_searchword
input.inputbox
input.button

/* Archivo que los utiliza: modules\mod_search\tmpl\default.php */
div.search

/* Archivo que los utiliza: modules\mod_sections\tmpl\default.php */
ul.sections

LESS y Joomla 3

A lo que se refiere joomla 3 y estilos CSS, los estilos CSS de modificación en las plantillas de Joomla 3.x difieren significativamente en comparación con las plantillas de Joomla 1.5 y 2.5.
La diferencia básica es que las plantillas de Joomla 3.x usan LESS como hojas de estilo de lenguaje a partir de las cuales se compilan los archivos CSS.
En otras palabras, si desea cambiar los estilos de plantilla, deberá modificar los archivos LESS (nombre_archivo.less) en lugar de los archivos CSS.
Según el framework template que se este utilizando, los archivos CSS se compilaran de forma automatica, o debera compilalrlos manualmente, como es el caso del Framework JA T3 de Joomlart.