CSS para personalizar la plantilla Protostar de Joomla

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

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:

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.