Lexi Help
Die neuesten Themen
» Entfernen von der Popupleiste
von Bigtuber Gestern um 20:14

» [phpBB2] Schriftfarbe nicht vollständig
von Fayé Gestern um 20:14

» [Wichtige Information] Meine Tätigkeit in diesem Support. Von #Frank
von #Frank Gestern um 13:42

» [Update] Neues Theme der mobilen Version V2
von #Frank Gestern um 13:03

» Mobile Ansicht leider Fehlerhaft
von Br0adsw0rd Fr 30 Sep 2016 - 19:31

» [phpBB2] Hintergrund festpinnen
von Fayé Fr 30 Sep 2016 - 16:56

» Mein altes Forum zurückbekommen
von Bigtuber Do 29 Sep 2016 - 22:59

» Impressum
von #Frank Mi 28 Sep 2016 - 23:45

» [phpBB2] Im Beitrag Bild und Text nebeneinander anzeigen
von #Frank Mi 28 Sep 2016 - 23:43

» [phpBB2] Unicode Emojis im Forum
von Mariacher J.E. Mi 28 Sep 2016 - 22:07

» Themen-Icons
von Bigtuber Mi 28 Sep 2016 - 20:46

» [phpBB2] Schriftfarbe in der Expressantwort
von Bigtuber Mi 28 Sep 2016 - 20:09

» Themen fixieren
von inde Mi 28 Sep 2016 - 20:05

» Begriff : "merken"
von Ray Di 27 Sep 2016 - 12:14

» [PunBB] Umzug eines funktionierenden Forums von PunBB auf phpBB?
von inde Di 27 Sep 2016 - 11:07

» Servamp Forum
von Raine Kamiya Mo 26 Sep 2016 - 22:47

Partner
free forum

verschiedene Styles per Wahlschalter im Forum für alle Versionen

Vorheriges Thema anzeigen Nächstes Thema anzeigen Nach unten

verschiedene Styles per Wahlschalter im Forum für alle Versionen

Beitrag von Zuckerpuppe am Mo 3 Mai 2010 - 12:05

Da ja immer wieder nachgefragt wird, wie man verschiedene Styles in seinem Forum anbieten kann, möchte ich euch das mal in einzelnen Schritten erklären  Smile

Dazu solltet ihr euch viel Zeit nehmen und alles in Ruhe durchführen. Das ist keine Sache, die man mal eben zwischendurch machen kann und erfordert eure Aufmerksamkeit. Die Bearbeitung des Scriptes in Teil 2 ist nicht für Anfänger gedacht, daher sollte man schon ein wenig Ahnung von HTML haben, bevor man sich an diese Aufgabe macht.

Der Wahlschalter, den ihr dann am Ende eingebaut habt, sieht dann so aus und ist über der Navigation zu finden.

und so sieht er aus, wenn man ihn anklickt




Schritt 1

einfache Methode mit vorgefertigten Styles von hitskin_logo
Dies ist vor allem sehr einfach für User, die keine eigenen Styles erstellen wollen oder nicht wissen, wie sie mittels CSS einen Style verändern können.

Wichtig! Bitte sucht euch Styles aus, die eurer Forumsversion entsprechen. Also für ein bb3 Forum müsst ihr immer auch Styles für bb3 wählen, für ein bb2 Forum einen bb2 Style, etc. sonst funktioniert die Anzeige später nicht richtig.


  • ihr sucht euch bei Hitskin einen gewünschten Style aus und klickt ihn an. Dann seht ihr in der Adressleiste eures Browsers die ID des Styles



  • Diese ID hängt ihr nun folgendermaßen an die URL eures Forums
    Code:
    http://URL EURES FORUMS/127830-ltr.css
    und notiert euch das gut, da ihr das im nächsten Schritt noch braucht



  • Diesen Vorgang wiederholt ihr nun für alle Styles, die ihr installieren möchtet. Die Anzahl der Styles ist hier völlig egal - ihr könnt nur zwei Styles einsetzen oder mehrere.


Wer nur Styles von hitskin_logo einsetzen möchte und kein persönliches CSS erstellt, kann nun zu Schritt 2 übergehen.


