WSC 6 HTML-Startseite (Free)

Gino Zantarelli · Nov 8th 2023

Hallo zusammen,

ich habe die kostenlose HTML-Startseitenvorlage für das WSC 6.x.x überarbeitet auf Version 1.5 und hier im Shop zum Download eingefügt. Diese Vorlage ist NICHT nutzbar für ältere WSC-Versionen (WSC 5.x.x, WSC 4.x.x)

Changelog 1.5:

- Alle Fontawesome-Icons angepasst an das WSC 6.x.x

- Icons der Button in den Teamboxen sowie der Social Links mit Animation durch SVG-Bilder ersetzt.

- Kleine Codefixes

Wer sich noch einmal die Demoseite anschauen möchte: >>> Zur Demo <<<

Viel Freude damit...

Euer Gino

SunnyCue · Mar 21st 2025

Anregung für ein weiteres "Start Big stripe" und zwar imaged für eine eventuelle nächste Version

Stylesheet:

CSS

/*--- IMAGED ---*/
#GZcustompagecontainer .stripe.bg-imaged {
    background-color: #151515; /* Fallback-Farbe, falls das Bild nicht lädt */
    color: #ffffff;
    background-image: url('#{$style_image_path}custom/head.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: var(--wcfBorderRadiusContainer); /* Abgerundete Ecken nur hier */
    overflow: hidden; /* Schneidet das Bild an den Ecken ab */
}

#GZcustompagecontainer .stripe.bg-imaged .button {
    background-color: transparent;
    border: 1px solid #ffffff;
    color: #ffffff;
    border-radius: var(--wcfBorderRadius);
}

#GZcustompagecontainer .stripe.bg-imaged .button:hover {
    background-color: #ffffff;
    color: #151515;
    transition: all 0.1s linear;
}

#GZcustompagecontainer .stripe.bg-imaged .layoutBoundary {
    background-color: #15151580;
}

#GZcustompagecontainer .stripe.bg-imaged .stripe-icon img {
    width: 40px;
    height: 40px;
}

Display More

HTML:

HTML

    <div class="section stripe">
        <div class="stripe bg-imaged">
            <div class="layoutBoundary">
                <div class="row">
                    <div class="col-md-12">
                        <div class="stripetext">
                            <div class="stripe-icon"><img src="{$__wcf->getStyleHandler()->getStyle()->getImage('favicon-48x48.png')}" alt="Info-Icon"></div>
                            <h4>Hier dreht sich alles um das ambitionierte Fan-Remake von Counter-Strike 1.6, entwickelt
                                von den Machern von CS Promod.</h4>
                            <p class="subtitle">Unsere Seite bietet dir die neuesten Infos, Updates und Diskussionen
                                rund um CS: Legacy – ein Projekt, das die klassische CS-Erfahrung mit moderner Technik
                                zurückbringt. Als inoffizielle Plattform auf Deutsch möchten wir Fans zusammenbringen,
                                Wissen teilen und die Entwicklung dieses vielversprechenden Spiels begleiten. Egal, ob
                                du ein Veteran von CS 1.6 oder ein neuer Spieler bist – bei uns findest du alles, was du
                                vor dem Early Access 2025 wissen musst. Tritt unserer Community bei und werde Teil der
                                Legacy!</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

Display More

Beispiel:

WSC 6 HTML-Startseite (Free)

Participate now!

Share