Jouw FolkAgenda op jouw site
Je kan de FolkAgenda events die jij geplaatst hebt op jouw eigen website laten zien. Dat kan doormiddel van een widget, of door middel van een WordPress plugin.
WordPress Plugin
Via deze WordPress Plugin kan je jouw Folk Agenda op jouw website tonen. De layout is identiek aan die van FolkAgenda, maar alleen jouw eigen events worden getoond. Op die manier hoef je jouw events alleen op FolkAgenda.nl in te voeren en komen ze automatisch ook op jouw eigen site te staan.
- Download en instal de plugin in je wordpress site
- Activeer de plugin
- Ga naar Settings > Folk Agenda
- Voer je Api Key, Persoonlijke Passkey en je Agenda Passkey in – die kan je vinden in jouw folkagena account.
- Plaats de shortcode [folkagenda] op de plek waar je jouw agenda wil tonen.
De WordPress Plugin is binnenkort te installeren vanaf het WordPress Plugin Repository
Css aanpassen
Je kan de Css van de plugin aanpassen in de plugin settings. Hieronder kan je de standaard css kopiƫren en in de plugin plakken / aanpassen.
Standaard CSS
/*formatting of the date*/
.folkagenda-date {
font-weight: bold;
font-size: 1.1em;
}/*formatting of the title*/
.folkagenda-title {
font-weight: bold;
font-size: 1.6em;
}/*formatting of the description*/
.folkagenda-description {
padding-top: 20px;
padding-bottom: 20px;
}/*the wrapper for the image, inside the container.*/
/*this enables giving the image certain proportions*/
.folkagenda-image-wrapper {
padding-top: 75%;
display: block;
position: relative;
max-width: 100%;
}/*the image itself*/
.folkagenda-img {position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
object-fit: cover;
}.folkagenda-btn-div{
margin-bottom: 25px;
}
.folkagenda-button{
padding: 10px;
border-radius: 5px;
color: white;
text-decoration: none;
font-weight: bold;
}
.folkagenda-button-tickets{
background-color: #7daf37;
}.folkagenda-button-info{
background-color: #376faf;
}.folkagenda-row {
border-bottom: thin solid #f1f1f1;
margin-bottom: 25px;
padding-bottom: 25px;
}.folkagenda-3{
text-align: right;
}/*some media queries to change the look for different screen sizes*/
@media screen and (min-width: 1200px) {
.folkagenda-row {
display: grid;
grid-template-columns: repeat(12, 1fr);
grid-template-rows: 1fr;
grid-column-gap: 0px;
grid-row-gap: 0px;
grid-auto-rows: max-content;
}.folkagenda-1 {
grid-area: 1 / 1 / 2 / 4;
}.folkagenda-2 {
grid-area: 1 / 4 / 2 / 11;
padding-left: 25px;
}.folkagenda-3 {
grid-area: 1 / 11 / 2 / 13;
}
}/*some media queries to change the look for different screen sizes*/
@media screen and (max-width: 1200px) {
.folkagenda-row {
display: grid;
grid-template-columns: repeat(12, 1fr);
/*grid-template-rows: repeat(2, 1fr);*/
grid-column-gap: 0px;
grid-row-gap: 0px;
grid-auto-rows: max-content;
}.folkagenda-1 {
grid-area: 1 / 1 / 2 / 13;
padding-bottom: 25px;
}.folkagenda-2 {
background: #7daf37;
grid-area: 2 / 1 / 3 / 10;
}.folkagenda-3 {
grid-area: 2 / 10 / 3 / 13;
}
}/*this hides or shows the agenda title. Don't touch*/
.show-agenda- {
display: none;
}
Widget
Deze widget kan je op elke html pagina plaatsen. Vul jouw Persoonlijke Passkey, je Agenda Passkey en je Api Key in en de widget importeert automatisch jouw FolkAgenda Events!
Coming Soon