Last Forum
Login or regist
Registrieren
Passwort vergessen?

Forum Tutorials Ilch 1.1 Tutorials Schneeflocken nur im Header

Schneeflocken nur im Header

Post von IronMan » 19.07.2018 11:35:17


Hier mal ein kleines Tutorial über Schneeflocken die nur im Header angezeigt werden, statt über die ganze Seite. Ich Persönlich finde es nicht so schön wenn es über die ganze Seite rieselt.

Ich gehe davon aus, dass Ihr euch mit euren Webspace auskennt und mit FTP-Programmen umgehen könnt. Darum gehe ich in diesem Tutorial nicht weiter darauf ein.


Als erstes ladet Ihr euch das Script von dieser Seite herunter, natürlich könnt Ihr auch ein anderes nehmen. Entpackt dann das Zip-Archiv auf euren Desktop, nachdem Ihr es entpackt habt, seht Ihr 2 Dateien, uns interessiert aber erst mal nur die schnee.js

Öffnet nun euer FTP-Programm und verbindet euch auf euren FTP-Server, hier müssen wir jetzt das schnee Script in den Ordner include/includes/js laden, habt Ihr das getan, müssen wir jetzt die index.htm des Designs das Ihr nutzt öffnen.

Ich nehme jetzt das mar_Ralox von Maretz.eu, es sollte aber bei jeden x Beliebigen Design funktionieren.

Wir öffnen nun also die index.htm und falls vorhanden die index-forum.htm mit einem Editor, zu finden in include/designs/deinDesign, hier müssen wir als erste den Pfad zur schnee.js einbinden.

Zwischen <head>...</head>
<script type="text/javascript" src="include/includes/js/schnee.js"></script>
Nun müssen wir den Bereich finden in dem der Header eingebunden ist, beim mar_Ralox sieht das so aus..
<div class="ralox_header">
<h1><span>{SITENAME}</span></h1>
</div>
Hier geben wir nun ein neues <div> an, und zwar genau unter
<div class="ralox_header">
Das hier eingeben
<div id="winter">
Da wir nun ein neues div angelegt haben, muss dieses auch mit </div> geschlossen werden, unter <h1><span>{SITENAME}</span></h1> dann also noch das Schließende </div> einfügen, dann sollte das Ganze so aussehen.
<div class="ralox_header">
<div id="winter">
<h1><span>{SITENAME}</span></h1>
</div></div>
Wenn wir das alles gemacht haben, können wir die index.htm speichern und wieder auf den FTP laden.

Nun brauchen wir noch ein wenig .css
Öffnet eure style.css vom Design mit einen Editor und fügt ganz unten folgendes ein
#winter {
width: 1170px;
height: 80px;
text-align: center;
margin: auto;
padding-top: 100px;
}
Hier müsst Ihr dann noch die Breite (width) und die Höhe (height) eures Headers anpassen. Experimentiert ein wenig bis es letztendlich passt. Jetzt noch die style.css speichern und wieder hochladen und die Seite mit STRG+F5 aktualisieren, wenn Ihr alles richtig gemacht habt, sollte es jetzt nur im Header schneien.
User avatar
IronMan
Administrator
Moderator
Rang: Anfänger
 
Beiträge: 9
Dabei seit: 2018-06-02 07:38:30