Agenda

P202-14 / V202-14

Standaard worden er twee extra velden verwacht, Datum en Locatie. Waarbij het handig is dat bij het veld Datum de optie van meerdere mogelijkheden aan wordt gezet. Mochten er meer velden zijn dan worden deze automatisch toegevoegd aan de pagina's maar niet aan de panelen! Zie ook de agenda configuratie om de juiste instellingen te gebruiken.

Hoe te gebruiken?

Zet wanneer p202-agenda verkocht is de blog "agenda" aan in het NASA systeem en kopieer onderstaande code in je template.

Voorvertoning

Alvast beginnen met een basis opmaak?

CSS
Kopiëren/* Agenda */

.blog-template-agenda.blog-collection {
	padding: 2rem;
}

@media only screen and (min-width: 992px) {
	.blog-template-agenda.blog-collection {
		padding: 4rem;
	}
}

.blog-template-agenda .blog-item-preview {
	background-color: var(--tertiary);
	border-radius: var(--panel-radius) 0 var(--panel-radius) var(--panel-radius);
	overflow: hidden;
	margin-bottom: 1.5rem;
}

.blog-template-agenda .blog-item-preview .image {
	overflow: hidden;
}

.blog-template-agenda .blog-item-preview .image img {
	transition: transform 0.4s ease-in-out;
}

.blog-template-agenda .blog-item-preview:hover .image img,
.blog-template-agenda .blog-item-preview:focus .image img {
	transform: scale(1.075);
}

.blog-template-agenda .blog-item-preview .content {
	color: #fff;
	padding: 1.5rem;
}

.blog-template-agenda .blog-item-preview .content .title {
	font-size: 1.5rem;
}

.blog-template-agenda .blog-item-preview .readmore {
	display: block;
	font-weight: 700;
	text-align: right;
}

.blog-template-agenda .blog-item-preview .fields ul li {
	font-size: 14px;
	margin-bottom: 0.5rem;
}

.blog-template-agenda .blog-item-preview .blog-field-date::before,
.blog-template-agenda.blog-item .fields .blog-field-datum::before {
	content: "\f133";
	font: var(--fa-font);
	margin-right: 0.5rem;
	color: var(--secondary);
}

.blog-template-agenda.blog-item .btn-back {
	padding-left: 0;
}

.blog-template-agenda.blog-item .blog-content-header img {
	border-radius: var(--panel-radius);
}

.blog-template-agenda .blog-field-locatie::before {
	content: "\f3c5";
	font: var(--fa-font);
	margin-right: 0.5rem;
	color: var(--secondary);
}

.blog-template-agenda .blog-content-form {
	background-color: var(--tertiary);
	padding: 2rem;
	margin: 1rem 0;
	border-radius: var(--panel-radius) 0 var(--panel-radius) var(--panel-radius);
}

.blog-template-agenda .blog-content-form h2,
.blog-template-agenda .blog-content-form label:not(.dropdown-item label) {
	color: #fff;
}

.blog-template-agenda .blog-content-form .form-control{
	border-color: var(--white);
}

.blog-template-agenda .blog-content-form .form-control:hover,
.blog-template-agenda .blog-content-form .form-control:focus {
	border-color: var(--secondary);
}

/* .blog-template-agenda .blog-content-form small {
	display: none;
} */