Martes, 19 Noviembre 2013 09:00

Plantillas Joomla 3 con Bootstrap 2

Publicado por BIAlita en Joomla

4.6 de 5 basado en 14 voto(s)

  / 14

PocoMucho 

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');

Adquiere el curso para Crear Plantillas Joomla 3 desde Cero

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.