Estas aquí:   Joomla! CSS J! Basico Capítulo VIII - Modificando el cuerpo
Tux Merlin
Apr
14
2009
Capítulo VIII - Modificando el cuerpo PDF Imprimir Correo Hits! 2909
(0 votos, media 0 de 5)
Tux Merlín : Buru

Escrito por Tux Merlín : Buru en Cursos, Maquetación para Joomla!


Share
Modificaremos el index.php, dentro de las etiqueta de comienzo y fin del “body”, para que nos quede como siguiente:
<!-- Comienzo del borde -->

<div id="borde">

<!-- Comienzo del Contenedor -->

<div id="contenedor">

<!-- Comienzo de la cabecera -->

<div id="header">

<!-- Aquí no ponemos texto puesto que usamos una imagen -->

</div>

<!-- Fin de la cabecera -->

<!-- Comiendo de la barra de navegación o menú -->

<div id="navegador">

<jdoc:include type="modules" name="user3" style="xhtml" />

</div>

<!-- Fin de la barra de navegación -->

<!-- Comienzo del cuerpo -->

<div id="cuerpo">

<jdoc:include type="component" />

</div>

<!-- Fin del cuerpo -->

<!-- Comienzo de la barra lateral -->

<div id="lateral">

<jdoc:include type="modules" name="right" style="xhtml" />

</div>

<!-- Fin de la barra lateral -->

<!-- Comiendo del pie de página -->

<div id="pie">

<a href="http://www.solojoomla.com">Tutorial para SoloJoomla</a> by <a href="http://www.moatsoft.com.ar">MoatSoft </a>

</div>

<!-- Fin del pie de página -->

</div>

<!-- Fin del contenedor -->

</div>

<!-- Fin del borde -->
Observen que eliminé todo el contenido, incluyendo menús armados con la etiqueta “li”, textos y demás que hicimos en la primer plantilla, y en su lugar incluí las declaraciones de Joomla correspondientes al módulo que quiero que se vea en cada div.
Vamos a mencionar las declaraciones más importantes de Joomla así las tienen en cuenta:

<jdoc:include type="head" />


Como dijimos se coloca una sola vez y dentro de la etiqueta “head”.

<jdoc:include type="component" />


Esta declaración es la llamada a los contenidos propiamente dichos que están en la base de datos. Se utiliza una sola vez dentro del cuerpo o “body” de nuestro index.

<jdoc:include type="message" />


Esta declaración se utiliza para mostrar errores de petición a la base de datos. Solo se puede ubicar en un solo lugar del template que queramos y una sola vez. En el caso de nuestro template, no está contemplada su ubicación por lo que aparecería en un archivo index.html generado “al vuelo”.

<jdoc:include type="module" name="breadcrumbs" />


Esta declaración del módulo “breadcrumbs” es la que nos brinda la posición 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.

Agreguemos un div más ubicado entre el div “borde” y el div “contenedor”, es decir, que la primera parte del código algo como esto:
<div id="borde">

<!-- Comienzo del Contenedor -->

<div id="bread">

<jdoc:include type="module" name="breadcrumbs" />

</div>

<div id="contenedor">

<!-- Comienzo de la cabecera -->

.......................................... 

Abramos el archivo “template.css” y busquemos y modifiquemos el id “borde” para que quede de la siguiente forma:
#borde{

border: 2px solid #CCCCCC;

text-align: left;

width: 708px;

margin: auto;

background: #E0FFFF

}

Lo que hicimos aquí fue “agrandarlo” en 8px y darle un fondo, con eso ya tenemos nuestro módulo “breacrumbs” que luego lo van a poder ver en el extremo superior izquierdo de la página.

Volviendo a las declaraciones de Joomla, vamos a nombrar otras más, que también son muy comunes y que podemos ver en casi todas las plantillas:

<jdoc:include type = "modules" name = "left" style = "xhtml" / >
<jdoc:include type = "modules" name = "right" style = "xhtml" / >
<jdoc:include type = "modules" name = "top" style = "xhtml" / >
<jdoc:include type = "modules" name = "user1" style = "xhtml" / >
<jdoc:include type = "modules" name = "user2" style = "xhtml" / >
<jdoc:include type = "modules" name = "user3" / >
<jdoc:include type = "modules" name = "user4" / >


Si observan detenidamente todas se refieren a una posición dentro de la plantilla, pero a su vez cada una contendrá luego el contenido de un módulo específico que elegiremos desde el back-end, administración, de Joomla.

También observen que se declara indicando el tipo (type), el nombre (name) y al final el estilo (style). Esto último se refiere al estilo definido en el módulo Chrome.

El módulo Chrome, incorporado en el framework de Joomla, nos brinda algunas “salidas” de formato html como por ejemplo el redondeado. Si quieren saber más lean aquí http://docs.joomla.org/What_is_module_chrome%3F

Para saber todos los JDOC de Joomla(MUY RECOMENDABLE), lean aquí.

Para finalizar este capítulo, podríamos decir que casi estamos en condiciones de probar nuestro primer template pero antes debemos crear un archivo más.

 

Regístrese para dejar comentarios

Más artículos relacionados :

» RSMonials v1.5.3 para Joomla 1.5.x Nativo

Me enteré gracias a un usuario que preguntó por alguna extensión que sirva para mostrar testimonios, de que en el día de la fecha ha sido liberada una nueva versión de este componente. Para el que no lo conoce, se trata de una extensión...

» Sobre los hilos o feeds y en Joomla!

Como todos sabemos, Joomla trae sindicación de noticias, también conocida con el término en castellano "redifusión" o en inglés "syndication". A los elementos que componen la sindicación se los nombra en castellano con el término "hilos" y en...

» Plugin Tux Social Bookmark

Me anticipo al qué dirán... "otro plugin más para redes sociales y van...", y si, es verdad. Tal vez sea algo trillado, o común, que hay muchos pero la verdad que a pedido del amigo Redlo armé este plugin que nos permite compartir los...

» Ja Teline III-Módulo Ja News FP versión tunning

Aquel que usa Ja Teline III sabrá que hay un módulo llamado Ja News FP (Ja News Front Page), que se utiliza para mostrar titulares de noticias y un breve trozo del texto de las mismas en la página principal del sitio. Hay un artículo relacionado...

» Nueva versión - Flexicontent v1.5.3

En junio del corriente año ha sido liberada una nueva versión de esta fantástica extensión que brinda un sin número de posiblidades para los desarrolladores de sitios Joomla. Ya las versiones anteriores me sorprendieron y en esta oportunidad me...

Joomla-GNU en Facebook

Visitas: 349 │ Totales: 140441 │ Hits: 562069

Joomla-gnu.com not affiliated with or endorsed by Open Source Matters or the Joomla! Project.
The Joomla!, logo and name is used under a limited license from Open Source Matters in the United States and other countries.

This site is powered by Joomla