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 activeren

Om custom CSS toe te kunnen voegen, dien je dit even aan te vragen bij Congressus Support. Dat kan via chat of support@congressus.nl en is vaak binnen een werkdag geregeld.

Custom CSS toevoegen

Eenmaal geactiveerd kan je de Custom CSS editor vinden in Congressus Manager onder Instellingen > Websites > (Tabblad) Custom CSS.

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%; 
}