De tips in dit artikel zijn alleen geschikt als je bekend bent met Custom CSS. Custom CSS staat niet standaard geactiveerd op je account. Stuur een mailtje naar [email protected] om deze kosteloos te activeren.
De event website van Momice kun je helemaal zelf stylen met de bestaande widgets en pagina’s. Maar wil je wil je buiten de standaard mogelijkheden gaan met je ontwerp? Dan kun je gebruik maken van de Custom CSS mogelijkheden. We hebben een aantal voorbeelden uitgewerkt waarvan je de code zo kunt overnemen. Meer informatie over Custom CSS vind je hier: https://www.w3schools.com/.
Let op: CSS is erg foutgevoelig, 1 foutje in tekst, {} of punten zorgt er voor dat alle code het niet meer doet. Dus controleer goed of jouw eigen ontwerp goed werkt op verschillende schermmaten (mobiel, tabelt en desktop).
Kleurverloop
Met onderstaande codes kan je de kleurverloop aanpassen van bijvoorbeeld knoppen, de programma widget, de bovenbalk en de footer op je website.
Code:
background: linear-gradient(338deg, #b5818b, #4c7a9f);
338deg → Staat voor de hoek graden
#b5818b, #4c7a9f → zijn de kleur codes
#topbar{
background: linear-gradient(338deg, #80a6b5, #ffffff);
}
html body footer{
background: linear-gradient(338deg, #273f52, #4c7a9f);
}
TIP: Je kunt ook gebruik maken van deze gradiënt generator: https://cssgradient.io/ & kopieer de code en plak deze tussen de {}!
Waar pas je dit aan: In stap 2, stijl, van de Website Module kan je onderin rechts 'aangepaste stijl’ vinden.
Header widget
Met onderstaande code kan je de tekst op de header widget van de homepage links uitlijnen. Normaal staat deze standaard in het midden uitgelijnd.
Titel en subtitel links uitlijnen
.header-title-container{
text-align: left!important;
}
.header-subtext-container{
text-align: left!important;
}
.header{
min-height: 450px!important;
}
Voorbeeld met header widget waar de titel en tekst naar links is uitgelijnd:
Programma widget
Met onderstaande code kan je de achtergrond-en lijnkleuren van de programma widget op de homepagina aanpassen.
Achtergrondkleur blokken & lijnkleuren
Dit is de achtergrond kleur van het hele programma:
html body .inner {
background-color: #ffffff00!important;
}
Dit is de achtergrond kleur van een programma item + de lijn kleur:
html body .inner .item{
background-color: #ffffff00!important;
border-color: #000000!important;
}
* De # kleur code is de kleur en de 00 er achter de transparantie. Deze kan je ook een andere kleur geven of bijv 50% transparant door de 00 te vervangen voor 50.
Dit is de achtergrond kleur van het bovenste blok met de datum:
html body .inner div.day-header.active{
background-color: #ffffff!important;
}
Dit is de lijn kleur van het bovenste blok met de datum:
.day-container{
border-color: #ffffff!important;
}
In bovenstaand voorbeeld is het volgende gedaan:
De achtergrondkleur van de items zijn volledig transparant gemaakt en de achtergrond van het hele programma heeft een transparantie van 80% gekregen.
De lijnkleuren zijn volledig transparant
Programma bovenbalk een verloop met 2 kleuren
Knopstijlen
Met onderstaande codes kan je de stijl van de knoppen aanpassen in Momice.
Type knoppen om te stijlen:
a.btn = alle knoppen
.btn-1, .btn-2, .btn-3 = de losse knoppen.
* Deze kunnen elk los van elkaar gestijld worden met CSS.
Verschillende soorten knop stijlen:
a.btn{
color:#000000!important;
background-color: #000000!important;
border-color: #46a8bf!important;
border: 5px solid;
border-radius: 25px;
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
padding: 10px 25px;
}
Van boven naar beneden:
Tekst kleur
Achtergrondkleur knop
Rand kleur
Rand dikte
Ronding van de hoeken
Schaduw
Padding boven/onder & links/rechts
Knop 01
html body .btn{
background-color: #f1f4f6!important;
color:#b5818b!important;
border-color: #4c7a9f!important;
}
Knop 02
html body .btn{
background-color: #f1f4f6!important;
color:#4c7a9f!important;
border-color: #4c7a9f!important;
}
Knop 03
html body .btn{
background-color: #4c7a9f!important;
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
border-radius: 25px
}
Knop 04
html body .btn{
border-radius: 25px
padding: 10px 25px;
border: 0px;
background: linear-gradient(338deg, #4c7a9f, #b5818b);
}
Tekst
Met onderstaande code kan je tekst die standaard in hoofdletters wordt getoond, aanpassen naar kleine letters. Bijvoorbeeld in knoppen of bij de aftelklok.
Kleine of grote letters (Voeg het volgende stukje code toe aan bijv de knoppen of aftelklok). In Momice staat de tekst onder de aftelklok & de tekst in de knoppen automatisch op “uppercase”.
Hoofdletters:
text-transform: uppercase;
Kleine letters:
text-transform: lowercase;
Alle woorden een hoofdletter:
text-transform: capitalize;
Begin van elke zin een hoofdletter, veder kleine letters:
text-transform: none;
Aftelklok kleuren
Met onderstaande code kan je de kleuren van de aftelknop wijzigen, zonder andere kleuren aan te passen op de website.
Grote cijfer:
span.number{
color:#b5818b;
}
Tekst onder cijfer:
.widget-countdown .label-countdown.unit{
color:#46a8bf;
}
Pauze knop:
.countdown-toggle{
border-color:#46a8bf!important;
}