Die Menüs vom Type Kategorie-Liste sind von Haus aus ziemlich rudimentär. Man kann zwar über den Reiter „Layout“ Felder verbergen wie Anzahl der Zugriffe und den Autor, auch Datumsformate sind einstellbar. Trotzdem gibt es auch hier noch Potential zur Verbesserung. Weg war wieder die Dateien custom.css im Ordner CSS unterhalb des Templates Helix Ultimate.
In diesem Zusammenhang haben wir ein Check-Icon vor jedes Listen-Element gesetzt und das Layout der Liste leicht verändert. Die Zeilen sind optische abgerundet und beim fahren der Maus über den Listeneintrag hebt sich die Zeile hervor.
/*-----------------------------*/
/* Kategorie Liste verschönern */
/*-----------------------------*/
/* Kategorie-Tabelle: Titel-Link mit Platz für Icon */
.com-content-category__table th.list-title a {
position: relative;
padding-left: 32px; /* Platz für Icon */
font-weight: inherit; /* Template-Schriftgewicht */
color: inherit; /* Textfarbe vom Template */
text-decoration: none;
display: inline-block;
}
/* Schwarzes Check-Icon links vom Titel */
.com-content-category__table th.list-title a::before {
content: "\f00c"; /* Check-Icon */
font-family: "Font Awesome 6 Free", "Font Awesome 5 Free"; /* FA5/FA6 kompatibel */
font-weight: 900; /* Solid */
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
color: black; /* Nur Icon schwarz */
font-size: 0.95em;
display: inline-block;
}
/* Zeilen optisch abgerundet und leichtes Padding */
.com-content-category__table tbody tr {
border-radius: 6px;
transition: background-color 0.3s ease;
}
/* Hover-Effekt für Zeilen */
.com-content-category__table tbody tr:hover {
background-color: #f5f5f5;
}
/* Optional: Link-Hover */
.com-content-category__table th.list-title a:hover {
text-decoration: underline;
}