Handige CSS-codes

Door gebruik te maken van CSS-codes zijn de mogelijkheden in je layouts bijna onbeperkt. In onze standaard layouts is veel al voor je klaargezet. Ga je aan de slag met het aanpassen van de stylesheets? Misschien komen onderstaande CSS-codes goed van pas. Elke code is gemaakt voor een bepaalde positie of situatie, maar je kunt met het aanpassen van de codes natuurlijk alle kanten op. Heb je een specifieke vraag? Wij helpen je graag verder!


Afbeelding of icoon rechts bovenin de presentatie

Plaats een afbeelding of icoon, bijvoorbeeld om aan te geven dat er gezongen of gelezen wordt, rechts bovenin de presentatie weer. Je voegt hiervoor code toe in de algemene stylesheet (slide) en een stukje code per stylesheet, bijvoorbeeld “Song” of “Bible”.

Slide

.header{
background-size: auto 160px;
background-repeat: no-repeat;
background-position: calc(100% - 40px) center;
}
Elke slide waarin je een aparte afbeelding wilt hebben

.header{
background-image: url('https://app.kerkbeamer.nl/api/images/...');
}

Afbeelding of logo rechts onderin de presentatie

Plaats een afbeelding (bijvoorbeeld het logo van de kerk) rechts onderin de presentatie. Je voegt hiervoor code toe in de algemene stylesheet (slide). Wil je een afbeelding of logo alleen op bepaalde slides weergeven, voeg het tweede deel dan in bijvoorbeeld een ander stylesheet, zoals “Song” of “Bible”.

Slide

onder de achtergrondafbeelding, .footer of .content{
background-size: auto 90px;
background-repeat: no-repeat;
background-position: calc(100% - 30px) calc(100% - 30px);
}
Slide of per stylesheet als je een enkele afbeelding per slide wilt hebben

.content{
background-image: url(https://app.kerkbeamer.nl/api/images/...);
}

Tekst om een afbeelding heen laten lopen

Als je, bijvoorbeeld rechts onderin, een logo hebt dan wil je niet dat de tekst door het logo heen loopt. Hiervoor kun je het “shape” element gebruiken. Dit element is een onzichtbaar blok waar de tekst omheen loopt.

Slide

.content
.shape{
float: right;
width: 465px;
height: 170px;
margin-top: 634px;
shape-outside: border-box;

&.second{
display: none;
}
}

CSS generators

CSS-code kan lastig zijn, zeker als je er weinig ervaring mee hebt. Online zijn veel generators te vinden, waarmee je eenvoudig een stijl definieert. Deze gegenereerde code kun je vervolgens gebruiken in jouw KerkBeamer stylesheets. Hieronder hebben we enkele van deze websites opgenomen.


CSS kleuren

Kleuren worden in CSS aangegeven met een hexadecimale kleurcode. Dat is een # met 6 cijfers. Bijvoorbeeld: #000000 (zwart) of #FFFFFF (wit). Wil je je eigen kleur maken voor KerkBeamer? Op htmlcolorcodes.com/color-picker kun je een kleur selecteren en vervolgens de hexadecimale kleurcode kopiëren. Plak deze in een stylesheet om bijvoorbeeld de tekst- of achtergrondkleur aan te passen.


Bijgewerkt op 29 maart 2021

Heeft dit artikel je verder geholpen?

Wellicht vind je dit ook interessant