Teammitglieder online
Support-Box
Neue Beiträge seit dem letzten Besuch.
Textbausteine des MODERATIONSTOOL
AB > PFAD > GENERATOR
FORUM > PFAD > GENERATOR
Unterstützung Lösungs-Probleme
Auffällige
User
Der Runde
Tisch
HÄUFIG GESTELLTE FRAGEN
Regeln und nützliche Hinweise
Neueste Themen
» kann man noch Blogs hier erstellen?
von Joost Mi 27 März 2024 - 18:40

» Einstellen der Profilfelder funktioniert nicht
von Skouliki Di 26 März 2024 - 12:54

» Gründer-E-Mail-Adresse ändern
von Skouliki Mo 25 März 2024 - 13:48

» PN's werden nicht mehr rot eingefärbt
von Skouliki Fr 22 März 2024 - 7:44

» Forum löschen, Probleme mit Gründeraccount
von Skouliki Do 21 März 2024 - 9:04

»  Missbrauchsmeldung "Sexueller Inhalt" war (wieder) Werbung/Spam/Scam
von Skouliki Do 21 März 2024 - 9:03

» [phpBB3] Suchfunktion ohne Funktion
von Skouliki Mi 20 März 2024 - 8:41

» Neuer User kann sich anmelden.
von Skouliki Mi 20 März 2024 - 8:38

» Zugangsdaten vergessen/verloren
von Joost Sa 16 März 2024 - 21:07

» Schwierigkeiten mit BBCode
von Skouliki Fr 15 März 2024 - 11:51

» Entdeckt die neue Option Servimg Premium
von Joost Mi 6 März 2024 - 19:50

» Neues YAMAHA XT660-Forum
von gnadenlos Fr 1 März 2024 - 7:33

» Forum nur noch für Eingeloggte sichtbar?
von Skouliki Di 27 Feb 2024 - 7:53

» [phpBB3] Eine Frage zum Forum selbst.
von Skouliki Di 27 Feb 2024 - 7:52

» Beiträge verschwinden
von Skouliki Do 22 Feb 2024 - 7:47

» [Tutorial - alle Versionen] (De)aktiviert die Anzeige von Signaturen aus Eurem Profil
von Eto Do 15 Feb 2024 - 22:17

» Datenback-Dump?
von Skouliki Mo 12 Feb 2024 - 22:02

» Einloggen nicht mehr möglich [erbitte schnelle Rückmeldung!]
von Skouliki Mo 12 Feb 2024 - 8:15

[Tuto] [Alle Versionen] Verschiedene Styles per Wahlschalter im Forum

Vorheriges Thema anzeigen Nächstes Thema anzeigen Nach unten

Wahlschalter - [Tuto] [Alle Versionen] Verschiedene Styles per Wahlschalter im Forum Empty [Tuto] [Alle Versionen] Verschiedene Styles per Wahlschalter im Forum

Beitrag von inde So 11 Dez 2016 - 23:00

Wahlschalter - [Tuto] [Alle Versionen] Verschiedene Styles per Wahlschalter im Forum Tutori12
Verschiedene Styles per Wahlschalter im Forum
[Alle Versionen]
Wahlschalter - [Tuto] [Alle Versionen] Verschiedene Styles per Wahlschalter im Forum Tutori10
Hinweis: Dieses Tutorial basiert auf dem Script einer älteren Anleitung von ZP. Da es in der letzten Zeit gehäuft zu Problemen bei der Anzeige des Wahlschalters in den verschiedenen Browsern wegen des Lesens von CSS-Dateien sowie Scripten gekommen ist, möchte ich euch hier eine neue ....jedoch auch etwas kompliziertere Lösung anbieten. Die Anleitung wurde lediglich umgebaut und deshalb neu eingestellt.


Wahlschalter - [Tuto] [Alle Versionen] Verschiedene Styles per Wahlschalter im Forum Wahlsc10Wahlschalter - [Tuto] [Alle Versionen] Verschiedene Styles per Wahlschalter im Forum Wuhl10

