Im Rahmen der Webseite waren unter der Standard-Ansicht Menüs vom Type Kategorie-Blogs die einzelnen Blog-Einträge nur schwer zu unterscheiden. Es war nicht eindeutig klar, welches Bild zu welchem Blog-Eintrag gehört. So beschlossen wir, dass eine deutlicher Abgrenzung der Blog-Einträge wünschenswert wäre. Unsere KI schlug vor, dass wir in der Datei custom.css im Ordner CSS unterhalb des Template Ordners von Helix Ultimate einige Einträge machen, damit ab dem 2. Blog-Eintrag die Beitrag deutlicher differenziert werden. Dies waren dann:
· Rahmen um den Blog-Beitrag
· Hervorheben der Bilder, wenn die Maus über den Beitrag fährt
· Hervorheben des Beitrages, wenn die Maus über den Beitrag fährt
· Alle Bilder haben abgerundete Ecken
Ergebnis ist, dass das Menü vom Type Kategorie-Blog ansprechender wirkt.
/* ===================================================
Kategorieblog – Normale Artikel einheitlich
Lead-Artikel bleibt wie vom Template
Alle weiteren Artikel mit Rahmen, Hover, Bilder, Buttons
=================================================== */
/* Normale Artikel */
.blog-item .article {
border: 3px solid #e0e0e0; /* Rahmen pro Artikel */
border-radius: 12px;
padding: 20px;
margin-bottom: 25px; /* Abstand zwischen Artikeln */
box-shadow: 0 4px 12px rgba(0,0,0,0.08);
transition: transform 0.2s, box-shadow 0.3s;
overflow: hidden;
}
/* Hover Effekt für alle normalen Artikel */
.blog-item .article:hover {
transform: translateY(-3px);
box-shadow: 0 8px 20px rgba(0,0,0,0.15);
border-color: #c0c0c0;
}
/* Überschriften */
.blog-item .article .article-header h2 {
margin-bottom: 12px;
font-size: 1.35rem;
}
/* Bilder */
.blog-item .article img {
border-radius: 12px;
max-width: 100%;
height: auto;
display: block;
margin: 0 auto 18px auto;
transition: transform 0.3s, box-shadow 0.3s;
}
.blog-item .article img:hover {
transform: scale(1.03);
box-shadow: 0 6px 15px rgba(0,0,0,0.2);
}
/* Text */
.blog-item .article .article-introtext p {
font-size: 1.05rem;
line-height: 1.6;
}
/* „Weiterlesen“-Buttons */
.blog-item .article .btn {
background-color: #fff;
color: #000;
border: 2px solid #000;
transition: background-color 0.3s, color 0.3s;
}
.blog-item .article .btn:hover {
background-color: #000;
color: #fff;
}