Das WBCE Newsmodul anpassen
Auf unserer Homepage / Workshops
Beitrag Schleife:
<div class="mod_nwi_group"> <div class="mod_nwi_teaserpic"> <a href="[LINK]">[IMAGE]</a> </div> <div class="mod_nwi_teasertext"> <div style="color:#ff8800; font-weight:bold; font-size:0.75rem; margin-bottom:5px; text-transform:uppercase;">[TAGS]</div> <a href="[LINK]" style="text-decoration:none;"><h3>[TITLE]</h3></a> <div class="mod_nwi_shorttext"> [SHORT] </div> <div class="mod_nwi_readmore" style="visibility:[SHOW_READ_MORE];"> <a href="[LINK]">[TEXT_READ_MORE]</a> </div> </div> </div>
Fußzeile:
<table class="mod_nwi_table" style="visibility:[DISPLAY_PREVIOUS_NEXT_LINKS]"> <tr> <td class="mod_nwi_table_left">[PREVIOUS_PAGE_LINK]</td> <td class="mod_nwi_table_center">[OF]</td> <td class="mod_nwi_table_right">[NEXT_PAGE_LINK]</td> </tr> </table>
Nachrichten-Kopfzeile:
<div class="blog-detail-header">
<h2>[TITLE]</h2>
<div class="blog-detail-meta">
<div class="meta-item">
<span class="meta-label">Von</span>
<span class="meta-author">[DISPLAY_NAME]</span>
</div>
<div class="meta-item">
<span class="meta-label">Am</span> [PUBLISHED_DATE]
</div>
<div class="meta-item">
<span class="meta-label">Um</span> [PUBLISHED_TIME] Uhr
</div>
</div>
</div>
Die CSS dazu deinedomain/modules/news_img/views/default
/*** 1. GLOBAL & WRAPPER (BLOG ÜBERSICHT) ****/
.mod_nwi_default {
max-width: 1100px;
margin: 0 auto 20px auto;
}/* Die Blog-Karte (Übersicht) */
.mod_nwi_default .mod_nwi_group {
display: flex !important;
flex-direction: row !important;
align-items: stretch !important;
background: #ffffff !important;
margin-bottom: 60px !important;
position: relative !important;
border-radius: 15px !important;
overflow: hidden !important;
box-shadow: 0 12px 35px rgba(0,0,0,0.1) !important;
border-bottom: 6px solid #ff8800 !important;
clear: both;
}/* Bild-Bereich in der Übersicht */
.mod_nwi_default .mod_nwi_teaserpic {
flex: 0 0 50% !important;
margin: 0 !important;
padding: 0 !important;
line-height: 0 !important;
float: none;
}.mod_nwi_default .mod_nwi_teaserpic img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
display: block !important;
max-width: 100% !important;
}/* Text-Bereich in der Übersicht */
.mod_nwi_default .mod_nwi_teasertext {
flex: 1 !important;
background: #ffffff !important;
padding: 35px 40px !important;
display: flex !important;
flex-direction: column !important;
justify-content: center !important;
margin: 0 !important;
}.mod_nwi_default .mod_nwi_teasertext h3 {
font-size: 1.7rem !important;
color: #1a1a1a !important;
margin: 0 0 10px 0 !important;
line-height: 1.2 !important;
font-weight: 800 !important;
}.mod_nwi_default .mod_nwi_shorttext {
font-size: 1rem !important;
line-height: 1.6 !important;
color: #444 !important;
margin-bottom: 25px !important;
}/*** 2. DETAIL-SEITE STYLING ****/
.blog-detail-header {
margin-bottom: 40px;
border-bottom: 2px solid #eee;
padding-bottom: 30px;
}.blog-detail-header h2 {
font-size: 2.5rem !important;
line-height: 1.2 !important;
color: #1a1a1a !important;
margin-bottom: 15px !important;
font-weight: 800 !important;
}.blog-detail-meta {
display: flex;
flex-wrap: wrap;
gap: 15px;
align-items: center;
color: #777;
font-size: 0.9rem;
}.meta-item:not(:last-child):after {
content: "•";
margin-left: 15px;
color: #ff8800;
font-weight: bold;
}.meta-author { color: #ff8800; font-weight: 600; }
.mod_nwi_default .mod_nwi_content_short {
background-color: #fff;
font-size: 1.2rem !important;
line-height: 1.7 !important;
font-weight: 600 !important;
color: #333 !important;
margin-bottom: 30px !important;
padding: 15px 15px 15px 20px !important;
border-left: 5px solid #ff8800 !important;
overflow: hidden;
}.mod_nwi_default .mod_nwi_content_long {
font-size: 1.1rem !important;
line-height: 1.8 !important;
color: #444 !important;
}/*** 3. BUTTONS & NAVIGATION (PAGINATION) ****/
.mod_nwi_table {
width: 100% !important;
border-collapse: separate !important;
border-spacing: 10px !important;
margin-top: 40px !important;
}/* Allgemeine Zellen-Regel */
.mod_nwi_table td {
padding: 0 !important;
text-align: center !important;
border-radius: 6px;
vertical-align: middle !important;
}/* Die roten Klick-Buttons (Vor / Zurück) */
.mod_nwi_table td.mod_nwi_table_left,
.mod_nwi_table td.mod_nwi_table_right,
.mod_nwi_table td.page-left,
.mod_nwi_table td.page-right {
background-color: #990000 !important;
transition: all 0.3s ease;
}.mod_nwi_table td a {
display: block !important;
padding: 12px 20px !important;
color: #ffffff !important;
text-decoration: none !important;
font-weight: bold !important;
}.mod_nwi_table td:hover { background-color: #333 !important; transform: translateY(-2px); }
/* KORREKTUR: Die mittlere Zelle (Seite x von y ODER "Zurück zur Übersicht") */
.mod_nwi_table td.mod_nwi_table_center,
.mod_nwi_table td.page-center {
background-color: #f8f8f8 !important; /* Heller Hintergrund */
color: #333 !important; /* Dunkle Schrift */
font-size: 15px !important; /* Etwas größer */
font-weight: bold !important;
padding: 10px !important;
border: 1px solid #ddd !important;
}/* WICHTIG: Links innerhalb der mittleren Zelle ("Zurück zur Übersicht") lesbar machen */
.mod_nwi_table td.mod_nwi_table_center a,
.mod_nwi_table td.page-center a {
color: #333 !important; /* Gleiche Farbe wie der Text */
display: inline !important; /* Kein Block-Link hier */
padding: 0 !important; /* Kein extra Padding */
background: transparent !important;
text-decoration: underline !important; /* Unterstreichen für Erkennbarkeit */
}/* Pfeile für die Buttons */
.mod_nwi_table td.mod_nwi_table_left a::before { content: "<< "; }
.mod_nwi_table td.mod_nwi_table_right a::after { content: " >>"; }/* Read More Button (Orange) */
.mod_nwi_default .mod_nwi_readmore a {
display: inline-block !important;
background: #ff8800 !important;
color: #fff !important;
padding: 12px 25px !important;
border-radius: 6px !important;
text-decoration: none !important;
font-weight: bold !important;
text-transform: uppercase !important;
transition: all 0.3s ease !important;
}/*** 4. BOXEN & BADGES ****/
.custom-date-badge {
position: absolute !important;
top: 15px !important;
left: 15px !important;
background: rgba(0, 0, 0, 0.7) !important;
color: #fff !important;
padding: 5px 12px !important;
border-radius: 4px !important;
font-size: 0.75rem !important;
z-index: 10 !important;
font-weight: bold !important;
}.tv-feature-box {
background: #f4f4f4; border: 2px solid #ff8800; padding: 20px; border-radius: 8px; text-align: center; margin: 20px 0;
}.quote-box {
background: #fff4f4; border-left: 5px solid #ff8800; padding: 15px; margin: 25px 0;
}/*** 5. RESPONSIVE (MOBILE) ****/
@media (max-width: 850px) {
.mod_nwi_default .mod_nwi_group { flex-direction: column !important; }
.mod_nwi_default .mod_nwi_teaserpic { flex: 0 0 250px !important; }
.mod_nwi_default .mod_nwi_teasertext { padding: 30px 20px !important; text-align: center !important; }
.mod_nwi_table, .mod_nwi_table tbody, .mod_nwi_table tr, .mod_nwi_table td {
display: block !important;
width: 100% !important;
}
.mod_nwi_table td { margin-bottom: 10px !important; }
}