Woningen

P202-08 / V202-08

Projecten blog voor de woningen. De velden komen overeen met de velden aangeleverd door de Realworks koppeling.

Hoe te gebruiken?

Geef toestemming om het template te gebruiken in NASA en selecteer het template in de instellingen van de blog.

Neem daarnaast onderstaande CSS op in jouw eingen stylesheet om met dezelfde opmaak te beginnen.

Voorvertoning

Alvast beginnen met een basis opmaak?

CSS
Kopiëren/* Hide regular status field. */
.blog-item-preview .content .blog-field-status {
	display: none;
}

/* Add box shadow to preview content */
.blog-item-preview .content {
	box-shadow: 0 0 16px -8px rgba(0, 0, 0, 0.25);
	padding: 1rem 1rem 1px 1rem;
	margin-bottom: 2rem;
}

/* Resize images in the albums to a consistent size.  */
.blog-item .blog-content>[data-partial="image-album"][data-lightbox="images-below"] img {
	aspect-ratio: 3/2;
	object-fit: cover;
	object-position: 50%;
}
.blog-item .blog-content>[data-partial="image-album"][data-lightbox="plans"].row,
.blog-item .blog-content>[data-partial="image-album"][data-lightbox="plans"]>.row {
	align-items: center;
}

/* Breadcrumbs. */
.blog-collection .breadcrumb,
.blog-item .breadcrumb {
	display: none;
}

/* Hide header image. */
.blog-item .blog-content>[data-partial="image"]:first-child {
	display: none;
}

/* Hide status in items. */
.blog-item .blog-field-status,
.blog-item-preview .blog-field-price-prefix {
	display: none;
}

/* Remove the available message when an open day is available. */
.blog-field-open_house.position-anchor-top + .blog-field-status.position-anchor-top {
	display: none;
}

/* Apply link color only on hover. */
.blog-item-preview .blog-item-link {
	color: inherit;
}
.blog-item-preview .blog-item-link:active,
.blog-item-preview .blog-item-link:focus,
.blog-item-preview .blog-item-link:hover {
	color: var(--primary);
}

/* Make download button more prominent. */
.blog-item .blog-content [data-partial="download"] a.btn.btn-download {
	/* Capitalize button text. */
	text-transform: capitalize;

	/* Make buttons standout more by applying secondary colors. */
	background-color: var(--secondary);
	border-color: var(--secondary);
	color: var(--white);
}
.blog-item .blog-content [data-partial="download"] a.btn.btn-download:active,
.blog-item .blog-content [data-partial="download"] a.btn.btn-download:focus,
.blog-item .blog-content [data-partial="download"] a.btn.btn-download:hover {
	background-color: var(--secondary-dark);
	border-color: var(--secondary-dark);
}

/* Capitalize place names properly */
.blog-collection .blog-filters input[type="radio"][name="Plaats[]"] + label,
.blog-collection .blog-filters input[type="checkbox"][name="Plaats[]"] + label {
	text-transform: capitalize;
}

.blog-collection .btn.btn-back,
.blog-item .blog-content .btn.btn-back {
	background-color: var(--secondary);
	border-color: var(--secondary);
	color: var(--white);
}
.blog-collection .btn.btn-back:active,
.blog-collection .btn.btn-back:focus,
.blog-collection .btn.btn-back:hover,
.blog-item .blog-content .btn.btn-back:active,
.blog-item .blog-content .btn.btn-back:focus,
.blog-item .blog-content .btn.btn-back:hover {
	background-color: var(--secondary-dark);
	border-color: var(--secondary-dark);
}