====== Templates de Joomla! ======

[[http://www.themeswiki.org/Creating_Joomla_1.5_Templates|Creating Joomla 1.5 Template]]

L'estructura bàsica del template és:
  * css  
  * images
  * index.html
  * index.php
  * templateDetails.xml
  * template_thumbnail.png
  * params.ini

===== L'API de Joomla =====

====index.php====
<code>
<?php echo $this->language; ?>
<?php echo $this->baseurl; ?>
<?php echo $this->template ?>

<jdoc:include type="head" />
<jdoc:include type="component" />
<jdoc:include type="message" />
<jdoc:include type="modules" name="top" />
<jdoc:include type="modules" name="debug" />

<div id="leftcolumn">

	<?php if($this->countModules('left')) : ?>

	<jdoc:include type="modules" name="left" style="rounded" />

	<?php endif; ?>

</div>

<?php if($this->countModules('user1 or user2')) : ?>

<?php echo JText::_('Powered by') ?>
</code>

====templateDetails.xml====

<code>
	<positions>

		<position>left</position>
		<position>...</position>

	</positions>
	<params>

		<param name="colorVariation" type="list" default="white" label="Color Variation" description="Color variation to use">

			<option value="blue">Blue</option>

			<option value="red">Red</option>

		</param>
	</params>
</code>

====params.ini====
<code>
colorVariation=blue
backgroundVariation=blue
widthStyle=fmax

Per mostrar un paràmetre:
<?php echo $this->params->get('colorVariation'); ?>
</code>

===== CSS de Joomla =====

CSS del content:

    * article_separator
    * author
    * content_email
    * content_rating
    * content_vote
    * contentdescription
    * contentpagetitle
    * contentpane
    * contenttoc
    * created-date
    * intro
    * title
    * modifydate
    * small
    * smalldark

CSS dels components:

    * bannerfooter
    * bannergroup
    * bannerheader
    * banneritem
    * blog
    * blog_more
    * blogsection
    * button
    * buttonheading
    * latestnews
    * loclink
    * message
    * metadata
    * module
    * newsfeed
    * pollstableborder
    * read
    * searchintro
    * sections
    * sectiontable_footer
    * sectiontableentry
    * sectiontablefooter
    * sectiontableheader
    * sublevel
    * wrapper

==== templates_css.css ====
<code>
/* STANDARD COMPLETE CSS FOR MAMBO 4.5.X TEMPLATES */

/* By Dinh Viet Hung (C) http://www.mambotheme.com: free templates and Professional Templates Club */







/* DEFAULT SETTINGS */ 

/* Below are  default settings are used when no other style has been defined.*/

body {}/*Style for the body tag of your website, controls font family page background, etc.*/

p {} /*formatting all <div> (division) items.  This is a catch-all that only applies when no other style has been defined.*/

td {} /*formatting all 

<td> items. This default setting is used when no other style has been defined.*/

tr {} /*formatting all 

<tr> items.  This default setting is used when no other style has been defined.*/

ul {} /*formatting all UL (unordered list) items. This default setting is used when no other style has been defined.*/

a:link {} /* general links style*/

a:visited {}

a:hover {}

hr {} /* horizontal line in your template*/

hr.separator {}



/* FORMS SETTINGS */ 

.button {}

.inputbox {}

.search {} /*formatting the <div> which holds search items: inputbox, search button...*/





/* NAVIGATION/MENU SETTINGS */

a.mainlevel{} /* this styling is for the MAIN items in the menu */

a.mainlevel:link {}

a.mainlevel:visited {}

a.mainlevel:hover {}



#active_menu {} /* this styling is for the menu item when it is active, even in main/sub position*/



ul#mainlevel-nav {}

ul#mainlevel-nav li{}

#mainlevel-nav a:link {}

#mainlevel-nav a:visited{}

#mainlevel-nav a:hover {}



a.sublevel{} /* this styling is for menu items that HAS A PARENT */

a.sublevel:link {}

a.sublevel:visited {}

a.sublevel:hover {}



.pagenavbar {} /*Sets the style for the footer navigation ("<< Start < Prev Next > End >>") when they do not appear as hyperlinks (when only a few articles exist).*/

.pagenavbar:link {} /*Style for the footer navigation ("<< Start < Prev Next > End >>") when they become hyper links*/

.pagenavbar:visited {}



.pagenav {} /* as the name implies, this is for formatting texts for those "<< Start < Previous 1 Next > End >>" links */

a.pagenav:visited {}

a.pagenav:hover {}



a.readon:link {} /*Style for the "Read More" link that is displayed for large content items*/

a.readon:hover {}

a.readon:visited {}



.back_button {} /*Style for the "BACK" button*/

.pagenav_prev {} /*Style for the PRE button*/

.pagenav_next {} /*Style for the NEXT button*/



.latestnews ul {} /*Style for latest news list - by default, latest news is user1 module*/

.latestnews li {}



.mostread ul{} /*Style for most popular list - by default, most popular is user2 module*/

.mostread li{}



/* CONTENT PAGE SETTINGS */

a.category:link {}

a.category:hover {}

a.category:visited {}



.blogsection {} /* Formatting the links in Blog section */

.blog_more {} /*The "More" text in blog section*/

a.blogsection:link {} /* set the link format */

a.blogsection:visited {} /* same as above, but to set the visited link format */

a.blogsection:hover {} /* same as above, but for links with mouse pointer over it */



.componentheading {}/* Title of the component being used to display the content.*/

.contentheading {} /* Title of the content, article, etc. being displayed.*/

.contentpane {} /* Table that holds all non-article information (components, category lists, contact forms, etc).*/

.contentpaneopen {} /* Table that holds the actual text for an article.*/

.contentpagetitle {} /*Title of articles*/



a.contentpagetitle:hover {} /*Title of articles when appeare as links */

a.contentpagetitle:link {}

a.contentpagetitle:visited {}



.contentdescription {} /* Formating the "DESCRIPTION" of sections, categories (News/Weblinks/Latest news...) */

table.contenttoc {} /* Formating the table of the Tables of Contents for multiple pages content or article */

table.contenttoc td {} /* same as above, used to format the td and able cells */

table.contenttoc th {} /* same as above, used to format the th of "Tables of Content" ( normally Article Index)*/

table.contenttoc td.toclink {} /* same as above, used to format toc link texts*/

a.toclink:link {} /* same as above, used to format toc link text status*/

a.toclink:visited {} 

a.toclink:hover {} 





/* MAMBO SECTIONS LISTINGS */

.sectiontableheader {} /* This is for styling the section table headers on a SECTION's page.

	Example: table header of "Date", "Item Title", "Author" and "Hits"? */

.sectiontableentry1 {} 

.sectiontableentry2 {}





/* MAMBO MODULES FORMATTING */

table.moduletable {} /* Formatting the module table */

table.moduletable th {} /* Formatting the module header, and the module titles */

table.moduletable td {} /* Formatting the table cells of the module table */





/* MISCELLANEOUS */



/* Dates , Authors*/

.createdate {} /* For styling the date the content/articles are created under contents title */

.modifydate {} /* Formating "Last updated on" text at the end of articles/contents */

.small {} /* Formating "Written by:...." text */

.smalldark {}/*Found in poll result page, for " Number of Voters".. text */



/* Polls */

.poll {} /* format the td of poll table */

.pollstableborder {} /* set the border properties of the polls voting table */

 

/* Weblinks */

.weblinks{} /* well.. to format the link's titles under the "Weblinks" 

	section on the frontend */

a.weblinks:hover {} /* same as above, but for link with mouseover */

 

/* Newsfeeds */

.newsfeedheading {} /* The newsfeed title. NOTE: This will not affect the newsfeed's news title! */

.newsfeeddate {} /* yeah.. the date on the newsfeed */

.fase4rdf {} /* this is the body text of the newsfeed */

 

/* Search page */

table.searchintro {} /* This is for formatting the box with "Search Keyword: test returned 4 matches" box

	that appears after you have entered a search value. It appears on the mainbody

	with the search results */





/* MAMBO TABBED FRONTEND ADMIN INTERFACE */

/* The CSS below efines how the frontend admin interface when logged in */

 

.ontab {}/* For styling of the "Tab" buttons when editing contents through the frontend as admin. 

This .ontab is the styling for the tab when it is active or after its "clicked" */

.offtab {} /* Same as above, used for styling of the "Tab" buttons when editing contents through the frontend. 

This the styling for the tab when it is NOT active or when it is NOT "clicked" */

.tabpadding {} /* this style is used set the size of the tab in the above */ 

.tabheading {} /* Not too sure what this is used for. Couldn't find anything related to it yet at the moment */

.pagetext {} /* this style is used to style the content of the editing form contents (where HTMLArea sits and all its forms + contents) in

the frontend Administration interface */ 
</code>


==== editor.css ====
<code>
/*======= Joomla CSS default =======*/
/* Estilo para la etiqueta del body de su sitio Web, controla la familia fonts de su página, el background, etc.*/
body {}

/*formateo de todos los artículos con <div> (division). Esto es un cath-all que sólo se aplica cuando ningún otro estilo ha sido definido.*/
p {}

/*formateo de todos los artículos con la etiqueta <td>. Este ajuste por defecto es usado cuando ningún otro estilo ha sido definido.*/
td {}

/*formateo de todos los artículos con la etiqueta <tr>. Este ajuste por defecto es usado cuando ningún otro estilo ha sido definido.*/
tr {}

/*formateo de todos los artículos (lista no solicitada) con la etiqueta <UL>. Este ajuste por defecto es usado cuando ningún otro estilo ha sido definido.*/
ul {}

/* Estilo General de los enlaces*/
a:link {}

/*Estilo General para los enlaces visitados*/
a:visited {}

/*Estilo General para cuando el puntero pasa por encima.*/
a:hover {}

a img {

	border: none;

}

/* Línea horizontal en su plantilla*/
hr {}

/*separador de noticias ( ___ )*/
hr.separator {}

/*======= AJUSTES DE FORMAS =======*/
/*boton*/
.button {}

/*campos de escritura de formularios, caja de campos.*/
.inputbox {}

/*El Formateo de <div> que sostiene artículos de búsqueda: inputbox, palabra del search...*/
.search {}

/*======= NAVEGACION/AJUSTES DE LOS MENUS, TOP MENU Y MAIN MENU, ETC., =======*/
/* Este estilo aplica para los elementos del MAIN en el menu */
a.mainlevel{}

/*Todos los enlaces vistos normalmente.*/
a.mainlevel:link {}

/*Enlaces visitados edel menu principal*/
a.mainlevel:visited {}

/*Vista de los enlaces cuando el puntero pasa por encima*/
a.mainlevel:hover {}

/* Este estilo es para el elemento del menú cuando este está activo, hasta en una subposición en el main*/
#active_menu {}

/*generalmente es usado para definir el estilo del top menu*/
ul#mainlevel-nav {}

/* define el estilo de los enlaces de una lista del top menu*/
ul#mainlevel-nav li{}

/*enlaces vistos normalmente*/
#mainlevel-nav a:link {}

/*enlaces visitados */
#mainlevel-nav a:visited{}

/*cuando el puntero del mouse pasa por encima*/
#mainlevel-nav a:hover {}

/* Esta estilización es para elementos del submenu que tienen a un PADRE (submenus)*/
a.sublevel{}

/*(elemento subnivel) */
/*enlaces vistos normalmente*/
a.sublevel:link {}

/*enlaces visitados*/
a.sublevel:visited {}

/*cuando el puntero del mouse pasa por encima*/
a.sublevel:hover {}

/*=======PageNav=======*/
/*Coloca el estilo para la navegación en el footer (pie de página) ("<< Start < Prev Next > End >>") cuando ellos no aparecen como hipervínculos (cuando solo existan unos artículos).*/
.pagenavbar {}

/*Estilo para el footer de navegación; pie de página ("<< Start < Prev Next > End >>") cuando ellos hacen de hiper enlaces */
.pagenavbar:link {}

/*estilo que define cuando el enlace es visitado*/
.pagenavbar:visited {}

/* es el nombre implicado, esto es para formatear textos para aquellos "<< Start < Previous 1 Next > End >>" enlaces del footer */
.pagenav {
	margin: 0.1em 0.3em 0.1em 0; padding: 0 0.5em; border: 1px solid #333; text-decoration: none;
}

/*visitados*/
a.pagenav:visited {}

/*cuando se pasa por encima de estos.*/
a.pagenav:hover {}

/*Estilo para el "Read More" (Leer Más…) Es el enlace que despliega en una página nueva los contenidos extensos de los artículos */
a.readon:link {}

/*cuando se pasa por encima del leer más..*/
a.readon:hover {}

/*cuando es visitado*/
a.readon:visited {}

/*Estilo para el botón “Atrás”("BACK" button)*/
.back_button {}

/*Estilo para el botón PREV*/
.pagenav_prev {}

/*Estilo para el botón NEXT*/
.pagenav_next {}

/*Estilo para la lista de las últimas noticias (latest news) – por default, latest news es el modulo user1.*/
.latestnews ul {}

/* Estilo para los elementos en forma de lista del lates news*/
.latestnews li {}

/*Estilo para la lista del modulo “más visto” – por defecto, más visto (most popular) es el modulo user2*/
.mostread ul{}

/*Estilo para los elementos en forma de lista del most popular*/
.mostread li{}

/*======= AJUSTE DE PAGINA REFERENTE A LOS CONTENIDOS=======*/
/*enlaces*/
a.category:link {} 

/*cuando se pasa por encima de ellos.*/
a.category:hover {}

/*enlaces visitados.*/
a.category:visited {}

/* Formateo de los enlaces en Blog section */
.blogsection {}

/*El "Más" (More) texto en blog section*/
.blog_more {}

/* Pone el formato del enlace*/
a.blogsection:link {}

/* mismo como encima, para poner el formato del enlace visitado*/
a.blogsection:visited {}

/* mismo como encima, para poner el formato a los enlaces cuando el puntero del mouse pase sobre este*/
a.blogsection:hover {}

/* Título del componente usado para desplegar el contenido, Blog, Contacs etc., .*/
.componentheading {}

/* Título del contenido, artículo, etc. para ser mostrado.*/
.contentheading {}

/* Tabla que sostiene toda la información que no son artículos (componentes, lista de categorías, formularios de contacto, etc).*/
.contentpane {}

/* Tabla que sostiene el texto actual para un artículo.*/
.contentpaneopen {}

/*Título de los artículos*/
.contentpagetitle {}

/*Título de los artículos cuando aparecen como enlaces */
a.contentpagetitle:hover {}

/*titulos vistos como enlaces.*/
a.contentpagetitle:link {}

/*titulos visitados.*/
a.contentpagetitle:visited {}

/* Formateo de la "DESCRIPCION" de secciones, categorías (News/Weblinks/Latest news...) */
.contentdescription {}

/* Formatea la tabla, de las tablas de contenidos para páginas múltiples de contenido o artículos */
table.contenttoc {}

/* mismo como encima, usado para formatear el td y la tabla, como celdas */
table.contenttoc td {}

/* mismo como encima, usado para formatear el th de "Tablas de Contenido" ( Artículos normales del Index)*/
table.contenttoc th {}

/* mismo como encima, usado para formatear texto toc link texts*/
table.contenttoc td.toclink {}

/* mismo como encima, usado para formatear el estado del texto enlazado (toc link text status)*/
a.toclink:link {}

/* texto enlazado una vez visitado*/
a.toclink:visited {}

/* texto enlazado cuando el puntero pasa encima de este*/
a.toclink:hover {}

/*======= LISTADO DE SECCIONES MAMBO =======*/
/* Esto es para estilizar la cabecera de las tables de la sección en una SECTION'es de la página. Ejemplo: cabecera de la tabla "Date" (fecha), "Item Title" (título del artículo), "Author"(autor) y "Hits" (vistas)*/
.sectiontableheader {}

/*Barra de color blanco.*/
.sectiontableentry1 {}

/*Barra de color gris, por lo regular estas se vén en las polls, contactos etc.,.*/
.sectiontableentry2 {}

/*======= FORMATEO DE LOS MODULOS DE MAMBO =======*/
/* Formateo de la tabla del modulo */
table.moduletable {}

/* Formateo de la cabecera del modulo, y el título del modulo */
table.moduletable th {}

/* Formateo de las celdas de la tabla, en la tabla del modulo */
table.moduletable td {}

/*======= MISCELANEOS =======*/
/*======= Fechas , Autores=======*/
/* Para estilizar la fecha de creación del contenido /artículos, mostrado bajo el título del contenido */
.createdate {}

/* Formateo del texto "Last updated on" (“Ultima actualización en”) al final de los artículos/contenidos */
.modifydate {}

/* Formateo del texto "Written by:...." (Escrito por: ...)*/
.small {}

/*Encontrado en página de resultados de encuesta, para el formateo del texto " Number of Voters".. (Número de votos) */
.smalldark {}

/*======= Encuestas, Polls =======*/
/* formato del .td de la tabla de encuesta */
.poll {}

/* pone las propiedades del borde en la tabla de la encuesta de votación */
.pollstableborder {}

/*======= Enlaces del Sitio, componente Weblinks =======*/
/* Para formatear los títulos enlazados bajo el "Weblinks" Sección en el frontend */
.weblinks{}
/* mismo como encima, para los enlaces con el mouse encima del enlace */
a.weblinks:hover {}

/*======= Newsfeeds =======*/
/* El título del newsfeed. NOTA: Este no afectará el título de noticias del newsfeed! */
.newsfeedheading {}
/* La fecha en la newsfeed */
.newsfeeddate {}
/* Esto es el cuerpo del texto de la newsfeed */
.fase4rdf {}

/*======= Buscar página =======*/
/* Esto es para formatear la caja cuando "Buscar palabra: la prueba devuelve 4 tiempos" la caja que aparece después de que usted ha insertado un valor de búsqueda. Aparece en el mainbody con los resultados de búsqueda */
table.searchintro {} 

/*======= MAMBO TABBED FRONTEND ADMIN INTERFACE =======*/
/* El CSS de abajo define como el frontend la interface de administración cuando ha entrado al sistema */
/* Para estilizar los botones "Tab" (etiqueta) cuando sean editados los contenidos a través del front end como en la aministración. Este .ontab es la estilización para la etiqueta tab cuando esta esté activa o después de "pulsarse" */
.ontab {}

/* mismo como encima, usado para estilizar los botnoes de etiqueta "Tab" cuando sean editados los contenidos a través del frontend. Esta es la estilización para la etiqueta tab cuando esta sea “No active” o cuando esta no sea “Pulsada” */
.offtab {}

/* este estilo es usado poniendo el tamaño de la etiqueta en el susodicho*/
.tabpadding {}

/* No estoy seguro para cuando es usado. No he logrado encontrar nada relacionado con esto hasta el momento. */
.tabheading {}

/* Este estilo es usado para estilizar el contenido de la edición de formas de contenido (cuando HTMLArea se instala y en todas sus formas + contenidos) en el frontend e Interface de Administración */
.pagetext {}

/*======= Error, tips =======*/
/* Tips, Error, Message, Hightlight*/

.error {

	padding: 5px 5px 5px 25px;

	background: url(../images/bullet-error.gif) no-repeat center left;

	color: #CC0000;

}



.message {

	padding: 5px 0 5px 25px;

	background: url(../images/bullet-info.gif) no-repeat center left;

	color: #006DA3;

}



.tips {

	padding: 5px 5px 5px 25px;

	background: url(../images/bullet-tips.gif) no-repeat center left;

}



.highlight {

	border-bottom: 1px dotted #006DA3;

	padding: 0 1px;

	background: #E7F4FA;

	font-weight: bold;

}


/* Tooltips */

.tool-tip {

	float: left;

	background: #ffc;

	border: 1px solid #D4D5AA;

	padding: 5px;

	max-width: 200px;

}



.tool-title {

	padding: 0;

	margin: 0;

	font-size: 100%;

	font-weight: bold;

	margin-top: -15px;

	padding-top: 15px;

	padding-bottom: 5px;

	background: url(../../system/images/selector-arrow.png) no-repeat;

}



.tool-text {

	font-size: 100%;

	margin: 0;

}

/* System Standard Messages */
#system-message { margin-bottom: 20px; }

#system-message dd.message ul { background: #C3D2E5 url(../../system/images/notice-info.png) 4px center no-repeat;border-top: 3px solid #DE7A7B; border-bottom: 3px solid #DE7A7B; margin:0px; padding-left: 40px; text-indent:0px;}

/* System Error Messages */
#system-message dd.error ul { color: #c00; background: #E6C0C0 url(../../system/images/notice-alert.png) 4px center no-repeat; border-top: 3px solid #DE7A7B; border-bottom: 3px solid #DE7A7B; margin:0px; padding-left: 40px; text-indent:0px;}

/* System Notice Messages */
#system-message dd.notice ul { color: #c00; background: #EFE7B8 url(../../system/images/notice-note.png) 4px center no-repeat; border-top: 3px solid #F0DC7E; border-bottom: 3px solid #F0DC7E; margin:0px; padding-left: 40px; text-indent:0px;}

/*======= Frontend Editing=======*/
fieldset {
	border: 1px solid #ccc;
	margin-top: 15px;
	padding: 15px;
}

legend {
margin: 0;
padding: 0 10px;
margin: 0;
font-weight: bold;
font-family: Helvetica,Arial,sans-serif;
font-size: 1.5em;
margin-bottom: 10px;
text-align: left;
}

td.key {
	border-bottom:1px solid #eee;
	color: #666;
}
/*======= Form / Edit=======*/
form {
	margin: 0;
	padding: 0;
}

form label {
	cursor: pointer;
}

input, select, textarea, .inputbox {
	padding: 3px 5px;
	font-family: Tahoma, Arial, Helvetica, sans-serif;
	font-size: 100%;
}

.button {
	padding: 3px 5px;
	border: 1px solid #333333;
	background: url(../images/grad1.gif) repeat-x top #333333;
	color: #CCCCCC;
	font-size: 85%;
	text-transform: uppercase;
}

.button:hover, .button:focus {
	border: 1px solid #999999;
	background: #333333;
	color: #FFFFFF;
}

* html .button {
	padding: 2px 0 !important; /*IE 6*/
}

*+html .button {
	padding: 2px 0 !important; /*IE 7*/
}

.inputbox {
	border: 1px solid #CCCCCC;
	background: #FFFFFF;
}

.inputbox:hover, .inputbox:focus {
	background: #FFFFCC;
}
</code>