SERGIOIGLESIAS

Blog sobre Joomla

CSS para personalizar la plantilla Protostar de Joomla

@sergiois Tips Joomla 2 - 3 minutos Visto: 10608

En este artículo te voy a mostrar los pasos para modificar el diseño de la plantilla Protostar de Joomla (plantilla por defecto en la instalación del CMS).

Cómo personalizar Protostar de Joomla

Cómo personalizar la plantilla #Joomla Protostar Tuitealo

Para poder personalizar la plantilla que viene por defecto en Joomla 3 tenemos que crear una hoja de estilos.

Esta hoja de estilos se tiene que llamar user.css y tiene que estar en la carpeta css de la plantilla:
templates/protostar/css/user.css

Una vez tenemos creado este archivo CSS añadimos los cambios que queramos hacer.

En la Meetup del Grupo de Usuarios de Joomla Madrid añadimos el siguiente código CSS:

.body .container{
    box-shadow: inherit;
    border: 0;
    padding: 0;
}

body.site{
    border: 0!important;
    padding: 0!important;
}

.container, .navbar-static-top .container, .navbar-fixed-top .container, .navbar-fixed-bottom .container {
    width: 100%;
    max-width: 100%;
}

header.header{
    padding: 15px 0 10px;
}
header.header .brand img{
    max-width: 100px;
}
.header-search{
    padding: 20px 0 0;
    height: 0;
}

.header .header-inner,
.navigation .nav-collapse,
.custom.banner,
.footer .container ul,
.footer .container p,
#content{
    max-width: 1170px;
    margin: 0 auto;
}

.navigation{
    border: 0;
    background: #286090;
    padding: 15px 0;
    margin: 0;
}
.navigation .nav{
    text-align: center;
}
.navigation .nav li{
    display: inline-block;
    float: none;
}
.navigation .nav li a{
    color: #fff;
    text-transform: uppercase;
    font-size: 18px;
}
.nav-pills > .active > a, .nav-pills > .active > a:hover, .nav-pills > .active > a:focus,
.navigation .nav li.active a,
.navigation .nav li a:hover{
    background: transparent;
    color: #CEB153;
}

#content{
    margin: 40px auto;
    float: none;
}

.moduletable.banner{
    background: url(../images/fondo-evento.jpg) no-repeat center center / cover;
    text-align: center;
    padding: 120px 0;
    color: #fff;
}
.moduletable.banner h1{
    font-size: 40px;
    font-weight: bold;
}

.footer{
    background: #f6f6f6;
    padding: 40px 0;
}
.footer hr{
    display: none;
}
.footer .container ul.nav-pills{
    margin-bottom: 10px;
}
.footer .nav-pills > li > a{
    padding: 0;
    margin-right: 10px;
}
.footer .nav-pills > .active > a{
    background: transparent;
    color: #286090;
}
.footer .nav-pills > li > a:hover{
    background: transparent;
    text-decoration: underline;
}

.custom.bottom{
    background: #333;
    padding: 20px;
    margin: 40px 0;
    width: 25%;
    height: 295px;
    color: #fff;
}
.custom.bottom h4{
    text-transform: uppercase;
}
.custom.bottom a{
    color: #ccc;
    font-size: 14px;
    line-height: 26px;
}
.custom.bottom a:hover,
.custom.bottom a:focus{
    background: transparent;
    color: #fff;
}

.btn{
    text-shadow: inherit;
    background-image: none;
    box-shadow: inherit;
    border: 0;
}
.readmore{
    text-align: right;
}

Resultado del cambio de estilos

El resultado de aplicar esta hoja de estilos es el siguiente:

proptostar custom joomla

NOTA: la imagen de fondo que se utiliza la puedes descargar aquí.


Como puedes ver, el aspecto de la plantilla es mucho más moderno que el que viene por defecto.

Espero que te haya gustado este cambio y, ya sabes, si quieres crear el tuyo, simplemente sigue estos pasos.

Voy a intentar crear un estilo que sea similar al de la plantilla que vendrá en Joomla 4 y que puedes ver aquí.
Los usuarios registrados en mi Newsletter tendrán acceso a estos estilos los primeros.

¿Te ha gustado el artículo?

Suscríbete a mi newsletter y recibe contenido exclusivo.
Podrás hacer gratis un Curso de desarrollo de plantillas Joomla.

3 comentarios

  • Hola Sergio, recién descubro tu página web y agradezco tus aportes a tan buenos tips sobre Joomla.<br /><br />Por favor, agradeceré me orientes en lo siguiente:<br /><br />1.- Quiero poner un "modulo personalizado" con iconos sociales propios en la parte derecha por encima (sobre) del modulo del slideshow. Es como los iconos de redes sociales que tienes en tu web, en la parte izquierda, pero quisiera que quedara estático con el slideshow (que no descienda como el tuyo). <br /><br />2.- El menu de navegación ponerla alineado con el slideshow fullscreen en la parte baja (bottom) y que al hacer scroll suba hacia el top.<br /><br />Mil gracias por la ayuda que me des.<br /><br />Atentamente, <br /><br />Erika Anhy
  • Hola Erika!<br />Gracias por tus palabras y escribir en los comentarios. Me imgino que necesitas algo así? http://demo.joomshaper.com/2014/onepage/<br />Para hacer este tipo de funcionalidad necesitarás hacer uso de Affix (https://getbootstrap.com/docs/3.3/javascript/#affix) o similar. Mira la documentación de Bootstrap a ver si esto te puede ayudar o analiza la página demo de la plantilla que te comento.<br />Espero que esto te pueda ayudar.<br />Salu2!!
  • Gracias Sergio, muy amable de tu parte orientar a los que estamos aprendiendo sobre Joomla.<br /><br />Gracias.

Artículos relacionados

Solicita presupuesto

¿Quieres una página web que funcione?

Contacta conmigo y hablemos de tu proyecto.