Vier manieren om de vormgeving van je content aan te passen met CSS
In dit artikel laat ik je zien hoe je de bloglayout en de artikelmodule in Cassiopeia (of een andere template die de core views gebruikt) kunt aanpassen zonder overrides — enkel door gebruik te maken van CSS Grid Layout.
CSS Grid Layout is een krachtig, tweedimensionaal layoutsysteem voor het web. Hiermee kun je content organiseren in kolommen en rijen en complexe lay-outs creëren.
Fotogalerij met overlay-effect
Voor dit voorbeeld heb ik een aantal artikelen aangemaakt in de categorie “Foto’s”. Elk artikel bevat een intro-afbeelding met een bijschrift.
Afbeeldingsopties voor artikelen
Om de artikelen weer te geven, maken we een menu-item aan van het type Categorie Blog, waarbij alleen Intro-artikelen in drie kolommen worden weergegeven. Onder Opties verbergen we alle elementen (titel, auteur, datum, etc.). We willen alleen de afbeeldingen tonen. In het tabblad Paginaweergave voegen we de Pagina Class “gallery” toe, zodat we CSS-wijzigingen alleen op dit menu-item / deze bloglayout kunnen toepassen. Je kunt de CSS voor deze nieuwe class toevoegen in je user.css bestand (als je niet weet hoe je user.css aanmaakt, lees dan dit artikel: https://magazine.joomla.org/all-issues/june/style-your-joomla-website-articles-newsflash)
Voordat we de CSS aanpassen, ziet de blog er zo uit:
Blog met 3 kolommen die afbeeldingen met bijschriften tonen.
We willen nu het bijschrift als overlay op de afbeelding tonen.
De onderstaande code definieert een grid met één kolom en één rij, waarbij zowel de afbeelding als het bijschrift in dezelfde cel worden geplaatst. Met z-index plaatsen we het bijschrift boven op de afbeelding. De onderstaande CSS verbergt het bijschrift eerst en maakt het zichtbaar bij hover. Het bijschrift wordt gecentreerd met een semi-transparante achtergrond. Door een overgang en zoom-effect toe te voegen, wordt de galerij aantrekkelijker.
.gallery .item-image {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 1fr;
figcaption {
grid-column: 1;
grid-row: 1;
background-color: rgba(255, 255, 255, .7);
z-index: 1;
display: flex;
justify-content: center;
align-items: center;
opacity: 0;
transition: all ease-in-out .6s;
color: #000;
font-size: 2rem;
}
img {
grid-column: 1;
grid-row: 1;
margin: 0;
transition: all ease-in-out .6s;
}
&:hover {
figcaption {
opacity: 1;
}
img {
transform: scale(1.05);
}
}
}
Blog met 6 afbeeldingen — één wordt gehoverd en toont bijschrift als overlay. (zie hieronder..)
Bloglayout met afbeelding als achtergrond
In het volgende voorbeeld heb ik verschillende artikelen in de categorie “Reizen” gemaakt, elk met een intro-afbeelding en -tekst. Het menu-item is ingesteld om twee kolommen weer te geven, met titel (zonder link), introtekst en een lees-meer-knop. Het resultaat ziet er zo uit:
Blog met 2 kolommen.
Met een paar regels CSS kunnen we een overlay-effect maken waarbij de intro-afbeelding als achtergrond wordt gebruikt en de inhoud erbovenop wordt geplaatst. Opnieuw definiëren we een grid met één kolom en rij en plaatsen we afbeelding en inhoud in dezelfde cel. De inhoud krijgt een semi-transparante achtergrond voor betere leesbaarheid:
.travel .blog-item {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 1fr;
.item-content {
grid-column: 1;
grid-row: 1;
background-color: rgba(0, 0, 0, .6);
z-index: 1;
display: flex;
flex-direction: column;
justify-content: center;
padding: 1rem;
color: #fff;
}
.item-image {
grid-column: 1;
grid-row: 1;
margin: 0;
}
}
Na toepassen ziet her alsvolgt uit:
Blog met animatie-effect
We gaan nu de reisblog aanpassen naar een nieuw layout. In het menu-item zetten we “Gekoppelde Intro-afbeelding” op “Ja” (belangrijk om de animatie te activeren bij hover of toetsfocus) en verbergen we de lees-meer-knop.
We definiëren een grid met twee kolommen, waarbij de eerste kolom tweemaal zo breed is als de tweede. De inhoud is verborgen met opacity: 0. De afbeelding wordt als cirkel weergegeven (border-radius: 50% en aspect-ratio: 1/1). Bij hover of focus verandert de cirkel in een vierkant en wordt de inhoud zichtbaar. Media queries passen het gedrag aan voor kleinere schermen of apparaten zonder muis.
.travel2 .blog-item {
display: grid;
grid-template-columns: 2fr 1fr;
gap: 1rem;
align-items: center;
.item-image {
a {
display: block;
border-radius: 50%;
margin: 5px;
transition: all ease-in-out .6s;
&:focus-visible {
outline: 2px solid var(--cassiopeia-color-primary);
outline-offset: 2px;
}
}
img {
border-radius: 50%;
aspect-ratio: 1/1;
transition: all ease-in-out .6s;
}
}
.item-content {
opacity: 0;
transition: all ease-in-out .6s;
}
}
.travel2 .item-image:has(a:focus-visible),
.travel2 .item-image:has(a:hover) {
a {
border-radius: 0;
}
img {
border-radius: 0;
}
~ .item-content {
opacity: 1;
}
}
@media (width <= 768px) {
.travel2 .blog-item {
grid-template-columns: 1fr;
}
}
@media (pointer: coarse) OR (pointer: none) {
.travel2 .blog-item .item-content {
opacity: 1;
}
}
Blog met 2 afbeeldingen, één is een cirkel en toont tekst bij hover.
Bonus: Overlap-effect voor Artikelenmodule
Met de Artikelenmodule is het mogelijk een enkel artikel weer te geven op een modulepositie:
Opties in de Artikelenmodule
We verbergen nu alle elementen behalve de introtekst en de intro-afbeelding.
Voor dit voorbeeld creëren we een complexere grid-layout. Om de structuur en plaatsing van elementen duidelijker te maken, is er een screenshot van de grid met genummerde lijnen.
Het grid heeft acht kolommen (lijnen 1 t/m 9) en drie rijen (lijnen 1 t/m 4).
De afbeelding neemt drie rijen (1–4) en vier kolommen (4–8) in. De tekst staat in de middelste rij, over drie kolommen (2–5), en overlapt de afbeelding. De vorm van de gekleurde achtergrond wordt bepaald door de border-radius.
@media (width >= 768px) {
.overlap .mod-articles-item-content {
display: grid;
grid-template-columns: repeat(8, 1fr);
grid-template-rows: 50px 1fr 50px;
.mod-articles-image {
grid-row: 1 / 4;
grid-column: 4 / 8;
img {
width: 100%;
height: 100%;
object-fit: cover;
}
}
p {
grid-row: 2;
grid-column: 2 / 5;
z-index: 1;
display: flex;
justify-content: center;
align-items: center;
padding: 4rem;
background-color: #396cb0;
color: #fff;
border-radius: 48% 52% 67% 33% / 30% 43% 57% 70%;
}
}
}
afb: Module met afbeelding en overlappende tekst.
Het doel van mijn CSS-tutorials en how-to’s is om mensen te motiveren moderne CSS te leren, begrijpen en gebruiken om aanpassingen te maken op hun websites. Soms is een framework of extensie te veel voor de situatie. Soms heb je een override nodig, maar — zoals ik in de vier voorbeelden hierboven heb laten zien — kun je met een paar regels CSS al veel bereiken.
Dit artikel werd oorspronkelijk gepubliceerd in het Joomla Community Magazine.
Lees alle artikelen in het magazine via deze link
Joomla! bestaat al 19 jaar als Open Source project. Dat is een lange tijd in technologiejaren! 19 jaar geleden kon je niet eens een iPhone bezitten, of X gebruiken en waarschijnlijk had je geen Facebook-account maar een Hyves-account 😊.
Er is veel gebeurd, maar Joomla! is al die tijd een duurzame keuze gebleken als CMS voor miljoenen websites wereldwijd, ondersteund door een betrokken community.