fortgeschrittene Methode mit selbsterstellten Stylesheets


  • Ihr erstellt in einem Editor euer persönliches CSS. Dabei müsst ihr nicht das komplette CSS des Forums erstellen, wenn ihr die Standard-CSS Datei eures Forums nicht ausschaltet. Ihr könnt auch nur die Hintergrundfarbe oder andere einzelne Elemente definieren, ganz wie ihr das wollt.


  • Nachdem ihr euer persönliches CSS erstellt habt, speichert ihr es auf eurem Rechner unter dem Format:
    meinstyle.css
    der Name ist beliebig wählbar, er sollte euch aber einen Hinweis auf den Style geben, damit ihr später die verschiedenen Styles auseinanderhalten könnt (z.B. Osterstyle, Weihnachtsstyle, dunkler Style etc.)


  • Wenn ihr eure gewünschten Styles auf dem Rechner gespeichert habt, müsst ihr sie noch hochladen. Zum Hosten gibt es mehrere Anbieter, ich habe fileden gewählt. Die Anmeldung dort ist kostenlos. Die URL der hochgeladenen css.Dateien solltet ihr euch irgendwo notieren, weil ihr sie später noch braucht.





Schritt 2

Erstellen einer HTML-Seite

Administrationsbereich Arrow Module Arrow HTML Arrow HTML-Seiten-Verwaltung Arrow eine neue HTML-Seite erstellen


  • Hier müsst ihr einen gewünschten Titel eingeben.
    Wichtig ist dabei, dass ihr beide Optionen auf NEIN stehen habt, wie es im Bild zu sehen ist.



  • Jetzt kopiert ihr folgendes Script
    Code:
    var type = getCookie('Vorlage1');
    var sugar = document.getElementById('sugar');
    sugar.innerHTML ='<select onchange="changeskin(this.options[this.selectedIndex].value);window.location.reload();"><option> Wechsel den Style </option><option value="wert1"> Style1 </option><option value="wert2"> Style2 </option><option value="wert3"> Style3 </option></select>';

    if (type == 'wert1')
    {
       document.write('<link rel="stylesheet" type="text/css" href="ADRESSE DES CSS">');
    }
    else if (type == 'wert2')
    {
       document.write('<link rel="stylesheet" type="text/css" href="ADRESSE DES CSS">');
    }
    else if (type == 'wert3')
    {
       document.write('<link rel="stylesheet" type="text/css" href="ADRESSE DES CSS">');
    }

    function changeskin(change) {
       var scheme = change;
       var name = 'Vorlage1';
       var pathname = location.pathname;
       //var myDomain = pathname.substring(0,pathname.lastIndexOf('/')) +'/';
       var ExpDate = new Date ();
       ExpDate.setTime(ExpDate.getTime() + (180 * 24 * 3600 * 1000));
       setCookie(name,scheme,ExpDate,'/');
    }
    function getCookie(name){
       var cname = name + "=";
       var dc = document.cookie;
       if (dc.length > 0) {
          begin = dc.indexOf(cname);
          if (begin != -1) {
             begin += cname.length;
             end = dc.indexOf(";", begin);
             if (end == -1) end = dc.length;
             return unescape(dc.substring(begin, end));
          }
       }
       return null;
    }
    function setCookie(name, value, expires, path, domain, secure) {
       document.cookie = name + "=" + escape(value) +
       ((expires == null) ? "" : "; expires=" + expires.toGMTString()) +
       ((path == null) ? "" : "; path=" + path) +
       ((domain == null) ? "" : "; domain=" + domain) +
       ((secure == null) ? "" : "; secure");
    }
    und fügt es in eure HTML-Seite ein (dieses Script ist für drei unterschiedliche Styles ausgelegt). Achtet darauf, dass über dem Textfenster dieses Zeichen zu sehen ist HTML



  • Jetzt müsst ihr noch einige Teile bearbeiten/bzw ersetzen:
    Bitte achtet auch darauf, dass ihr das Script genauso einsetzt, wie ihr es kopiert habt und nicht versehentlich beim Bearbeiten einen Zeilenumbruch einsetzt. Das ist besonders wichtig für die ersten drei Zeilen des Scriptes!

    Arrow Dort, wo ich WECHSEL DEN STYLE eingegeben habe, könnt ihr euren persönlichen Text eingeben, der im Wahlschalter erscheint.

    Arrow Bei Style1, Style2, etc. könnt ihr natürlich einen anderen Namen eingeben, z.B. Frühlingsstyle, dunkler Style, etc.

    Arrow In diese Zeilen, die ihr im Code findet:  
    Code:
    document.write('<link rel="stylesheet" type="text/css" href="http://ADRESSE_DES_CSS-ltr.css">');
    müsst ihr noch die Adressen der CSS-Dateien einfügen, die ihr euch ja vorher notiert habt.


  • Alle anderen Teile des Scriptes solltet ihr gänzlich unverändert lassen, da sonst die Funktionalität nicht gewährleistet ist!



  • wenn ihr nun zum Beispiel nur zwei Styles haben möchtet, müsst ihr aus dem Script einfach nur folgende Teile entfernen, die für den dritten Style zuständig sind.
    Code:
    <option value="Wert3">Style3 </option>
    und
    Code:
    else if (type == 'Wert3')
    {
     document.write('<link rel="stylesheet" type="text/css" href="http://ADRESSE_DES_ CSS-ltr.css">');
    }

    Genau andersherum verhält es sich, wenn ihr mehr als drei Styles einfügen wollt. Dann müsst ihr diese Zeilen noch hinzufügen und anpassen. Das ist aber nur für geübte User zu empfehlen, da man mit einem Zeichen zuviel oder zu wenig direkt das ganze Script durcheinander bringen kann.


  • Nachdem ihr das Script fertig bearbeitet habt, könnt ihr es abspeichern (Bestätigen) und geht dann wieder auf die HTML-Seiten-Verwaltung und kopiert den Link zu der von euch erstellten HTML-Seite





