x
Tutoriales para hacerte un Experto en Joomla

A nosotros tampoco nos gusta el spam.

Plantillas Joomla 3 con Bootstrap 2

Publicado por BIAlita en Joomla
Joomla 3 con Bootstrap
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');

 

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 . 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.

x
Tutoriales para hacerte un Experto en Joomla

A nosotros tampoco nos gusta el spam.