Mini-Anleitungen, Plugins erstellen, Praxisbeispiel
Hi Leute,
mario4370 und ich haben zusammen versucht aus seinem Skript ein Plugin zu machen,
welches später in den Plugin-Einstellungen konfigurierbar ist.
Das Ziel war klar.
Der Weg war aber an vielen Stellen unbekannt.
Nach und nach sind wir aber einer akzeptablen Lösung näher gekommen.
Nun will ich euch das frisch angeeignete Wissen leicht verständlich (hoffe ich) weiter vermitteln.
Damit möchte ich euch den Einstieg erleichtern.
In der Hoffnung daß ihr nach und nach selbst neue Dinge entdeckt, erlernt, austüftelt und dann später an alle zurück gebt.
Ausgangspunkt des Plugins war dieses Thema:
Neues Plugin Bannerwechsler
Dabei ging es darum ein vorhandenes Skript aus der Kopf-/Fußzeile in ein Plugin zu packen und weiter zu entwickeln.
Dieser Code ist die Ausgangsbasis:
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
<center>
<table width="550" height="250" border="0">
<tr><td align=center>
<a id="Url" target="_blank" href="javascript:void(0)">
<img id="Banner" border="0"></a>
<div id="Beschreibung" style="font-style:italic;"></div>
</td></tr></table> <a id="Url" target="_blank" href="javascript:void(0)">
<div id="Beschreibung" style="font-style:italic;"></div>
<script type="text/javascript">
<!--
var image = new Array();
var link = new Array();
var text = new Array();
var a = 0;
//###############################################################################################
// Hier die Bilder mit Link-Adressen und den dazugehörigen Text von den Partnerseiten eintragen.
//###############################################################################################
//############ Hier der erste Banner #########################################################
image[a] = "http://up.picr.de/11910733ek.jpg";
link[a] = "http://www.fpmammut.de/";
text[a] = "Offroadpark im Herzen von Deutschland. Nette Pension Faire Preise. Sehr zu Empfehlen.";
a++;
//############ Hier der zweite Banner ########################################################
image[a] = "http://up.picr.de/13166984nr.jpg";
link[a] = "http://www.hoopepark.de/";
text[a] = "Der Offroad Park im Norden zwischen Bremen und Bremerhaven. Hier wird sowohl Geländewagen als auch Motorrädern die Möglichkeit gegeben Offroad zu Fahren. Termine Entnehmen sie bitte auf der Homepage";
a++;
//########### Hier der Dritte Banner ####################################
//############ Hier der Vierte Banner ########################################################
image[a] = "http://up.picr.de/11836558wf.png";
link[a] = "http://www.4x4-tour.de/";
text[a] = "Geführte Geländewagen Touren durch die Lüneburger Heide.<br> Wollten Sie Ihren Geländewagen / SUV schon immer mal abseits von Strassen bewegen?<br> Wollen Sie mal einen Tag den Alltag vergessen?<br> Dann sind Sie bei uns genau richtig.<br> Es sind keine Vorkenntnisse erforderlich, Sie benötigen lediglich einen SUV oder Geländewagen mit 4x4 Antrieb.;"
//############ Hier der Fünfte Banner ########################################################
//############ Hier der Sechste Banner ########################################################
image[a] = "http://up.picr.de/11911969mm.jpg";
link[a] = "http://www.sd-off-road.de/";
text[a] = "Herzlich willkommen bei Stefan Schoon’s SD-Off-Road.<br> Wir bieten an: Fahrwerke, Reifen, Offroad-Zubehör, Seilwinden und zubehör, Ersatzteile und EURO3-Katalysatoren.";
a++;
//############ Hier der Siebte Banner ########################################################
image[a] = "http://up.picr.de/11836679eo.png";
link[a] = "http://www.ato24.de/";
text[a] = "GROSSE AUSWAHL ZU GUTEN PREISEN:<br>- Motoröl in allen Viskositäten,<br>- Getriebeöl,<br>- Kühlerfrostschutz,<br>- Autopflege.";
a++;
//############ Hier der Achte Banner ########################################################
image[a] = "http://up.picr.de/11836557vy.jpg";
link[a] = "http://www.art-at-skin.de/";
text[a] = "Tattoo Laden im Herzen von Bremervörde.<br>Öffnungszeiten: Mo - Fr: 12 - 20 Uhr Sa: nach Absprache<br>Dienstags geschlossen<br>Neue Straße 102 * 27432 Bremervörde<br>Tel.: 0 47 61 / 87 19 483";
a++;
//############ Hier der Neunte Banner ########################################################
image[a] = "http://up.picr.de/11836680bz.png";
link[a] = "http://www.sk4x4sports.de/cms/front_content.php?idcat=1&lang=1";
text[a] = "Herzlich Willkommen bei sk4x4sports.de<br>Bei uns bekommen Sie alles für die artgerechte Haltung von Geländewagen. Zubehör für Trail, Trophy, Rallye oder Reisen.";
a++;
//############ Hier der Zehnte Banner ########################################################
image[a] = "http://up.picr.de/11836681ru.png";
link[a] = "http://www.timbercrawler.de/";
text[a] = "Ein Nettes Kleines Befreundetes Forum mit Usern aus dem Norden und Westen der Region.";
a++;
//############ Hier der Elfte Banner ########################################################
image[a] = "http://up.picr.de/13410603ib.jpg";
link[a] = "http://www.jeep-cherokee-deutschland.de/";
text[a] = "Das Deutsche Jeep XJ/MJ Forum";
a++
;image[a] = "http://up.picr.de/14024895tq.png";
link[a] = "http://www.quad-atv-wem.de/";
text[a] = "ATV und Quad Fahrer aus dem Wesermünder Raum.Und andere Weserseite. Nette gemeinschaft in der ich auch zu Finden bin.";
a++;
var num = (image.length);
var zaehler = -1;
function Anzeige() {
zaehler++;
if (zaehler < num) {
document.getElementById('Banner').src = image[zaehler];
document.getElementById('Url').href = link[zaehler];
document.getElementById('Beschreibung').innerHTML = text[zaehler];
setTimeout ("Anzeige()", 10000);
}
else {
zaehler = -1;
Anzeige();
}
}
Anzeige()
//-->
</script>
Zunächst zeige ich wie man generell lauffähige Codes einfach in eigene Plugins packt.
Das ist ganz einfach.
1. Neues Plugin anlegen
Admin - Plugins - Plugin-Entwicklung
Neues Plugin anlegen.
ID und Namen vergeben.
Der Name ist der, der später bei den eigenen Plugins erscheint oder auch im Store wenn das Plugin veröffentlicht wird.
Die ID wird intern verwendet.
Sowohl innerhalb des Plugins als auch zur eindeutigen Identifizierung innerhalb aller Xobor-Plugins.
Sie muss darum einmalig sein.
Dies wird bei der Eingabe gepfrüft.
Sollte es die ID schon irgendwo geben,
erscheint eine Fehleranzeige.
Nach der Eingabe der ID und des Namens muss man nur noch speichern.
Danach erscheint folgende Maske.
Dort kann man verschiedene Infos zum Plugin hinterlegen.
Spätesten wenn das Plugin veröffentlicht werden soll,
empfiehlt es sich,
diese Felder mit verständlichen Inhalten zu befüllen.
Nach Änderung/Aktualisierung der Infos kann man dort auch wieder speichern.
Nun hat man ein eigenes Plugin erstellt.
Aber ausführen tut dies natürlich noch nichts
Der Code soll ja noch irgendwo hin.
2. Neues Element erstellen.
Die Foren-Templates bestehen aus verschiedenen Template-Elementen.
Wer schonmal Templates bearbeitet hat, weiß das.
Ich kenne mich da aber gar nicht aus
Egal, unterhalb der Plugin-Infos erscheinen 4 Buttons mit denen man Elemente und Variablen erstellen kann.
Mit dem Button "neues Element erstellen"wollen wir nun ein Template-Element erstellen.
Dort kommt später der Code rein.
Wir wählen dafür "Template Element".
Es erscheint nun eine neue Maske.
Im Klappfeld wählt man aus, welchem Foren Template Element das neue Element zugeordnet werden soll.
Wir wollen die Banner später unten im Forum angezeigt bekommen.
Also wählen wir "Untere Leiste".
Die Optionen "Header" und "Footer" legen fest ob das neue Element
VOR oder Nach dem zugeordneten Forenelement ausgeführt wird.
Ob das in diesem Beispiel irgendwelche Unterschiede macht,
weiß ich nicht.
Ich habe mich für "Footer" entschieden.
Nun müssen wir noch einen Namen für das neue Element angeben.
Ich habe "automatisch vergeben" gewählt.
Bei umfangreicheren Plugins ist es aber sinnvoll den Elementen eindeutige Namen zu geben.
Das erleichtert die Programmierung.
Nun nur noch "Hinzufügen" klicken
und schon ist das Element angelegt.
Es erscheint nun unterhalb der 4 Buttons im Bereich "Actions".
3. Code einfügen
Rechts klicken wir nun auf den Stift um den Editor für das Element zu öffnen.
Es erscheint ein leeres Feld.
Dort hinein kopieren wir nun den eigentlichen Code.
Jetzt nur noch darüber auf "speichern" klicken und fertig.
Das Plugin ist schon aktiv und kann im Forum begutachtet werden.
In meinem Testforum kann man ganz unten schon das Ergebnis sehen.
http://meerwasserverein-taucherforum.xobor.de/
Bis zu diesem Punkt ist der erste Teil der Plugin-Erstellung schon abgeschlossen.
Jedes funktionierende Skript kann auf diese Weise in ein Plugin gepackt werden.
Was hat man davon?
Nun ja, manche Leute setzen beispielsweise alle 3 Monate ein "Jahreszeitenskript" in ihr Forum ein.
Schneefall, Blätter etc.
Diese Skripte befinden sich normalerweise in der Kopf- oder Fußzeile.
Bei jedem Wechsel müssen die Skripte gelöscht und durch aktuelle ersetzt werden.
Bei eigenen Plugins ist das aber einfacher.
Man kann den "Winter" einfach deaktivieren und den "Frühling" aktivieren.
Im nächsten Teil erkläre ich, wie wir das Plugin weiter bearbeitet haben.
Schliesslich soll ja jeder Admin der das Plugin aus dem Store heraus installiert,
die Möglichkeit haben, eigene Grafiken, Links und Texte einzusetzen.
An den Code kommt er aber nicht heran.
Also brauchen wir eine Eingabemaske für die Einstellungen.
@eini
Ich finde es echt super, wie du dich da reinkniest und für den Wechsler für saisonale Pics würde ich das gerne ausprobieren - sobald ich mich traue. Danke dir sehr - das ist echt ermutigend hier.
LG
River
+++Ich will Computercrack werden! XD+++
Business Template (v4)
#3 RE: Mini-Anleitungen, Plugins erstellen, Praxisbeispiel
Im Moment ist es für mich auch noch etwas heavy.
Ich weiß aber - in ein paar Wochen sieht mein Verständnis für diese Sache ganz anders aus .
Und darauf freue ich mich schon.
Ich frage nach ,damit ich was lerne
#5 RE: Mini-Anleitungen, Plugins erstellen, Praxisbeispiel
Nun geht es weiter.
Im Code sind die Banner- und Linkadressen sowie die Texte dazu schon enthalten.
Wir wollen aber das andere ihre eigenen Banner einsetzen können.
Dazu müssen wir Variablen erstellen.
Diese können später in den Einstellungen des Plugins befüllt werden.
4. Variablen erstellen.
Da der Nutzer seine eigenen Einstellungen vornehmen können soll,
klicken wir auf "Neue Config Variable".
(Ist übrigens noch ein Schreibfehler im Plugin-System )
Beim Anlegen von Variablen sollte man sich im klaren sein was man überhaupt erreichen will.
Man sollte wissen welche Variablen wofür zuständig sein sollen,
welchen Inhalt sie haben sollen
und wieviele man davon braucht.
Dies ist wichtig bei der Namensgebung und der Sortierung.
(Ich bin selber eine Programmier-Schlampe, die auf so etwas viel zu wenig Wert legt.
Später ärgere ich mich aber immer wieder daß ich mich im eigenen Kram nicht mehr zurecht finde.
Erweiterungen oder Fehlersuchen sind dann schwerer als sie sein müssten.)
Variablennamen
Wir wollen je Banner eine Grafik, eine Linkadresse und einen Text hinterlegen können.
Darum habe ich mich für 3 Namen entschieden.
Die Variable für die Grafik nenne ich "bildvar".
Die Variable für die Linkadresse nenne ich "linkvar".
Die Variable für den Text nenne ich "textvar".
Da wir im Plugin 10 Banner ermöglichen wollen,
werden alle Variablen noch mit Nummern von 1 bis 10 versehen.
Also z.B. "bildvar1" usw.
Insgesamt brauchen wir also 30 Variablen.
Sortierung der Variablen
In den Einstellungen des Plugins sollen die Eingabefelder sortiert erscheinen.
Also Grafik1, Link1 und Text1 in einem Block.
Das macht man in dem man die Variablen sortiert.
Man kann das gleich beim Anlegen (dort heisst das Feld "Gewichtung") der Variable
oder auch beim späteren Editieren (dort heisst das Feld "Sort").
Dies wir durch eine Nummer festgelegt.
Je höher die Nummer, desto tiefer erscheint das Eingabefeld in den Plugin-Einstellungen.
Für diese Beispiel habe ich mir eine eigene Sortierung ausgedacht.
Man könnte die Variablen einfach von 1 bis 30 sortieren.
Aber erstens ist es nicht einfach sich zu merken welche Nummer nun dran wäre
und zweitens müsste mann einiges neu sortieren wenn man noch weitere Felder (Variablen) zu jedem Banner einfügen möchte.
Darum habe ich die Bildvars in Zehnerschritten von 10 biss 100 sortiert.
Der Link soll jeweils direkt darunter erscheinen.
Die Linkvars habe ich also in Zehnerschritten von 11 biss 101 sortiert.
Die Texte habe ich in Zehnerschritten von 12 bis 102 sortiert.
Typ der Variablen
Variablen können je nach gewünschtem Inhalt von unterschiedlichem Typ sein.
Die "bildvars" bekommen den Typ "fileurl".
Damit kann man in den Einstellungen später einfach die Adresse eingeben oder aber auch ein Bild direkt hochladen.
Eine Vorschau nach dem Hochladen und Speichern gibt es dann auch.
Den linkvars habe ich den Typ "chars" zugeordnet.
Dieser Typ speichert nicht ganz so lange Texte wie der Typ "text".
Aber es sollte reichen (ich weiß nicht auf wieviele Zeichen dieser Typ begrenzt ist).
Außerdem ist das Eingabefeld nicht so groß wie beim Typ "text".
Die "textvars" sind dann vom Typ "text".
Man kann damit längere Texte speichern und das Eingabefeld ist größer.
Nach dieser Theorie gibt es erstmal Bilder der 3 Variablentypen die ich angelegt habe.
In den Plugin-Einstellungen sind nun die gewünschten 30 Eingabefelder zu sehen und können befüllt werden.
Diese Daten sollen nun im Skript berücksichtigt und ausgeführt werden.
5. Variablen in Skript einbinden
Im Skript gibt es zehn Blöcke für zehn Banner die immer gleich aufgebaut sind.
Ausgefüllt sehen sie so aus:
2
3
4
image[a] = "http://up.picr.de/11910733ek.jpg";
link[a] = "http://www.fpmammut.de/";
text[a] = "Offroadpark im Herzen von Deutschland. Nette Pension Faire Preise. Sehr zu Empfehlen.";
a++;
Wir wollen die Adressen und Texte aber mit den Variableninhalten aus den Einstellungen befüllen.
Also muss an deren Stelle jeweils die Variable eingefügt werden.
Leer sehen die Zeilen dann erstmal so aus:
2
3
4
image[a] = '';
link[a] = '';
text[a] = '';
a++;
Wir ersetzen also erstmal alle vorhandenen Blöcke mit diesen Zeilen.
Achtung: Variablen gehören in Hochkommas statt in Anführungszeichen !!!
Es sind also zwei Hochkommas und nicht ein Anführungszeichen zu sehen.
Nun kann man dort die Variablen per Hand rein schreiben.
Das Pluginsystem ist aber meiner Meinung nach sehr gut durchdacht und benutzerfreundlich.
Neben dem Skripteditor werden nun die vorhandenen Variablen aufgelistet.
Der Cursor muss sich an der Stelle befinden an der die Variable eingefügt werden soll.
Geht man nun mit der Maus (nicht klicken) rechts über einen Variablennamen (darum ist eine eindeutige Benennung wichtig),
so ändert sich die Auswahl.
Es werden "JS-Text" und "Tpl-Text" angezeigt.
Ohne Olafs Tip hätte ich das nie gesehen.
Da ich die Skriptsprachen kaum kenne, kenne ich auch den Unterschied zwischen den beiden nicht.
Für unser Beispiel klicken wir aber auf "Tpl-Text".
An der gewünschten Stelle wird nun die Variable in der korrekten Schreibweise eingefügt.
Man muss also nicht alles selber können
Nun füllen wir alle zehn Blöcke mit den entsprechenden Variablen aus und speichern oben das Template-Element.
Fertig.
Das Plugin ist nun lauffähig.
In den Einstellungen können die Felder ausgefüllt und gespeichert werden.
Im Forum (nach Aktualisierung der Seite) kann man dann das Ergebnis bewundern
.6. Diverses
Nun gab es noch zwei Sachen die nichts im Allgemeinen mit Plugin-Erstellung zu tun haben.
Sie beziehen sich nur auf dieses Skript.
Im unteren Teil des Skriptes werden die Infos für das Banner zusammen gestellt, welches dann im Forum dargestellt wird.
Wenn aber einige Variablen in den Einstellungen nicht ausgefüllt werden,
so werden leere Links (Broken-Links) dargestellt.
Dies wollte ich abfangen.
Original:
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
var num = (image.length);
var zaehler = -1;
function Anzeige() {
zaehler++;
if (zaehler < num) {
document.getElementById('Banner').src = image[zaehler];
document.getElementById('Url').href = link[zaehler];
document.getElementById('Beschreibung').innerHTML = text[zaehler];
setTimeout ("Anzeige()", 10000);
}
else {
zaehler = -1;
Anzeige();
}
}
Anzeige()
//-->
</script>
Ganz so wie ich es wollte, habe ich es nicht hinbekommen.
Aber ich habe es hinbekommen, daß es zumindest sauber funktioniert
wenn in den Einstellungen keine Lücken sind.
Texte muss man nicht eingeben.
Die sind optional.
Aber zum Banner gehören meiner Meinung nach die Grafik UND der Link.
Wenn man z.B. alle Angaben für 3 Banner nacheinander ausgefüllt hat,
hätten die leeren Felder der nachfolgenden Banner 4 bis 10 solche Fehler verursacht.
Ich habe eine Prüfzeile eingebaut die checkt ob Grafik UND Link ausgefüllt sind.
Wenn nicht (also z.B. ab Banner #4) fängt das Skript wieder beim ersten Banner an.
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
var num = (image.length);
var zaehler = -1;
function Anzeige() {
zaehler++;
if (!image[zaehler] || !link[zaehler]) zaehler = 0;
if (zaehler < num) {
document.getElementById('Banner').src = image[zaehler];
document.getElementById('Url').href = link[zaehler];
document.getElementById('Beschreibung').innerHTML = text[zaehler];
setTimeout ("Anzeige()", {{plugin_bw_config_anz}});
}
else {
zaehler = -1;
Anzeige();
}
}
Anzeige()
//-->
</script>
Zeile 5 ist die Prüfung und die Anweisung im Falle eines Falles von vorne zu beginnen,
die ich neu eingefügt habe..
Die Schreibweise herauszufinden war für mich verdammt schwer 
.
Wenn aber z.B. Banner 1 bis 3 ausgefüllt werden, Banner 4 leer bleibt und Banner 5 wieder befüllt ist,
dann wird Banner 5 ignoriert.
Nur die ersten zusammen hängenden Banner werden angezeigt.
Ich habe etliche Varianten gestestet.
Aber mit den korrekten Fehlerabfragen und Schleifen im Skript kam ich nicht klar.
Mit VBA hätte ich es hinbekommen.
Wenn mir jemand eine Lösung zeigen kann wie man in diesem Skript leere Einträge einfach überspringen kann,
wäre ich echt dankbar.
Als letztes gefiel mir nicht wie langsam der Wechsel zwischen den Bannern läuft.
Eingestellt war es im Original mit dieser Zeile:
setTimeout ("Anzeige()", 10000);
Die 10000 bedeuten 10000 Millisekunden (glaube ich).
Also 10 Sekunden.
Da jeder Admin seinen eigenen Geschmack hat,
habe ich kurzerhand eine weitere Variable erstellt.
Name "anz".
Sortierung "1" (da machte sich mein Sortiersystem schon bezahlt )
Typ "int" (Zahlen ohne Komma).
Im Skript habe ich die Zeile dann durch folgende ersetzt:
setTimeout ("Anzeige()", {{plugin_bw_config_anz}});
In den Einstellungen habe ich dann 2000 eingegeben.
Und Voilá,
die Banner laufen nun schneller .
Das war es auch schon.
Im nächsten Schritt versuche ich die Schriftgröße, -farbe und Hintergrundfarbe der Beschreibungstexte
per Variablen einstellbar zu machen.
Wenn mir dies gelingt,
berichte ich hier weiter.
Ich hoffe daß diese Anleitung geholfen hat die Angst vor dem Plugin-System zu nehmen.
Viele Dinge muss und will ich auch noch lernen.
Ich hoffe daß ihr eure Erkenntnisse hier auch weiter gebt.
Bis dahin,
viel Spaß beim rumtüfteln
Edit:
Hmm, hakt es grad wieder mit dem Bilderserver?
3 Bilder werden nicht angezeigt.
Hoffentlich erscheinen sie später noch.
Edit2:
Sie sind nun unten in Anhang.
???
Keine Bange Bea,
mir ging es am Anfang auch so.
Aber du hast ja selbst schon gewaltig viel gelernt und umgesetzt.
Versuche einfach mal Schritt für Schritt nachzumachen was ich beschrieben habe.
Wenn du z.B. ein Skript in Kopf- oder Fußzeile hast,
welches etwas hübsches macht.
Kannst du ja versuchen das in ein Plugin zu schmeissen.
Einfach aus der Kopf- bzw. Fußzeile löschen und meinen Anleitungen im ersten Beitrag folgen.
Wenn es nicht gleich gelingt, helfen wir gerne weiter.
Schwer ist es aber wirklich nicht.
Wunderbar,
nun brauche ich nur noch deine Codezeilen vom neuen Projekt Newsletter für die Textfarben.
Dann muss ich nicht ewig im Netz nach verschiedenen Varianten suchen.
Wahrscheinlich wird das hier im Script etwas anders funktionieren.
Aber ich hätte einen Anhaltspunkt.
Für diejenigen die es noch nicht gelesen haben:
Es gibt ein Thema in dem es darum geht wie man bei einer neuen PN einen Sound zu hören kriegt.
Das ist ein ganz einfaches Teil mit dem man ein eigenes Plugin erstellen und testen kann.
Einfach die Schritte aus dem ersten Beitrag ausführen und folgenden Code ins Template-Element einfügen:
2
3
4
5
{{user_newmail==true.start}}
<audio autoplay="autoplay">
<source src="https://files.homepagemodules.de/b135428/f199t55470p407552n2.mp3" />
</audio>
{{user_newmail==true.end}}
Das Template-Element habe ich mit "obere Leiste" und "Footer" angelegt.
Weiß aber nicht ob das wichtig ist ;-)
Hi Leute,
nun geht es weiter.
Dank Olafs Goldtip, war es ganz einfach die Schriftfarbe ,Schriftgrösse und Hintergrundfarbe
in den Plugineinstellungen einstellbar zu machen.
Folgendes bezieht sich auf das Beispiel "Bannerwechsel".
Wenn man aber einen Code hat wo Farben etc. schon vorgegeben sind,
also z.B. "color:#00000;" dann kann man an dieser Stelle diese Eigenschaften einstellbar machen
und um weitere Eigenschaften erweitern.
7. weitere Variablentypen
Im ursprünglichen Code gibt es eine Zeile,
mit der das Aussehen des späteren Textes definiert wird.
<div id="Beschreibung" style="font-style:italic;"></div>
Hier ist also schon die Texteigenschaft "kursiv" vorgegeben.
Ich gehe also davon aus, daß ich diese Zelie um weitere Texteigenschaften erweitern kann.
Um die Textfarbe vorzugeben würde ich erstmal "color:#000000;" einfügen.
das sieht dann so aus:
<div id="Beschreibung" style="font-style:italic;color:#000000;"></div>
Der Text wird damit später kursiv und schwarz angezeigt.
Nun soll die Schriftfarbe später aber einstellbar sein.
Wir brauchen also wieder eine Config-Variable.
Diesmal vom Typ "HTML-Color" - Danke Olaf 
Unter dem Typ kann man auch auf das weiße Kästchen klicken.
Dort öffnet sich dann ein Color-Picker.
Damit kann man eine Farbe als Standard definieren.
Dieser Color-Picker erscheint auch später in den Einstellungen des Plugins,
weil der Typ "HTML-Color" gewählt wurde.
Nun muss im Skript noch das "color:#000000;" durch die neue Variable ersetzt werden.
Das sieht dann so aus:
<div id="Beschreibung" style="font-style:italic;color:{{plugin_bw_config_farbe}};"></div>
Speichern und fertig
Wenn man nun in den Einstellungen andere Farben wählt, wird der Text genauso dargestellt.
Ähnlich geht es auch mit der Hintergrundfarbe des Textes.
Normalerweise würde der Hintergrund transparent sein.
Manchmal ist das aber schlecht lesbar oder passt nicht zum Design des Forums.
Also machen wir auch den Hintergrund änderbar.
Wir fürgen erstmal "background-color'#ff0000;" in die Zeile ein.
Damit wird der Texthintergrund rot.
<div id="Beschreibung" style="font-style:italic;color:{{plugin_bw_config_farbe}};background-color:#ff0000;"></div>
Nun erstellen wir wieder eine Config-Variable vom Typ "HTML-Color".
Dann wird die Zeine verändert.
Sie sieht nun so aus:
<div id="Beschreibung" style="font-style:italic;color:{{plugin_bw_config_farbe}};background-color:{{plugin_bw_config_bgfarbe}};"></div>
Speichern und fertig.
Die Hintergrundfarbe ist nun einstellbar.
Die Schriftgröße möchte ich nun auch einstellbar haben.
Hinzugefügt wird "font-size:20;"
<div id="Beschreibung" style="font-style:italic;color:{{plugin_bw_config_farbe}};background-color:{{plugin_bw_config_bgfarbe}};font-size:20;"></div>
Eine neue Variable vom Typ "int" wird erstellt.
INT-Variablen speichern nur Zahlen ohne Kommas.
Genau die sollen benutzt werden.
Um zu verhindern, daß das Feld für die Schriftgröße leer bleibt,
Geben wir bei der Variable noch einen Wert vor.
Ich habe 20 gewählt.
Die Codezeile sieht nach der Bearbeitung dann so aus:
<div id="Beschreibung" style="font-style:italic;color:{{plugin_bw_config_farbe}};background-color:{{plugin_bw_config_bgfarbe}};font-size:{{plugin_bw_config_schriftgroesse}};"></div>
Speichern und fertig.
Die Schriftgröße ist nun einstellbar.
Eigentlich sind nun alle Dinge einstellbar die man sich wünschen kann.
Aber die Eigenschaft für die Hintergrundfarbe gefiel mir nicht.
Egal wie lang der Text ist, die Zeile wird immer komplett über das ganze Forum durchgefärbt.
Ich möchte aber daß NUR der Text eine Hintergrundfarbe hat.
Im Netz habe ich folgendes gefunden:
"display:inline;"
Wenn man dies auch noch in die Zeile einfügt,
<div id="Beschreibung" style="font-style:italic;color:{{plugin_bw_config_farbe}};display:inline;background-color:{{plugin_bw_config_bgfarbe}};font-size:{{plugin_bw_config_schriftgroesse}};"></div>
dann ist nur noch der Text mit einer Hintergrundfarbe versehen.
Aber alles hat irgendwie einen Haken.
"display:inline;" bewirkt nun,
daß zwischen dem Banner und dem Text nun kein Zeilenumbruch mehr vorhanden ist.
Der Text wird also neben und nicht unter dem Banner gezeigt. :-(
Im Netz habe ich danach gesucht wie man im Javascript Zeilenumbrüche einbauen kann.
Ein einfaches <br> funktioniert an der Stelle wo ich es haben wollte nämlich nicht.
Lange Rede, kurzer Sinn,
ich habe eine ganz simple Lösung gefunden.
Mit diesen Zeilen werden die Texte aus den Einstellungen ausgelesen und in eine Variable gelegt.
2
3
4
5
6
var a = 0;
text[a] = '{{plugin_bw_config_textvar1}}';
a++;
text[a] = '{{plugin_bw_config_textvar2}}';
a++;
Mit der folgenden Zeile wird der Text später ausgegeben.
document.getElementById('Beschreibung').innerHTML = text[zaehler];
Hier wollte ich den Zeilenumbruch einsetzen.
Das ging nicht.
Aber in den vorherigen Zeilen geht es.
Diese lauten nun alle ungefähr so:
text[a] = '<br>{{plugin_bw_config_textvar1}}';
Nicht alles hatte nun mit Plugins ansich zu tun.
Ich wollte es aber vollständig posten.
Damit ist dieses Thema auch abgeschlossen.
Der ganze Code ist nochmal hier zu sehen:
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
<center>
<table width="550" height="250" border="0">
<tr><td align=center>
<a id="Url" target="_blank" href="javascript:void(0)">
<img id="Banner" border="0"></a>
<div id="Beschreibung" style="font-style:italic;color:{{plugin_bw_config_farbe}};font-size:{{plugin_bw_config_schriftgroesse}};display:inline;background-color:{{plugin_bw_config_bgfarbe}};"></div>
</td></tr></table> <a id="Url" target="_blank" href="javascript:void(0)">
<script type="text/javascript">
<!--
var image = new Array();
var link = new Array();
var text = new Array();
var a = 0;
var ttt = "";
//###############################################################################################
// Hier die Bilder mit Link-Adressen und den dazugehörigen Text von den Partnerseiten eintragen.
//###############################################################################################
//############ Hier der erste Banner #########################################################
image[a] = '{{plugin_bw_config_bildvar1}}';
link[a] = '{{plugin_bw_config_linkvar1}}';
text[a] = '<br>{{plugin_bw_config_textvar1}}';
a++;
//############ Hier der zweite Banner ########################################################
image[a] = '{{plugin_bw_config_bildvar2}}';
link[a] = '{{plugin_bw_config_linkvar2}}';
text[a] = '<br>{{plugin_bw_config_textvar2}}';
a++;
//########### Hier der Dritte Banner ####################################
image[a] = '{{plugin_bw_config_bildvar3}}';
link[a] = '{{plugin_bw_config_linkvar3}}';
text[a] = '<br>{{plugin_bw_config_textvar3}}';
a++;
//############ Hier der Vierte Banner ########################################################
image[a] = '{{plugin_bw_config_bildvar4}}';
link[a] = '{{plugin_bw_config_linkvar4}}';
text[a] = '<br>{{plugin_bw_config_textvar4}}';
a++;
//############ Hier der Fünfte Banner ########################################################
image[a] = '{{plugin_bw_config_bildvar5}}';
link[a] = '{{plugin_bw_config_linkvar5}}';
text[a] = '<br>{{plugin_bw_config_textvar5}}';
a++;
//############ Hier der Sechste Banner ########################################################
image[a] = '{{plugin_bw_config_bildvar6}}';
link[a] = '{{plugin_bw_config_linkvar6}}';
text[a] = '<br>{{plugin_bw_config_textvar6}}';
a++;
//############ Hier der Siebte Banner ########################################################
image[a] = '{{plugin_bw_config_bildvar7}}';
link[a] = '{{plugin_bw_config_linkvar7}}';
text[a] = '<br>{{plugin_bw_config_textvar7}}';
a++;
//############ Hier der Achte Banner ########################################################
image[a] = '{{plugin_bw_config_bildvar8}}';
link[a] = '{{plugin_bw_config_linkvar8}}';
text[a] = '<br>{{plugin_bw_config_textvar8}}';
a++;
//############ Hier der Neunte Banner ########################################################
image[a] = '{{plugin_bw_config_bildvar9}}';
link[a] = '{{plugin_bw_config_linkvar9}}';
text[a] = '<br>{{plugin_bw_config_textvar9}}';
a++;
//############ Hier der Zehnte Banner ########################################################
image[a] = '{{plugin_bw_config_bildvar10}}';
link[a] = '{{plugin_bw_config_linkvar10}}';
text[a] = '<br>{{plugin_bw_config_textvar10}}';
a++;
//###############################################################################################
var num = (image.length);
var zaehler = -1;
function Anzeige() {
zaehler++;
if (!image[zaehler] || !link[zaehler]) zaehler = 0;
if (zaehler < num) {
document.getElementById('Banner').src = image[zaehler];
document.getElementById('Url').href = link[zaehler];
document.getElementById('Beschreibung').innerHTML = text[zaehler];
setTimeout ("Anzeige()", {{plugin_bw_config_anz}});
}
else {
zaehler = -1;
Anzeige();
}
}
Anzeige()
//-->
</script>
3 Banner habe ich bei mir im Testforum eingepflegt.
Dort könnt ihr euch das Ergebnis nun anschauen.
Ganz unten auf der Seite.
http://meerwasserverein-taucherforum.xobor.de/
Zusammen mit Mario gibt es schon wieder neue Projekte.
Eine Kleinigkeit in seinem Newsticker muss noch gelöst werden.
Und dann geht es auch schon wieder zum nächsten Projekt. ;-)
Nun gut,
da der Bannerwechsler nu fertig ist,
meinte Mario daß dieser auch veröffentlicht werden kann.
Er möchte daß ich ihn unter meinem Namen veröffentliche.
Das werde ich dann auch tun.
Aber ohne die Aufgabenstellungen von Mario und die Gespräche mit ihm,
hätte ich mich wohl nie an so etwas ran gesetzt und das in kurzer Zeit gelernt.
Vielen Dank Mario
ps: Die Bilder sind schon wieder nicht im Beitrag integriert.
:-(
???
#13 RE: Mini-Anleitungen, Plugins erstellen, Praxisbeispiel
Ich hatte hier (siehe 1.) für meine Merk-Box padding für den Abstand des Textes zum Box-Rand genutzt. Vielleicht kann man das dort irgendwie verwenden.
Viele Grüße .BiL.
Friends of Xobor
Fragen zu Plugins und Pluginideen bitte nicht per PN, sondern öffentlich oder im FoXum stellen.
Hihi,
das Thema ist wohl doch noch nicht abgeschlossen ;-)
Ja, die Geschwindigkeit lässt sich im Plugin einstellen.
Habs absichtlich so schnell eingestellt um es einfach nur demonstrieren zu können.
Da mit dem Abstand ist eine gute Idee.
Das kann ich einstellbar machen.
Ich hatte aber schon testweise eine Leerzeile dazwischen.
Mit schwarzem Hintergrund war dann aber statt der Leerzeile ein dünner, schwarzer, senkrechter Strich zu sehen.
Ob und wie ich das beseitigen könnte, weiß ich nicht.
Kann es also nicht versprechen.
Das Plugin habe ich auch schon zur Veröffentlichung frei gegeben.
Es ist nun in der Warteschleife bei Xobor.
Kurz darauf habe ich noch etwas neues eingefügt.
Die Banner müssen ja nicht nur Werbung sein.
Es können ja z.B. auch Bilder einer Galerie verlinkt werden.
Und somit möchte jemand evtl. daß die Banner nicht unter sondern über dem Forum gezeigt werden.
Also zwischen Kopfbereich und Kategorien.
Das habe ich lösen können.
In meinem Testforum werden die Banner zur Zeit oben gezeigt.
http://meerwasserverein-taucherforum.xobor.de/
Für eine genauere Positionierung oder die Möglichkeit den belegten Platz zu verringern,
fehlen mir aber die Kenntnisse.
Falls das aber generell gewünscht ist, die Position oben oder unten
selber zu bestimmen,
werde ich ein Update nachschieben wenn das Plugin erstmal online ist.
Eine Lösung für den Abstand habe ich gefunden.
Mit "line-height: Zeilenanzahl; geht es.
Habs im Testforum auf 5 stehen.
Ich werde es also einstellbar einbauen.
Ich will auch noch die Schrift ansich einstellbar machen.
Also Kursiv ja oder nein.
Etc.
Ob ich Schriftarten wählbar hinkriege, weiß ich aber nicht.
Ähnliche Themen
Jetzt anmelden!
Jetzt registrieren!