De website van je vereniging is gebaseerd op een van onze awesome standaard lay-outs of een speciaal door onze partners ontwikkelde maatwerk lay-out.
In Congressus Manager kan je het uiterlijk van je website aanpassen aan je huisstijl door middel van logo, favicon, kleuren en lettertypes. Daarnaast kun je vaak een hoop uitstraling aan je website geven door het gebruik van goede afbeeldingen, bijvoorbeeld als header afbeelding.
Custom CSS
Wil je echter meer aanpassen, dan kun je als expert net dat stukje verder gaan.
Custom CSS toevoegen
Om custom CSS toe te kunnen voegen ga je naar Websitebeheer > Website instellingen, tabblad Custom code.
Het is niet mogelijk om de HTML van je website aan te passen met Custom CSS.
Voorbeelden van Custom CSS
We hebben een paar handige voorbeelden voor CSS op een rijtje gezet:
Lichte tekst op donkere footer
 Before |  After |
LET OP: Vervang de kleurcode #072853 in onderstaand voorbeeld voor de door gewenste achtergrondkleur.
footer{
background-color: #072853;
color: #fff;
}
footer .headline {
border-bottom: 1px solid rgba(255,255,255,.1);
}
.social-icons li a {
background-color: rgba(255,255,255,.2);
}
dl.headlines.headlines-footer dd .text-muted {
color: rgba(255,255,255,.5);
}
footer a,
dl.headlines.headlines-footer dd a {
color: #ddd;
color: rgba(255,255,255,.7);
}
footer a:focus,
footer a:hover,
dl.headlines.headlines-footer dd a:focus,
dl.headlines.headlines-footer dd a:hover {
color: #fff;
}
Afbeeldingen bij nieuws / evenementen volledig tonen
Sinds de visuele update van januari 2021, tonen we afbeeldingen bij evenementen in een verhouding van 16:9. De rest van afbeelding wordt niet getoond. Dit is niet voor iedere vereniging gewenst. Met onderstaande CSS kun je instellen dat de afbeelding weer volledig getoond wordt.
.module-news .paragraphs .img-responsive {
object-fit: contain !important; object-position: center left;
}
.heading-image {
padding-bottom: 25%;
} .module-events .paragraphs .img-responsive {
object-fit: contain !important; object-position: center left;
}
.heading-image {
padding-bottom: 25%;
}
Gerelateerde artikelen