
Plantillas Joomla 3 con Bootstrap 2

El pasado 6 de Noviembre se liberó la versión estable 3.2 para Joomla, con esto podemos utilizar el sistema para sitios en producción. En este video tutorial mostramos el uso y algunas funcionalidades de una plantilla Joomla con Bootstrap.
Joomla 3 trae una plantilla llamada Protostar que se puede tomar como base para entender la estrucutra de las plantillas, donde lo más importante es el index.php
y templateDetails.xml
, así como las carpetas que generalmente son:
- css: hojas de estilo
- js: archivos javascript
- html: realizar overrides
- images: archivos de imagen utilizados en la plantilla
- language: archivos de idioma
- less: archivos que al compilarse se guardan en la carpeta css
Protostar funciona para cualquier sitio en producción, si necesitamos agregar nuestros estilos a esta plantilla, podemos crear otro css (por ejemplo mitemplate.css
) y llamarlo desde el index.php
, con el código:
$doc->addStyleSheet('templates/'.$this->template.'/css/mitemplate.css');
Video: Plantilla Joomla con Bootstrap 2
Actualización
Para los menús, podemos implementar:
1. Basic Navbar
<div class="navbar">
<div class="navbar-inner">
<a class="brand" href="#">Title</a>
<ul class="nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
</div>
</div>
2. Responsive Navbar
<div class="navbar">
<div class="navbar-inner">
<div class="container">
<!-- .btn-navbar is used as the toggle for collapsed navbar content -->
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<!-- Be sure to leave the brand out there if you want it shown --><br/><a class="brand" href="#">Project name</a><br/><!-- Everything you want hidden at 940px or less, place within here -->
<div class="nav-collapse collapse">
<!-- .nav, .navbar-search, .navbar-form, etc -->
</div>
</div>
</div>
</div>
3. Inverted Variation
<div class="navbar navbar-inverse">
...
</div>
En Joomla 3 agregaríamos al archivo .php de la plantilla el siguiente código para que funcionara el Responsive Menu. En color rojo se indica la llamada al módulo en la posición llamada menu
<div class="navbar">
<div class="navbar-inner">
<div class="container">
<!-- .btn-navbar is used as the toggle for collapsed navbar content -->
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<!-- Everything you want hidden at 940px or less, place within here -->
<nav class="navigation" role="navigation">
<jdoc:include type="modules" name="menu" style="none" />
</nav>
</div>
</div>
</div>
Sólo faltaría agregar directamente a la clase del módulo: nav-collapse o navbar-inverse, si deseamos un menú responsivo o inverso. Al principio se debe dejar un espacio en blanco como se muestra en la figura.
Te agradecería nos regalaras un +1 o votaras el artículo en la parte superior para seguir creando contenidos interesantes
Soy CEO de BIAlita. Fundadora y co-administradora del grupo Joomla en México, también cuento con un Canal de YouTube sobre SEO Joomla y Wordpress que te invito visitar. Estoy certificada en Google Adwords y Google Analytics. Sígueme en mi perfil de Google + y salúdame para conocerte.
Comentarios