Miércoles, 29 Marzo 2017

Conociendo todos los estilos CSS para Joomla 1.5

Armar templates 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. 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 utiliza las utiliza como quiere, es decir, respetando las reglas pero utilizando nombres o identificadores al antojo. En Joomla! la cosa parece que no funciona así, sino que tiene sus propios identificadores 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.

En uno de esos días en que uno ya tiene el cerebro "quemado" de tánto código -estaba programando en Powerbuilder- me puse a googlear buscando adaptar parte de mi software con XML y CSS y dí sin querer con una web en donde enumeraban todas la lista de estilos que utiliza Joomla. La verdad es que son "una bocha" pero es más que interesantes aprenderlas, aunque sea de a poco, y por eso me las copié en un archivo de texto.

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.


/*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

Consultor y Desarrollador Proyectos Web
Author: tuxmerlin
Sobre mi...
Orientar personas es despertar vida
Otros contenidos de este Redactor

Debe registrarse para poder Comentar

Solojoomla, un lugar donde encontrar ayuda para realizar tus proyectos en la red. Con Foro de ayuda gratuita y formularios para contratación de servicios ....

Videos Turtoriales de ayuda Joomla, WordPress, Less, Css...

Portafolio webs Joomla, Wordpress, HTML5..