Du möchtest verschiedene Styles Deinen Usern im Forum per Wahlschalter anbieten?

So wie auf der Grafik abgebildet könnte auch Dein Forum mit eingebautem Wahlschalter funktionieren
.


Die folgende Anleitung ist nicht geeignet für User welche keine Erfahrungen haben mit dem Umgang in HTML, CSS, Scripten sowie Templates.

Auch haben wir im Support nicht die Zeit für Anfragen wegen Fehlfunktionen o.ä. bei Deiner Umsetzung zu beantworten, dies ist nicht die Aufgabe des Supports. Mehr dazu hier!

Nehme Dir deshalb die nötige Zeit für eine funktionierende Umsetzung. Lese und befolge auch ganz genau die einzelnen Arbeitsschritte in der nachfolgenden Anleitung. Sollte es beim ersten Mal nicht funktionieren, dann arbeite die Schritte entsprechend der Anleitung nochmals ab.
Du hast keinerlei Erfahrungen mit dem Umgang solcher Sachen bzw. bekommst es nicht umgesetzt, dann solltest Du vielleicht einmal auf etwas verzichten, schließlich kann man nicht alles haben.


Grundsätzlich stehen Dir 2 Varianten für eine Umsetzung zur Verfügung.

  • Variante A: Die Umsetzung des Wechselschalters wird ausschließlich mit vorgefertigten Styles von hitskin_logo umgesetzt.
  • Variante B: Für die Umsetzung werden eigene Styles mit Hilfe von CSS-Dateien erstellt, welche extern gehostet werden müssen.

Entscheide Dich deshalb zunächst für eine der beiden Varianten, bevor Du mit der Ausarbeitung fortfährst.

Tipp:
Für die Ausarbeitung ist es zwingend notwendig einige Codes in einer Textdatei zwischen zu speichern. Dafür sollte jedoch ein Editor und kein Schreibprogramm o.ä. verwendet werden, da dadurch die Codes verfälscht werden.
Den Editor findest Du in Windows unter -> Start -> Alle Programme -> (Ordner) Zubehör -> Editor

Die Anleitung besteht im wesentlichen aus 7 Teilen, wobei die Anleitungen 6 und 7 nur optional als Ergänzung zu verstehen sind.

  1. Script erstellen
  2. Script bearbeiten (Namensgebung der Styles)
  3. Script bearbeiten (ID bzw. CSS der Styles erstellen und eintragen)
  4. Code für den Eintrag in die Templates vorbereiten
  5. Code in das Template einsetzen
  6. Ausrichtung des Wahlschalters - *optional
  7. Ausbau des Wahlschalters mit mehr Optionen/Styles - *optional



Anleitung Teil 1

Kopiere Dir den nachfolgenden Code. Der Code ist für einen Wahlschalter für 3 Optionen/Styles vorgefertigt.
Code:
var type = getCookie('Vorlage1');
        var wahl = document.getElementById('wahl');
        wahl.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");
        }


Öffne den

  • Admin-Bereich Schritt weiter Module Schritt weiter Templates/HTML-JAVA HTML und JAVASCRIPT Schritt weiterJavascript Codes Verwaltung Schritt weiter
  • Falls noch nicht geschehen aktiviere die Javascript-Code Verwaltung und Klick auf  Absenden .
  • Klick auf "Ein neues Javascript erstellen"
  • Gebe dem Script den Namen "Wahlschalter"
  • Markiere die Platzierung "Auf allen Seiten"
  • Füge nun den oben angeführten Code dort ein und Klick auf Bestätigen



Anleitung Teil 2

Verändern und anpassen des Scriptes. Durch einen Klick auf das Zahnradsymbol  zahnrad könnt ihr das Script jeder Zeit bearbeiten.
Dort wo innerhalb des Codes "WECHSEL DEN STYLE" steht, könnt ihr dem Wahlschalter einen eigenen Namen geben.
Bei Style1, Style2, etc. könnt ihr einen Namen für den entsprechenden Style vergeben.


