Header
Vamos a borrar todo los que hemos hecho hasta ahora en el index.php (déjalo aparte para consultar si quieres). Crearemos dentro de .container el primer elemento de html5 header.
Si lo ves mejor pon los padding-left y right de 15 px de los col-xs- a cero. bootstrap.css línea 904 y 5 y le ponemos un borde al container.
<div class="container" style="border:1px #cacaca solid">
<header class="col-x-12">
</header>
</div>
Ahora dentro de header ponemos el logo. No importa lo grande que sea el logo, se ajustará perfectamente a las medidas de su contenedor
Y el nombre de nuestro sitio. La variable $sitename está definida en templates->frontend->logic.php
<header class="col-x-12">
<div id="logo" class="col-xs-3">
<a href="/."> <img src="http://euskosystem.com/templates/frontend/images/euskosystem.png" alt="logo"> </a>
</div>
<div id="sitename" class="col-xs-9" > <h1> <?php echo $sitename;?> </h1> </div>
</header>
Debajo del sitename vamos a poner nuestro menú. Extensiones -> Gestor de módulos -> Menú Principal y miramos en que position está (creo que en la position-7, pero compruébalo).
<div id="sitename" class="col-xs-9" > <h1> <?php echo $sitename;?> </h1> </div>
<div id="topmenu" class="col-xs-12"> <jdoc:include type="modules" name="position-7" style="none" /> </div>
Posiciones de los módulos
<jdoc:include type="modules" name="[nombre de la posición]" style="none" />
Esta es la manera de llamar a los módulos. A style podemos darle el valor de xhtml o none (Se verá el nombre del módulo o no).
Podemos crear nuestras propias posiciones editando el archivo templates -> frontend -> templateDetails.xml hacia la línea 45 están definidas algunas y si no hay ninguna la creamos añadiendo la posición Menu-top por ejemplo: <position> Menu-top </position>
Ahora vamos al módulo Menú Principal y le cambiamos la posición por esta que hemos creado y hacemos lo mismo con la llamada al módulo para que quede
así: <jdoc:include type="modules" name="Menu-top" style="none" />
Como queremos que el menú se muestre en horizontal creamos esta regla en template2.css
#topmenu > ul > li {display:inline-block}
Aside
Creamos este elemento de html5 después de header y que ocupe el 25% del ancho total del contenedor .container
<aside class="col-xs-3">
</aside>
Ahora creamos una nueva posición en templates -> frontend -> templateDetails.xml <position> aside </position> , duplicamos el módulo Menú Principal y le ponemos esta posición a la copia. Y llamamos al módulo dando a style el valor de xhtml para que se vea el nombre del módulo.
<aside class="col-xs-3">
<jdoc:include type="modules" name="aside" style="xhtml" />
</aside>
Section
Después de aside escribimos <section class="col-xs-9"> </section> y llamamos al elemento que muestra los mensajes y advertencias y al componente:
<section class="col-xs-9">
<jdoc:include type="message" /> <!--- mensajes -->
<jdoc:include type="component" /> <!-- componente (artículos, blog, contacto, etc)
</section>
Más adelante, en la sección SEO veremos como poner las etiquetas article en los artículos.
Footer
Después de section ponemos el footer. <footer class="col-xs-12"> </footer> que podemos dividir para poner distintos módulos que necesitemos.
<footer class="col-xs-12">
<div class="col-xs-4"> <jdoc:include type="modules" name="position-1" style="xhtml" /> </div>
<div class="col-xs-4"> <jdoc:include type="modules" name="position-2" style="xhtml" /> </div>
<div class="col-xs-4"> <jdoc:include type="modules" name="position-3" style="xhtml" /> </div>
<div class="col-xs-12"> <jdoc:include type="modules" name="copyright" style="none" /> </div>
</footer>
Con todo esto ya tenemos una plantilla básica que podemos extender y modificar a nuestro gusto.