CSS para personalizar la plantilla

Protostar de Joomla
Publicado: 29 Noviembre 2017
Visto: 2452
@sergiois
3 comentarios
Formación Joomla Plantillas Joomla

(Tiempo estimado: 2 - 3 minutos)

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:

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.