Header Slider Rotation

Gehe zu Seite:

Geschlossen

So. 31.03.2024 15:37 Uhr #1

TheClown Mitglied

Registriert seit
22.01.2024

Beiträge
12

Beitragswertungen

Guten Tag und frohe Ostern,
wollte gerne beim Lyout WoT nur einen Header haben und nicht einen Dauerhaften switch zwischen den 3 festgelegten Slider.
Wie ist es möglich diesen nur auf einen Starren Header zu fixieren ?

Zu dem ist mir mir aufgefallen dass es ja gar kein "Über Uns" mehr gibt, alternative soll warschenlich die geschichte sein. Habe mich da auch schon rengetastet aber mit passt die Zeitachse leider nicht und weiß auch nicht wo ich alternative diese entfernen könnte.

danke im Voraus

verwendete ilch Version: 2.1.x
0 Mitglieder finden den Beitrag gut.
- zitieren

Di. 02.04.2024 11:20 Uhr #2

IronMan Mitglied

Moin,

ich weiß nicht mehr wie die Originale Index.php vom WoT Design aussieht, von daher musst du etwas rumprobieren.

Entferne

<div class="container">
                <div class="gaming">
                    <div id="carousel-generic" class="carousel slide" data-ride="carousel">
                        <ol class="carousel-indicators">
                            <li data-target="#carousel-generic" data-slide-to="0" class="active"></li>
                            <li data-target="#carousel-generic" data-slide-to="1"></li>
                            <li data-target="#carousel-generic" data-slide-to="2"></li>
                        </ol>

                        <div class="carousel-inner" role="listbox">
                            <div class="item active">
                                <img src="<?=$this->getLayoutUrl('img/slider/slider_1.jpg') ?>" alt="Slider 1">
                            </div>
                            <div class="item">
                                <img src="<?=$this->getLayoutUrl('img/slider/slider_2.jpg') ?>" alt="Slider 2">
                            </div>
                            <div class="item">
                                <img src="<?=$this->getLayoutUrl('img/slider/slider_3.jpg') ?>" alt="Slider 2">
                            </div>
                        </div>

                        <a class="left carousel-control" href="#carousel-generic" role="button" data-slide="prev">
                            <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                            <span class="sr-only"><?=$this->getTrans('previous') ?></span>
                        </a>
                        <a class="right carousel-control" href="#carousel-generic" role="button" data-slide="next">
                            <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                            <span class="sr-only"><?=$this->getTrans('next') ?></span>
                        </a>
                    </div>

                    <div class="gaming-name">
                        Clanname
                    </div>
                </div>
            </div>
        </header>

Einsetzen

<div class="container">
                <div class="gaming">
                    <div id="carousel-generic" class="carousel slide carousel-fade" data-ride="carousel">

                        <div class="carousel-inner" role="listbox">
                            <div class="item active">
                                <img src="<?=$this->getLayoutUrl('img/header.png') ?>" alt="Slider 1">
                            </div><!-- erweiterung class="item" kopieren-->
                        </div>
                      </div>
                </div>
            </div>

VG Iron

0 Mitglieder finden den Beitrag gut.

zitieren

Di. 02.04.2024 15:07 Uhr #3

TheClown Mitglied

Registriert seit
22.01.2024

Beiträge
12

Beitragswertungen

Danke hab es am Wochenende schon gefunden gehabt nur vergessen hier zu posten. Aber danke für die Bemühung 👍🏻
0 Mitglieder finden den Beitrag gut.
- zitieren
Sa. 20.04.2024 11:00 Uhr #4

RTX2070 Hall Of Fame

Registriert seit
14.06.2019

Beiträge
277

Beitragswertungen
Moin Moin,

auch wenn der Post schon etwas älter ist und es auch bereits eine Lösung gibt, hier mal eine kleine Anleitung wie man es meiner Meinung nach auch lösen kann. Vielleicht hilft es ja dem ein oder anderen von euch.

Vorweg möchte ich mitteilen !!
Wenn ein dauerhaftes Bild anstatt des Sliders angezeigt werden soll, sollten auch die unnötigen Bootstrap-Klassen entfernt werden.
Im obigen Post ist dies leider nicht der Fall.

Mein Vorschlag:

Ersetzt die entsprechenden Zeilen mit diesen hier.
Beachtet dabei folgendes:

Das <img>-Tag hat nun eine eigene CSS-Klasse -> hero-img
Der Pfad zum Bild ist nun img/hero/hero-img.jpg
Das Alt-Tag beinhaltet eine Beschreibung eures Bildes. Dieser Text wird angezeigt, wenn das Bild nicht geladen oder blockiert ist.
Passt die Ordnerstruktur entsprechend an!

Welches Bild auch immer ihr anzeigen wollt, es MUSS in diesem Pfad liegen und der Dateiname MUSS auch hero-img.jpg lauten !
Selbstverständlich könnt Ihr euch auch euren eigenen Pfad und Dateinamen wählen, es muss nur übereinstimmen.
Auch der Name der CSS-Klasse im <img>-Tag ist frei wählbar.
```
<div class="container">
                <div class="gaming">
                    <img class="hero-img" src="<?=$this->getLayoutUrl('img/hero/hero-img.jpg') ?>" alt="Beschreibung des Bildes">

                    <div class="gaming-name">
                        Clanname
                    </div>

                </div>


            </div>
```
Wenn ihr dies alles soweit habt, wechselt in euren Adminbereich.
Oben rechts findet ihr die Einstellungen.

Anschließend auf Benutzerdefinierte CSS

Fügt diese CSS-Regeln hinzu und speichert.
```
.hero-img{
    width: 100%; 
    height: 100%; 
    object-fit: cover;
}
```
Wie bereits erwähnt, könnt ihr den Namen der CSS-Klasse im <img>-Tag frei wählen. Ich habe jetzt diesen gewählt.
Das war es auch schon. Vielleicht hilft es euch weiter.

Anmerkung:

Jede index.php eines Layout sollte im <head> diese Zeile beinhalten.
```
<?=$this->getCustomCSS() ?>
```
Dadurch wird das benutzerdefinierte CSS dem Layout zur Verfügung gestellt.
Jedes offizielle Layout von Ilch beinhaltet diese Zeile aber...

Schönes Wochenende

Zuletzt modifiziert von RTX2070 am 20.04.2024 - 11:17:31
0 Mitglieder finden den Beitrag gut.
- zitieren

Beitrag zur Merkliste hinzufügen

ilch Forum » Ilch CMS 2.X » Module und Modifikationen » Header Slider Rotation