Unos breves apuntes de la modificación del tema Basis de BackdropCMS, que pongo aquí a modo de recordatorio y si además le sirve a alguien, pues mejor.
Para ir familiarizando con éste CMS he estado experimentando con el tema base BASIS. Para la configuración de diseño visual Backdrop usa el módulo Panels que han integrado en el núcleo, que es mucho más versátil que el sistema solo de bloques que usa Drupal.
Este tema usa colors para los ajustes más básicos de color, para más ajustes será conveniente hacer un tema hijo y trabajar a partir del mismo. Pero como yo soy algo patán y no le tengo cogido el tranquillo a ésto de los temas hijos en Drupal, y por ende en Backdrop… pues uso normalmente el módulo CSS injector donde voy poniendo el código CSS personalizado.
Cambiar logo a pie de pagina
El tema Basis lleva un logo en el pie de la página con un dragón o algún bicho parecido y me decido a cambiarlo por un logo personalizado y quitar el texto y enlace «Powered by Backdrop CMS» por unos enlaces a las cookies y política de privacidad. Esta parte me costó bastante hacerla por que no daba con la tecla, en fin… tras varias pruebas y algunas horas nocturnas lo pude solucionar de la siguiente manera:
- Eliminar el bloque Powered by Backdrop CMS, éste es el que llama al logo, así que al quitarlo desaparece el logo también.
- Crear un formato de texto nuevo con todas las opciones desmarcadas y sin ningún editor asociado, le ponemos un nombre identificativo al caso, por ejemplo «ParaLogoPie».
- Creamos un bloque llamado por ejemplo «LogoPie» y en el campo de contenido le ponemos:
Con ésto lo que hacemos es llamar al logo a través de una clase css, que es la que tiene por defecto el tema basis. Ahora y muy importante, antes de guardar el bloque le asignamos el formato de texto que anteriormente creamos. - Con el módulo CSS injector creamos la siguiente regla:
.drop-lounging:before {
content: '';
position: absolute;
top: -0.75em;
left: 50%;
left: calc(50% + 1.25em);
display: none; /* Default hidden unless certain criteria are met */
box-sizing: content-box;
width: 100%;
height: 0;
margin: 0;
padding: 0 0 52%;
-webkit-transform: translate(-50%, -82%);
transform: translate(-50%, -82%);
background: url("../logos_pie/drop-lounging.png") no-repeat;
background-size: 69% auto;
}Es una copia de la clase original del tema Basis pero modificamos la ruta a nuestro logo y podemos retocar algún parámetro más para posicionar el logo a nuestro gusto.
- Por último situamos el bloque en el pie de página a través de los Layouts.
CONTINUARA…
Temática: Programación
Nivel: Básico
