This article is about how I (re)discovered a Joomla function, because I was inspired by a website I came across.
Lately I came across a nice website about career chances after school (I was doing some research for my kids). One section was displaying several teaser articles (like cards) with an icon, a title, an introtext and - what I found very cool - a button each with an individual text, not a boring “read more”. Immediately my brain went “how can I do that on a Joomla website?”.
Option 1: Develop an own module?
Doable but arduous
Option 2: Custom modules each with a link to an article?
Doable but needlessly complicated
Option 3: Articles module with boring “read more” button… Wait, there is a “hidden” option in articles we can use here to make our teasers more appealing! It's not exactly hidden, and it's been there for years, but I don't recall ever using this function. This is exactly what we need. Let's break this into small steps.
That is what we want to create:
Do you remember the demo website from my last article? “The Cake Factory” is getting a new section with information about the people, jobs and how to contact them.
I have created three articles and an Article Module to display them on the bottom of the page. You can have all three articles in a category or select them individually in the module:
A little bit of CSS and ta-da!
Boring “read more” buttons…
Now we go back to the article, in the tab “Options”:
and there is our parameter: “Read More Text”. You can insert an individual read more text for each article!
Now our teaser section is perfect!
The CSS I used (the module has the class “teaser” and I’m using Cassiopeia Extended as template):
/* Teaser section */
.container-bottom-a:has(.teaser) {
grid-column: full-start/full-end;
padding: 4rem 1em;
background-color: #8b6560;
color: var(--body-bg);
margin-block-start: 3rem;
& .bottom-a {
max-width: 1320px;
margin-inline: auto;
}
}
/* Articles Module */
.teaser {
h2 {
color: currentColor;
margin-block-end: 5rem;
}
.mod-articles-item {
height: 100%;
}
.mod-articles-item-content {
color: currentColor;
padding: 2.5rem 1.5rem 1.5rem;
border: .125rem solid var(--body-bg);
border-radius: .5rem;
display: flex;
flex-direction: column;
position: relative;
height: 100%;
&::before {
font-family: 'Font Awesome 6 Free';
font-weight: 900;
font-size: 3.5rem;
color: currentColor;
background-color: #8b6560;
display: flex;
justify-content: center;
align-items: center;
width: 6rem;
aspect-ratio: 1/1;
position: absolute;
top: -3.5rem;
left: 10%;
z-index: 2;
}
.readmore {
margin-block-start: auto;
margin-block-end: 0;
a {
display: block;
text-align: center;
font-weight: 600;
margin-block-start: 2rem;
}
span {
display: none;
}
}
.btn-secondary {
--btn-color: #8b6560;
--btn-bg: var(--body-bg);
--btn-border-color: var(--btn-bg);
background-color: var(--btn-bg);
&:hover {
--btn-hover-color: #fff8f0;
--btn-bg: var(--headerbg);
--btn-hover-border-color: var(--btn-bg);
}
}
}
.mod-articles-items {
li:nth-child(1) .mod-articles-item-content::before {
content: "\f5b8";
}
li:nth-child(2) .mod-articles-item-content::before {
content: "\e51a";
}
li:nth-child(3) .mod-articles-item-content::before {
content: "\f4ad";
}
}
}
On a real project I would probably use the image field of the article to put the icon in. Or a custom field and an override. Or another fancy combination. But for the purpose of this demo (and because there are only three teasers) I decided to use CSS only. And it works very well ;-)
Do you get inspired by other websites and ask yourself if it is possible to do the same with Joomla? You should try.