Solojoomla Realizar Templates

Tutorial Solojoomla.
com Realizar Plantillas para Joomla Primero, hacer una pgina web con sus div y tomar apunte de todos los ID y qu contendrn. Cambiar el tipo de archivo de .html a .php Reemplazar todo el comienzo por:
<?php // Acceso directo prohibido defined( '_JEXEC' ) or die( 'Restricted access' ); ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this>language; ?>" lang="<?php echo $this->language; ?>" > <head> <jdoc:include type="head" /> <link rel="stylesheet" href="/<?php echo $this->baseurl ;?>/templates/<?php echo $this->template ;?>/css/template.css" type="text/css" />
</head>Las etiquetas, "JDOC" se llaman statements (declaraciones). Las declaraciones le dicen al framework (entorno de trabajo) de Joomla! dnde debe visualizarse el mdulo o extensin, y de qu tipo es. Un ejemplo sera poner el mdulo de una barra (men) de navegacin:
<div id="navegador"> <jdoc:include type="modules" name="user3" /> </div>
Otro ejemplo de la insercin de un mdulo

<div id="bread"> <jdoc:include type="module" name="breadcrumbs" /> </div>
Este es un ejemplo de cmo sera incluir un componente

<div id="main"> <jdoc:include type="component" /> </div>
Las declaraciones ms importantes de Joomla! son las siguientes: 1. <jdoc:include type="head"> Se coloca una sola vez y dentro de las etiquetas head 2. <jdoc:include type="component"> Esta declaracin es la llamada a los contenidos propiamente dichos que estn en la base de datos. Se utiliza una sola vez dentro del cuerpo o body de nuestro index.
3. <jdoc:include type="message"> Esta declaracin se utiliza para mostrar errores de peticin a la base de datos. Solo se puede ubicar en un solo lugar del template que querramos y una sola vez. En el caso de nuestro template, no est contemplada su ubicacin por lo que aparecera en un archivo index.html generado al vuelo. 4. <jdoc:include type="module" name="breadcrumbs"> Esta declaracin del mdulo breadcrumbs (migas de pan), es la que nos brinda la posicin dentro de la web donde estamos actualmente. En el caso de nuestra web no lo contemplamos pero se la vamos a incorporar puesto que es muy sencillo. Otras, que tambin son muy comunes y que podemos ver en casi todas las plantillas son:
5. <jdoc:include 6. <jdoc:include 7. <jdoc:include 8. <jdoc:include 9. <jdoc:include 10. <jdoc:include 11. <jdoc:include type="modules" type="modules" type="modules" type="modules" type="modules" type="modules" type="modules" name="left" style=""> name="right" style=""> name="top" style=""> name="user1" style=""> name="user2" style=""> name="user3"> name="user4">
Al observar detenidamente, se ve un estilo style, asociado al mdulo chrome incorporado en el framework de joomla. El cdigo PHP baseurl ;?>, es para indicar la ruta dnde se encuentra el archivo. El cdigo PHP template ;?> cargar el nombre del template. Habr tambin que editar el archivo templateDetails.xml. Este archivo es el instalador de la plantilla. Joomla lo utiliza adems para saber las posiciones de la misma. Sin este archivo no podremos instalarla. Adems el CMS lo utiliza para mostrar el template en el Gestor de Plantillas del back-end o administracin, motivo por el cual es obligacin hacerlo. Aqu un ejemplo:
Mi template 2009/04/11 Miguel Tuyar <script type="text/javascript"> <!-var prefix = 'ma' + 'il' + 'to'; var path = 'hr' + 'ef' + '='; var addy60477 = 'info' + '@'; addy60477 = addy60477 + 'moatsoft' + '.' + 'com' + '.' + 'ar'; document.write('<a ' + path + '\'' + prefix + ':' + addy60477 + '\'>'); document.write(addy60477); document.write('<\/a>');
//--> </script> <a href="mailto:info@moatsoft.com.ar">info@moatsoft.com.ar</a><script type="text/javascript"> <!-document.write('<span style=\'display: none;\'>'); //--> </script><span style="display: none;">Esta direccin de correo electrnico est siendo protegida contra los robots de spam. Necesita tener JavaScript habilitado para poder verlo. <script type="text/javascript"> <!-document.write('</'); document.write('span>'); //--> </script></span> Esta direccin electrnica esta protegida contra spam bots. Necesita activar JavaScript para visualizarla
http://www.moatsoft.com.ar
copyright 2009 GNU1.0.0 Mi primer template para Joomla! index.php css/template.css images/banner.jpg images/fondo.jpg images/bullet.gif images/fondonav.gif right top user3
Adems del archivo templateDetails.xml tambin se estila incorporar una imagen de 206x150px de tamao que es una muestra o miniatura del aspecto de la plantilla instalada. Esta miniatura se ve cuando pasamos con el mouse por encima del nombre en el Gestor de plantillas del back-end o administrador de Joomla. Al crear las hojas de estilo en cascada, se puede recurrir a estilos preestablecidos propios de joomla!:
Nombre de la Clase: .componentheading Corresponde a: Formateo del ttulo de la pgina principal. En una instalacin recin hecha corresponde al primer ttulo Welcome to Frontpage. Ejemplo de maquetacin:
.componentheading { background: #000080; text-transform: uppercase; color: #FFFFFF; padding: 2px 2px 2px 2px; border-bottom: 1px dotted black; font-weight: bold;
.contentheading
Formateo del ttulo del artculo.
.small .createdate .buttonheading .readon
al autor del artculo la fecha y hora de creacin del artculo. la clase para formatear los botones PDF-Imprimir-Email que se agregan en cada artculo de Joomla. Leer ms, es el formateo del texto del pie del artculo cuando usamos este corte. Les aconsejo lo utilicen con frecuencia para darle ms profesionalidad al sitio.
} .contentheading { font-weight: bold; background: url('/../images/fondonav.gif'); } .small, .createdate { font-size: smaller; color: #000000; } .buttonheading a{ color: white; } .readon { text-decoration: none; color: #000099; font-weight: bold; } a.readon:hover{ background: #99CCFF; font-style: italic; text-decoration: underline; } .article_separator{ display:block; background:#474747; height:1px; margin:10px 60px 10px 10px; } .contentpaneopen { font-family: Georgia, Verdana; } #lateral .moduletable_menu{ text-align:left; margin-bottom:15px; } #lateral .moduletable_menu, #lateral .moduletable{ text-align:left; margin-bottom:15px; } #lateral .moduletable_menu li{ margin:3px 0 0; padding:0; list-style-image:none; list-style-type:none; } #lateral .moduletable_menu a{ text-decoration: none; } #lateral .moduletable_menu li:hover{ text-decoration: underline; } #lateral .moduletable_menu li:before{ content: "\00BB \0020";
.article_separator
.contentpaneopen .moduletable
Esta clase corresponde al separador de artculos. Segn configuremos sus propiedades podemos utilizarla para dividir nuestros artculos. No es la nica forma, pero es una de las ms usadas. Es el cuerpo mismo de los artculos. Corresponde a los mdulos que aparecern en nuestra plantilla. Observar que en el ejemplo, se utiliz el sufijo _menu porque es lo que se va a configurar. Esto supone que primeramente habr que acceder al back-end de Joomla, ir al men correspondiente (en este caso el Main Menu posicionado a la derecha right), abrirlo haciendo un click sobre el nombre y agregando en Parmetros Avanzados -> Sufijo de la clase del mdulo el texto _menu (sin comillas). Como otra observacin, vean que adems le agregamos adelante de la clase el nombre del identificador del div correspondiente a su ubicacin dentro del index.php.
} .moduletable_menu h3, .moduletable h3, .moduletable_text h3{ margin:5px 0 0; text-align:center; background: url('/../images/fondonav.gif'); padding:0; text-transform:uppercase; }
.moduletable
En el ejemplo se ve que agregamos el sufijo -nav. Como en el men anterior, supone que primeramente se accedi al back-end de Joomla, al men correspondiente (en este caso el Main Menu posicionado en USER3), abrirlo haciendo un click sobre el nombre y agregando en Parmetros Avanzados -> Sufijo de la clase del mdulo el texto -nav (sin comillas)
#navegador .moduletable-nav{ text-align:center; } #navegador .moduletable-nav li{ padding:0; list-style-image:none; list-style-type:none; } #navegador .moduletable-nav a{ text-decoration: none; } #navegador .moduletable-nav a:hover{ text-decoration: underline; text-transform: uppercase; color: #3300CC; }
Se puede aprender ms de clases y sus sufijos en http://docs.joomla.org/Tutorial:Using_Class_Suffixes_in_Joomla%21_1.5

Solojoomla Realizar Templates

Enviado por

Dados do documento

Título original

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Solojoomla Realizar Templates

Enviado por

Direitos autorais:

Formatos disponíveis

Tutorial Solojoomla.

Otro ejemplo de la insercin de un mdulo

Este es un ejemplo de cmo sera incluir un componente

Formateo del ttulo del artculo.

.small .createdate .buttonheading .readon

Se puede aprender ms de clases y sus sufijos en http://docs.joomla.org/Tutorial:Using_Class_Suffixes_in_Joomla%21_1.5

Você também pode gostar