Hallo,
Da ich keine Berechtigung zum Posten dieses Themas im entsprechenden Bereich habe (Projekt-Vorstellungsbereich für Forenbetreibe) habe ich in Absprache per E-Mail mit Herrn Pozgaj die Erlaubnis bekommen es hier zu posten.
Ich möchte euch mein Projekt vorstellen, welches ich mit der WoltLab Suite 5.5 RC1 erstellt habe: http://www.StarWars-Games.de .
Ich habe hier das "Problem", dass ich mit Boxen arbeite. Sobald ich neue erstellen möchte per HTML und CSS muss ich auch die CSS Definitionen mit der entsprechenden Klasse erweitern. Zum Beispiel, wenn ich ein anderes Hintergrundbild habe möchte für eine neue Kachel muss ich eine neue CSS Klasse anlegen. Vielleicht habt ihr eine Idee wie ich das eleganter lösen kann.
Die kleine Kachel sieht zb.: so aus: Darunter das CSS für diese Box, soweit es mir möglich war zusammengefasst:
<div class="smallbox_swjstrailer">
<a href="/article/2-star-wars-jedi-survivor/" onclick="playclip_kachel_click();" onmouseover="playclip_kachel_hover();"><h3>Star Wars™: Jedi Survivor™<p>Teaser-Trailer</p></h3></a>
</div>
.smallbox_swjstrailer, .smallbox_swetrailer, .smallbox_gamescom, .smallbox_facebook, .smallbox_twitter, .smallbox_conceptarts, .smallbox_fanarts
, .smallbox_reddit, .smallbox_ego_respawn, .smallbox_strategie_bitreactor, .smallbox_openworld_ubisoft, .smallbox_kotorremake
{width: 50%}
.smallbox_swjstrailer a h3 {
background: url(/images/style-2/smallbox_teaser_jedi.webp) no-repeat center; padding: 10px; color: #fff; height: 130px; border: 4px solid #aeaeae; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; transition: background-color 300ms ease; -moz-transition: background-color 300ms ease; -webkit-transition: background-color 300ms ease; -o-transition: background-color 300ms ease;
background-size: cover; text-transform: uppercase; font-weight: 600; font-size: 22px;
}Die große Kachel:
<div class="bigbox">
<a href="/star-wars-jedi-survivor/" onclick="playclip_kachel_click();" onmouseover="playclip_kachel_hover();"><div class="swjs_kachel"><h2>Star Wars™: Jedi Survivor™<p>Respawn Entertainment</p></h2><div class="swjs_kachel_text">Infos, Trailer und mehr</div></div></a>
</div>
.swjs_kachel {
width: 100%; height: 407px; position: relative; background: url("/images/style-2/swjs_kachel.jpg") no-repeat; border-left: 4px solid #aeaeae; border-right: 4px solid #aeaeae; border-bottom: 4px solid #aeaeae; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; background-position: top;
}Das "Problem" was ich hier sehe ist, dass je größer die Seite werden würde, umso größer wird zwangsläufig die CSS Datei. Habt ihr da eventuell eine elegantere Lösung oder Idee für mich? 