Schritt 3
die Installation des Wahlschalters in eurem Forum


  • Adminbereich  Arrow Allgemeines Arrow Forum Arrow Einstellungen Arrow Allgemeines
    bei "Beschreibung der Website" fügt ihr folgenden Code ein:
    Code:
    <div id=sugar></div><script type=text/javascript src=http://URL EURER HTML-SEITE></script>



  • Absenden nicht vergessen und fertig ist euer Wahlschalter für verschiedene Styles  cheers




Wichtig:
Wenn ihr euren originalen, persönlichen Style, der vor dem Einbau des Wahlschalters im Forum installiert ist, behalten wollt, müsst ihr das folgendermaßen in das Script einsetzen:
Code:
<option value="Wert1">ORGINALSTYLE </option>

Code:
if (type == 'wert1')
{
   document.write('<link rel="stylesheet" type="text/css" href="http://www.URL DES FORUMS/">');
}


Zuletzt von Zuckerpuppe am Mo 26 März 2012 - 8:48 bearbeitet, insgesamt 3 mal bearbeitet

Zuckerpuppe
Admin a.D.
Admin a.D.

Weiblich Beiträge : 19541
Anmeldedatum : 24.04.08

Nutzerprofil anzeigen

Nach oben Nach unten

Re: verschiedene Styles per Wahlschalter im Forum für alle Versionen

Beitrag von #Frank am Fr 14 Mai 2010 - 12:25

Bitte bei Problemen mit dieser Anleitung das Wort "Wechselschalter" oder "Wahlschalter" in die Überschrift eurer Fragen einsetzen.
So kann alles was diese Funktion betrifft schnell und einfach über die Suche gefunden werden.

Hier die Suche, die zu allen diesen Themen führt:
Klick mich, ich bin ein Link der dir helfen möchte Smile



Keine Unaufgeforderten PN senden! Unsere Regeln Passwort vergessen ? Info's zu den Gründerdaten
Mein IPad schreibt die tollsten Wörter... Nicht wundern... Einfach geniessen...!

Meine Geduld wird geladen:

Fortschritt: 67%
Never change a running system on Friday!

#Frank
Admin a.D.
Admin a.D.

Männlich Beiträge : 34507
Hinweis : Admin außer Dienst
Anmeldedatum : 13.08.08
Firefox

Nutzerprofil anzeigen

Nach oben Nach unten

Vorheriges Thema anzeigen Nächstes Thema anzeigen Nach oben


 
Forenbefugnisse:
Sie können in diesem Forum nicht antworten