Registrate y en referer escribe hostwebcenter si quieres saber mas haz
Empezaremos hablando de la estructura básica de una plantilla Joomla! que consta de 5 archivos principales:
- “Index.php”, contiene código HTML y las directivas PHP.
- Un archivo “template_css.css” que contendrá el estilo en cascada, dentro de una carpeta css.
- “Template_thumbnail.png”, pequeña imagen de la plantilla que se previsualiza en el panel de administración.
- Una carpeta llamada “images” que incluirá todas las imágenes de la plantilla.
- “TemplateDetails.xml”, contiene todos los archivos necesarios para la instalacion de la plantilla.
A
continuación pasaremos a detallar la creación de cada uno de los archivos:
Creación Index.php : Lo primero será determinar el aspecto o diseño que tendría su plantilla y por consiguiente su pagina
Web; luego
deberán crear su Layout mediante el cual trabajaran, una vez creado el Layout procederemos a ingresar la variables y
funciones
dentro de su Layout de la siguiente manera; antes de ello daré una explicaron de las principales variables y funciónes que
usa Joomla!.
Variables:
- $mosConfig_live_site: Esta variable contiene la URL del sitio . Por ejemplo para insertar una imagen en su Web seria
de la siguiente manera, <img src="<?php echo $mosConfig_live_site;?>/images/tuimagen.png>"/>que seria lo mismo
<img src=”http://www.tupagina.com/images/tuimagen.png>"/>
- $mosConfig_sitename: Contiene el nombre del sitio.
Funciones:
- mosShowHead(): Esta función al invocarla muestra la información metatag, el titulo y favicon. Se lo usa entre los
tags <head> y </head>. - mosMainBody():Muestra el cuerpo principal del documento. Se lo usa en
el body del documento. - mosLoadModules (): Carga los módulos en una posición predispuesta y en un estilo determinado.
Para eso posee dos
parámetros (posición , estilo). El primero dirá que módulos cargar (left, right, user1, user2, user3, top, etc). El segundo
parámetro dirá en que forma cargarlos: 1= horizontal (cada modulo se cargan en celdas en una única fila), 0= normal (cada
modulo se cargan en celdas en una única columna), -1= raw (los módulos se cargan en bruto y sin título), -2= XHTML
(muestra a los módulos en divs), -3= extra divs (similar al anterior, pero con más divs). De esta forma si tenemos
mosLoadModules (left, -2) cargará los módulos predispuestos en la posición 'left' y los mostrará en diferentes divs.
Otro ejemplo. Si tenemos mosLoadModules (user2, 1) cargamos los módulos predispuestos en la posición 'user2' y los
mostrará de manera horizontal.
Este Layout contiene 2 archivos “index.html” y “estilo.css”, estos dos archivos nos servirán para poder ensayar sobre
ellos la practica
de este tutorial. Lo único que tendremos que hacer será copiar el contenido del archivo”index.html” y pegarlo en un nuevo
archivo y
guardarlo con el nombre de “index.php”, al cual insertaremos las variables y funciones para que tenga un buen funcionamiento
con
Joomla!. Acontinuacion comentare línea por línea lo que se agregara
INDEX.PHP
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; <?php echo _ISO; ?>" />
/* "mosShowHead();" muestra toda la información del head; metatag, titulo del documento y el
favicon.*/
<?php mosShowHead(); ?>
/* cargo el archivo .css (estilo en cascada del documento) guardado en la carpeta "css"
*/
<link href="<?php echo $mosConfig_live_site;?>/templates/<?php echo $mainframe->getTemplate();?>
/css/template_css.css" rel="stylesheet" type="text/css" />
</head>
<body>
<!-- Inicio Wrapper -->
<div id="wrapper">
<!-- Inicio Header -->
<span ><div id="header">//parte superior
de la pagina donde puede ir su logo
/* Muestro el nombre del sitio y creamos un vinculo a la web con "$mosConfig_sitename;" */
<h1><a href="<?php echo $mosConfig_live_site; ?>"><?php echo $mosConfig_sitename; ?
></a></h1>
/* "<?php mosLoadModules( 'top', -3 );?>" muestra un cuadro de noticias dentro del
header */
<div id="newstop"><?php mosLoadModules( 'top', -3 );?></div>
</div>
</div><!-- Fin Header -->
/* "<?php mosLoadModules ( 'left',-2 ); ?>, <?php mosLoadModules ( 'right',-2 ); ?>" esto
cargara los modulos de la izquierda y derecha respectivamente, mientras que
"<?php mosMainBody(); ?>" cargara el contenido principal,
"<?php mosLoadModules ('user1', -3);?>" cargara los vinculos de las ultimas noticias y
"<?php mosLoadModules ( 'user2',-2 );?>" cargara los vinculos mas populares */
<!-- Inicio Left Column -->
<div id="leftcolumn"><?php mosLoadModules ( 'left',-2 ); ?></div>
<!-- Fin Left Column -->
<!-- Inicio Content Column -->
<div id="content">
<div id="user"><?php mosLoadModules ('user1', -3);?></div>
<div id="user2"><?php mosLoadModules ( 'user2',-2 );?></div>
<?php mosMainBody(); ?></div>
<!-- Fin Content Column -->
<!-- Inicio Right Column -->
<div id="rightcolumn"><?php mosLoadModules ( 'right',-2 ); ?></div>
<!-- Fin Right Column -->
<!-- Inicio Footer -->
/* bueno solo quedaria editar el archivo "footer.php" que lo encontramos en la carpeta raiz de
Joomla! includes puedes colocar tu copyright, un menu, etc */
<div id="footer"><?php include_once('includes/footer.php'); ?></div>
!-- Fin Footer -- > </div>
<!-- Fin Wrapper -->
</body>
</html>Ahora pasemos a editar el archivo ".css", al cual lo guardaremos en al carpeta "css" con el
nombre de
"tempalte_css.css", bueno para no ser muy extensivo el post lo comentare en el mismo archivo. Como
se sabe de este archivo depende el aspecto que tendra nuestra pagina web
/* CSS Document
version: 1.0
fecha: 20/02/08
Creado por: Erik Japura
E-Mail: angeliron@gmail.com
website: http://www.joomla-peru.blogspot.com
*/
* {
margin: 0; padding: 0; border: 0;
}
img {
padding: 4px 18px 4px 8px;
}
a{
text-decoration:none; color: #235033;
}
li {
list-style:none;
}
li a {
font: 1.1em Georgia, "Times New Roman", Times, Serif; color:#046380;
}
li a:hover {
color: #4A8797;
}
/* Header -------------------------------------------------------------*/
#header h1 {
font: 3.5em/1em "Times New Roman", Times, Serif;letter-spacing: -0.05em; color:#69BFDE;
border-bottom: 1px solid #A7A37E;margin-bottom:30px;
}
body {
font-family: Arial, Helvetica, sans-serif; font-size: 13px;
}
#wrapper {
margin: 0 auto; width: 980px;
}
#header {
color: #333;width: 100%; float: left; padding: 10px; border: 1px solid #ccc; height:
100px; margin: 10px 0px 5px 0px; background: #000;
}
#leftcolumn {
color: #fff; border: 1px solid #ccc; background: #cc3333; margin: 0px 5px 5px 0px; padding:10px;
height: 350px; width: 195px; float: left;
}
#content {
float: left; color: #333; border: 1px solid #000; background: #fff; margin: 0px 5px 5px 0px;
padding: 10px; height: 350px; width: 538px; display: inline;
}
#user { float: left; color: #cc3333; border: 1px solid #000; background: #fff; margin:
0px 5px 5px 0px; padding: 5px;
height: 50px; width: 47%; display: inline;
}
#rightcolumn {
color: #fff; border: 1px solid #ccc; background: #000; margin: 0px 0px 5px 0px; padding: 10px;
height: 350px; width: 195px; float: left;
}
#footer {
width: 980px; clear: both; color: #fff; border: 1px solid #ccc; background: #000; margin:
0px 0px 10px 0px; padding: 10px;
}
#user2 {
FLOAT: left; width: 47%; padding: 5px; background:#FFFFFF; border: 1px solid #000; height: 50px;
}
#newstop {
FLOAT: right; POSITION: relative; width: 60%; padding: 5px; background:#cc3333; color:#FFFFFF;
}
/* Estilos para Joomla!
------------------------------------------------------------------*/
/*Estilos referentes al contenido principal*/
/*.contentheading: Podemos controlar el estilo de los títulos de los artículos. */
.contentheading {
font: 2.5em "Times New Roman", Times, Serif; letter-spacing: -0.05em; color: #96D377;
}
.contentheading a{
color: #79B33A;
}
.contentheading a:hover{
color: #96D377;
}
/*.contentpaneopen: Podemos controlar el contenido mostrado en cada artículo. */
.contentpaneopen{
color: #4F4F4F; padding:0 20px 0 0; text-align:justify;
}
.contentpaneopen li{
padding:0 30px 0 10px; background: url(/images/lista.gif) no-repeat 0 5px; list-style:none;
}
/*.createdate / .modifydate:Controlamos la fecha de creación / modificación del
artículo.*/
.createdate, .modifydate{
font-size: 0.8em; color: #5F5F5F;
}
/*.readon: Controlamos la manera de mostrar el link ' Leer más... '*/
.readon, .readon:hover{
color: #497858; text-decoration:underline;
}
/*.pagenav_next / .pagenav_prev / .back_button: Son las clases que controlan los links '
Siguiente '
, ' Anterior ' y ' Volver '*/
.pagenav_next a, .pagenav_prev a{
text-decoration:none; color:#77C727; font-weight: bold;
}
/*------------Estilos referentes a los módulos---------*/
/*.moduletable: Cada modulo será cargado en un div diferente.
Cada uno de estos divs tendrán
la clase ' moduletable '. */
.moduletable, .moduletable_menu{
margin-bottom:20px;
}
/*.moduletable h3: Es el título de cada módulo.*/
.moduletable h3, .moduletable_menu h3 {
font: 2em/1em "Times New Roman", Times, Serif; letter-spacing: -0.09em; color: #497858;
border-bottom: 1px solid #A7A37E; margin-bottom:10px;
}
.moduletable .search input{
font: 1.1em/1.4em Georgia, "Times New Roman", Times, Serif;
border:1px solid #CCC; color:#666; padding:2px 0 2px 5px;
}
/*.moduletable .mainlevel: Es la clase específica para cada elemento de los módulos del tipo
menú.*/
.moduletable .search input:hover{
background-color:#FFFFF1;
}
/*.moduletable .mainlevel: Es la clase específica para cada elemento de los módulos del tipo
menú.*/
.moduletable .mainlevel{
text-decoration:none; color: #235033;
}
/*.moduletable .latestnews: Es la clase específica del modulo ' Últimas noticias '.
Los títulos son cargados en una lista.
.moduletable .mostread: Es la clase específica del modulo ' Popular '
.Los títulos son cargados en una lista.
.moduletable .search: Es la clase específica del modulo ' Buscador '.*/
Bueno solo quedaría crear el
archivo "templateDetails.xml" este archivo es importante ya que sin el no podríamos instalar nuestro
template o plantilla, lo comentare en el mismo archivo.
<?xml version="1.0" encoding="iso-8859-1"?>
<mosinstall version="1.0" type="template">
<name>Plantilla Joomla! de muestra </name> <!--Nombre del template --
>
<version>1.0</version> <!--Versión del template -->
<creationDate>09/2008</creationDate> <!--Fecha de creación del template --
>
<author>Erik Japura</author> <!--Nombre del autor -->
<authorEmail>angeliron@gmail.com</authorEmail> <!--E-mail del autor--
>
<authorUrl>http://www.joomla-peru.blogspot.com</authorUrl> <!--Url del autor -
->
<description>como crear una plantilla Joomla!</description> <!--Descripción
breve -->
<files>> <!-Archivos del template -->
<span ><filename>index.php</filename>
<filename>templateDetails.xml</filename>
<filename>template_thumbnail.png</filename>
<filename>images/tusimagenes.png</filename>
<filename>css/template_css.css</filename>
</files><!-- --></mosinstall>
Así tendría que quedar el archivo "templateDetails.xml"; al final tendríamos que haber creado un archivo index.php,
template_css.css el cual tiene que estar en una carpeta ce nombre "css", un archivo de nombre "templateDetails.xml", un
archivo
de imagen"template_thumbnail.png" el cual es la imagen en miniatura de nuestra plantilla y por ultimo una carpeta "images"
donde
contendrán todas las imágenes de nuestra pagina Web (si se tiene varias imágenes se tendrá que insertar mas
<filename>images/
tusimagenes1.png</filename>,<filename>images/tusimagenes2.png</filename>, ...).
