Teammitglieder online
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
Beiträge mit den meisten Reaktionen des Monats
» Beitrag von Joost in Entdeckt die neue Option Servimg Premium ( 2 )
» Beitrag von Joost in Missbrauchsmeldung "Sexueller Inhalt" war (wieder) Werbung/Spam/Scam
( 2 )
» Beitrag von Halbmondfarn in Einstellen der Profilfelder funktioniert nicht
( 1 )
» Beitrag von Eto in Einstellen der Profilfelder funktioniert nicht
( 1 )
» Beitrag von Halbmondfarn in Einstellen der Profilfelder funktioniert nicht
( 1 )
[Tuto] [Alle Versionen] Verschiedene Styles per Wahlschalter im Forum
Seite 1 von 1 • Teilen
[Tuto] [Alle Versionen] Verschiedene Styles per Wahlschalter im Forum
Verschiedene Styles per Wahlschalter im Forum [Alle Versionen] |
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 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.
- Script erstellen
- Script bearbeiten (Namensgebung der Styles)
- Script bearbeiten (ID bzw. CSS der Styles erstellen und eintragen)
- Code für den Eintrag in die Templates vorbereiten
- Code in das Template einsetzen
- Ausrichtung des Wahlschalters - *optional
- 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
- HTML und JAVASCRIPT Javascript Codes Verwaltung
- Falls noch nicht geschehen aktiviere die Javascript-Code Verwaltung und Klick auf .
- 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
Anleitung Teil 2
Verändern und anpassen des Scriptes. Durch einen Klick auf das Zahnradsymbol 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.
|
- Variante A:
Nur gültig für Variante A!
Suche Dir bei Hitskin passende Styles für Deine Version des Forums.
Tipp: Nutze dafür die Filterfunktion.
Nach dem Klicken auf eine Version nutze die Vorschau.
Notiere Dir in der aus der Adresszeile Deines Browsers die ID.
Bearbeite nun im Script "Wahlschalter" die 3 Codeabschnitte und ergänze die ID's von Hitskin wie im nachfolgenden Beispiel.- Code:
document.write('<link rel="stylesheet" type="text/css" href="http://URL EURES FORUMS/212193-ltr.css">');
Klick nach der Fertigstellung des Codes auf
- Variante B:
Nur gültig für Variante B!
Für diese Variante kannst Du Dir zunächst auch die eigenen CSS-Dateien erstellen, diese müssen jedoch erst noch auf einem eigenen Webspace geladen werden oder aber bei einem Anbieter der das Hosten der CSS-Dateien für Dich übernimmt.
Für das nachfolgende Beispiel habe ich die CSS-Dateien bei einem Deutschen Anbieter spetools.de hochgeladen. Dieser Anbieter ist derzeit kostenlos und frei von Werbung.
Nach der Registrierung und Anmeldung findest Du das nachfolgende Menü und kannst dort auf den Link CSS-Codes für das Erstellen eines neuen Codes klicken.- Trage eine Bezeichnung für den Style ein.
- Trage Dein CSS ein. Hinweis: Das eintragen eines Error-Codes ist nicht notwendig.
- Wichtig: Setze den Haken bei "Öffentlich" ein.
- Klick auf "CSS Code Cripten"
Über das bereits oben angeführte Menü gelangst Du wieder zurück zu Deinen erstellten CSS-Codes.
Hier findest Du dann auch Möglichkeiten für eine weitere Bearbeitung der CSS-Stylesheets sowei fertig erstellte Codes zum Verlinken.
Kopiere Dir den jeweiligen Link für das Einfügen in Dein Script "Wahlschalter".
Bearbeite nun im Script "Wahlschalter" die 3 Codeabschnitte und ergänze die Links zu Deinen erstellten CSS-Dateien wie im nachfolgenden Beispiel.- Code:
document.write('<link rel="stylesheet" type="text/css" href="http://spetools.de/css/1677.css">');
Klick nach der Fertigstellung des Codes auf- Trage eine Bezeichnung für den Style ein.
Anleitung Teil 4
Das Script wurde fertig gestellt. Nach dem Absenden kopiere Dir die Adresse Deines Scriptes.Setze dann den Link zu Deinem erstellten Script wie im nachfolgenden Beispiel in einem Code ein und kopiere Dir diesen.
|
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:
- Nur gültig für phpBB2!
Eingeloggt mit dem Gründeraccount im:- Templates Allgemeines overall_header
- Klick auf das Zahnrad um das Template zu bearbeiten.
- Benutze die Suche um schneller die entsprechende Zeile 281 zu finden und bedenke, dass das gesuchte Schlagwort "BEGIN switch_ticker_new" mehrfach im Template vorkommt! *Die Zeilenangaben beziehen sich auf ein unbearbeitetes Template!
- Füge nun den vorgefertigten Code ein und Klick auf Absenden.
- Veröffentliche Dein Template durch einen Klick auf den Haken.
Nun sollte Dein Wahlschalter bereits im Forum unterhalb der Navigation zu sehen sein. - Templates Allgemeines overall_header
- phpBB3-Template bearbeiten:
- Nur gültig für phpBB3!
Eingeloggt mit dem Gründeraccount im:- Templates Allgemeines overall_header
- Klick auf das Zahnrad um das Template zu bearbeiten.
- Benutze die Suche um schneller die entsprechende Zeile 284 zu finden und bedenke, dass das gesuchte Schlagwort "BEGIN switch_ticker_new" mehrfach im Template vorkommt! *Die Zeilenangaben beziehen sich auf ein unbearbeitetes Template!
- Füge nun den vorgefertigten Code ein und Klick auf Absenden.
- Veröffentliche Dein Template durch einen Klick auf den Haken.
Nun sollte Dein Wahlschalter bereits im Forum unterhalb der Navigation zu sehen sein. - Templates Allgemeines overall_header
- PunBB-Template bearbeiten:
- Nur gültig für PunBB!
Eingeloggt mit dem Gründeraccount im:- Templates Allgemeines overall_header
- Klick auf das Zahnrad um das Template zu bearbeiten.
- Benutze die Suche um schneller die entsprechende Zeile 261 zu finden und bedenke, dass das gesuchte Schlagwort "BEGIN switch_ticker_new" mehrfach im Template vorkommt! *Die Zeilenangaben beziehen sich auf ein unbearbeitetes Template!
- Füge nun den vorgefertigten Code ein und Klick auf Absenden.
- Veröffentliche Dein Template durch einen Klick auf den Haken.
Nun sollte Dein Wahlschalter bereits im Forum unterhalb der Navigation zu sehen sein. - Templates Allgemeines overall_header
- Invision-Template bearbeiten:
- Nur gültig für Invision!
Eingeloggt mit dem Gründeraccount im:- Templates Allgemeines overall_header
- Klick auf das Zahnrad um das Template zu bearbeiten.
- Benutze die Suche um schneller die entsprechende Zeile 280 zu finden und bedenke, dass das gesuchte Schlagwort "BEGIN switch_ticker_new" mehrfach im Template vorkommt! *Die Zeilenangaben beziehen sich auf ein unbearbeitetes Template!
- Füge nun den vorgefertigten Code ein und Klick auf Absenden.
- Veröffentliche Dein Template durch einen Klick auf den Haken.
Nun sollte Dein Wahlschalter bereits im Forum unterhalb der Navigation zu sehen sein. - Templates Allgemeines overall_header
Anleitung Teil 6
Weiterhin hast Du über einen Eintrag in Dein persönliches CSS die Möglichkeit den Wahlschalter auszurichten.- Bilder & Farben Farben CSS Stylesheet
- Nehme einen entsprechenden Eintrag vor und klicke danach auf
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
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! |
inde- Admin a.D.
- Beiträge : 5658
Anmeldedatum : 20.10.11
Ähnliche Themen
» [Tuto] [alle Versionen] Rahmen - Hintergrund um Avatare in Beiträgen
» Frage zu verschiedene Styles per Wahlschalter im Forum für alle Versionen
» [Tuto] [mobile Version] [Alle Versionen] Betriebssystem OS? - Screenshot?
» [Tuto][alle Versionen] Tooltip Benutzernamen-Tag / @Tag Aussehen anpassen
» [Tuto] [alle Versionen] Funktion "diesen Code markieren"
» Frage zu verschiedene Styles per Wahlschalter im Forum für alle Versionen
» [Tuto] [mobile Version] [Alle Versionen] Betriebssystem OS? - Screenshot?
» [Tuto][alle Versionen] Tooltip Benutzernamen-Tag / @Tag Aussehen anpassen
» [Tuto] [alle Versionen] Funktion "diesen Code markieren"
Seite 1 von 1
Befugnisse in diesem Forum
Sie können in diesem Forum nicht antworten