(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:

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.

Sobre el autor, Sergio Iglesias

Sergio Iglesias

Sergio Iglesias es formador, desarrollador y front-end del CMS Joomla!. A través de su blog y sus cursos puedes aprender a desarrollar tu propio portal web autogestionable.

 

¿Te ha gustado el artículo? ¡Suscríbete YA!

¿Necesitas un sitio web que funcione?

¿No quieres depender de nadie para gestionar tu página web?

Recibe contenido exclusivo y GRATIS mi curso sobre desarrollo de plantillas Joomla!


Me apunto ya!

Comentarios

#3 Erika Anhy 18-03-2018 15:33
Gracias Sergio, muy amable de tu parte orientar a los que estamos aprendiendo sobre Joomla.

Gracias.
Citar
#2 sergiois 16-03-2018 08:22
Hola Erika!
Gracias por tus palabras y escribir en los comentarios. Me imgino que necesitas algo así? http://demo.joomshaper.com/2014/onepage/
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.
Espero que esto te pueda ayudar.
Salu2!!
Citar
#1 Erika Anhy 15-03-2018 18:56
Hola Sergio, recién descubro tu página web y agradezco tus aportes a tan buenos tips sobre Joomla.

Por favor, agradeceré me orientes en lo siguiente:

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

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.

Mil gracias por la ayuda que me des.

Atentamente,

Erika Anhy
Citar

Escribir un comentario

Puedes publicar el comentario que quieras, pero si lo considero SPAM será eliminado automáticamente.



Código de seguridad
Refescar

SergioIglesias.NET te informa que los datos de carácter personal que nos proporciones rellenando este formulario serán tratados por Sergio Iglesias Sánchez como responsable de esta web. La finalidad de la recogida y tratamiento de los datos personales que te solicitamos es, únicamente, para gestionar los comentarios de este blog. La legitimación se realiza a través del consentimiento del interesado. Te informamos que los datos que nos facilitas estarán ubicados en los servidores de SiteGround (proveedor de hosting). Ver política de privacidad de Siteground. El hecho de que no introduzcas los datos de carácter personal que aparecen en el formulario como obligatorios podrá tener como consecuencia que no pueda atender tu solicitud. Podrás ejercer tus derechos de acceso, rectificación, limitación y suprimir los datos en info@sergioiglesias.net así como el derecho a presentar una reclamación ante una autoridad de control. Puedes consultar la información adicional y detallada sobre Protección de Datos en mi política de privacidad.

¿Quieres tener un sitio web que funcione?

Contacta conmigo