Anleitung Teil 3

Im nachfolgenden Teil des Codes werden die ID's der Hitskin-Styles oder aber der extern geladenen CSS-Stylesheet eingefügt.
Code:
document.write('<link rel="stylesheet" type="text/css" href="http://ADRESSE_DES_CSS-ltr.css">');
Variante A:
Variante B:


Anleitung Teil 4

Das Script wurde fertig gestellt. Nach dem Absenden kopiere Dir die Adresse Deines Scriptes.
Wahlschalter - [Tuto] [Alle Versionen] Verschiedene Styles per Wahlschalter im Forum Java10
Setze dann den Link zu Deinem erstellten Script wie im nachfolgenden Beispiel in einem Code ein und kopiere Dir diesen.
Code:
<div id=wahl></div><script type=text/javascript src=http://ADRESSE_DES_ SCRIPTS.js></script>


Anleitung Teil 5

Nun muss das Script in das Templates overall_header eingebunden werden.



Für die verschieden Forenversionen gibt es unterschiedliche Stellen bei denen der Code eingefügt werden muss. Achte bitte darauf die richtige Version für Dein Forum auszuwählen.
phpBB2-Template bearbeiten:
phpBB3-Template bearbeiten:
PunBB-Template bearbeiten:
Invision-Template bearbeiten:


Anleitung Teil 6

Weiterhin hast Du über einen Eintrag in Dein persönliches CSS die Möglichkeit den Wahlschalter auszurichten.

  1. Admin-Bereich Schritt weiter Anzeige Schritt weiter Bilder & Farben Schritt weiter Farben Schritt weiter CSS Stylesheet
  2. Nehme einen entsprechenden Eintrag vor und klicke danach auf Annehmen

Codebeispiel:
Code:
/*Ausrichtung des Wahlschalters*/
#wahl {
    display: block;
    margin-bottom: 8px;
    margin-top: 8px;
    text-align: center;/*left, center, right möglich*/
}


Anleitung Teil 7

Wenn Du den originalen Style Deines Forums der vor dem Einbau des Wahlschalters im Forum installiert war behalten möchtest, dann genügt es im ersten Eintrag die URL-Adresse Deines Forums wie in den beiden nachfolgenden Codes angezeigt einzusetzen.
Code:
<option value="Wert1">ORGINALSTYLE </option>
Code:
document.write('<link rel="stylesheet" type="text/css" href="http://www.URL DES FORUMS/">');


Weiterhin besteht die Möglichkeit durch die Bearbeitung des Scripts Optionen zu entfernen oder hinzuzufügen, indem einige Bestandteile wie im nachfolgenden Beispiel entfernt oder aber hinzufügt. Achte dabei auf die jeweiligen Nummerierungen.
Code:
<option value="Wert4">Style4 </option>
Code:
else if (type == 'Wert4')
        {
         document.write('<link rel="stylesheet" type="text/css" href="http://ADRESSE_DES_ CSS-ltr.css">');
        }



Have Fun Wink
       
Dieses Tutorial stammt von inde.
Das Tutorial unterliegt dem Copyright von hilfe.forumieren.com.
Eine Veröffentlichung außerhalb von hilfe.forumieren.com ist nicht gestattet!

Wahlschalter - [Tuto] [Alle Versionen] Verschiedene Styles per Wahlschalter im Forum Tutori13
avatar
inde
Admin a.D.
Admin a.D.

Männlich Beiträge : 5658
Anmeldedatum : 20.10.11
keine
Mozilla Firefox phpBB3

Nach oben Nach unten

Vorheriges Thema anzeigen Nächstes Thema anzeigen Nach oben

- Ähnliche Themen

 
Befugnisse in diesem Forum
Sie können in diesem Forum nicht antworten