#1 2 Funktionen von Movert 18.05.2012 18:35

Hallo Florian
Ich hoffe du kannst mir bei diesen 2 Problemen Helfen,

1) Jedes unterforum soll einen eigenen Style bekommen können, undzwar Header, Footer und der ganze Inhalt. Ausserdem sollte auchbeim schreiben eines neuen beitrags der Style übernommen werden, bei mir klappt das allerdings nicht gut, da header und footer sich nicht färben lassen, beim schreiben von einem beitrag wieder der standart style da ist, usw: http://www.hpm-support.de/t531640f117691...enes-Style.html

2) Colorpicker:
In diesem Fall möchte ich den Colorpicker so einbauen, dass man auf den Button drückt, sich dann ein kleines Fenster im Vordergrund der Website öffnet, und man in dem Fenster die Farbe wählen kann, und einfügen kann. Das fenster soll man auch wieder schließen können. Weißt du vielleicht wie sowas möglich ist?

#2 RE: 2 Funktionen von florian-zier 20.05.2012 23:38

avatar

Hallo Movert,
eigentlich kann ich zu deinem Style-Problem auch nicht wirklich mehr sagen, als bereits gesagt worden ist.
Es geht eben nicht anders, als z.B. die Foren-Nummer auszulesen und dann ggf. den Style einzubinden.
Eigentlich schon mit Direktzugriff auf die Seite ein schwieriges Unterfangen, aber ohne PHP etc. umso mehr.

Aber probier es doch mal so, wie du selbst in deinem letzten Beitrag vorgeschlagen hast.
Füge in die entsprechenden Template-Elemente ein festes Link-Tag ein, welches immer den gleichen Pfad als Quelle angibt.
Dabei trägst du nur noch als Kennzahl beim Style eine Foren-Variable ein.
Dann wird bis auf diese eine Zahl im Prinzip immer der gleiche Pfad verwendet.
Achte darauf, dass du dieses Link-Tag erst nach den anderen im Head definierst, denn ansonsten würden diese ja deinen eigenen Style wieder überschreiben.
Es könnte auch sein, dass du hin und wieder "!important" in deiner CSS benutzen musst, da die anderen Styles sonst trotzdem evtl. vorrang hätten.
Das musst du eben einfach nur ausprobieren.


Für dein zweites Problem habe ich mich mal an einem zentrierten Fenster versucht, dem du Breite und Höhe vorgeben kannst.
Falls du dich für die Zentrierung interessierst, kannst du das in dem Artikel CSS: DIV zentrieren nochmals genauer nachlesen.

Das DIV mit der ID "windowContainer" ist sozusagen die Rohform für dein angezeigtes Fenster.
Es enthält zwei weitere DIVs, wobei das erste sozusagen die Titelleiste und das zweite (leere) der Inhaltsbereich ist.
Die Titelleiste enthält zudem einen kleinen Schließen-Button, welcher hier einfach aus einem "X" besteht.
Oben in der Testseite siehst du den Style zu dem Fenster.
Anstatt allen Elementen eine extra ID zu vergeben, habe ich dies hier mal mittels geschickt gewählten CSS-Selektoren versucht.
So werden die Fenster-Elemente korrekt angeordnet, die Hintergründe entsprechend vergeben, der Schließen-Button beim Hovern mit einer Hand als klickbar symbolisiert usw. ...

Den Inhalt eines Fensters kannst du in einem beliebigen ausgeblendeten Element definieren.
Dieses Element wird selbst später nicht angezeigt, sondern nur dessen Inhalt in das Fenster geladen.
In so ein Element würdest du dann z.B. den Color-Picker einfügen.
Wichtig ist nur, dass du dem Element eine ID vergibst, wie diese heißen soll, ist aber ansonsten egal.

1
2
3
 
<div id="windowContent1" style="display:none;">
Fenster-Inhalt hier definieren...
</div>
 



In der Testseite findest du mehrere Zeilen, die wie folgt lauten:

1
 
var testWindow1 = new websiteWindow('windowContent1', 500, 350);
 


Für zu öffnende Fenster wird sozusagen eine Variable angelegt, die ein neu erzeugtes Fenster-Objekt enthält.
Zum Erzeugen musst du hinten die ID eines Elementes angeben, in welchem du den Inhalt für das Fenster bereitstellst und sowohl Breite als auch Höhe des Fensters.
Rein theoretisch kannst du Breite und Höhe auch weglassen, dann werden die Standardmaße von 100px genommen, aber das wäre streng genommen nicht ganz korrekt.
Der Browser kann zwar damit umgehen, aber so ist das Skript nicht konzipiert.

Öffnen kannst du das Fenster dann, wenn du die Open-Funktion auf dem erzeugten Objekt aufrufst, also "VARIABLE.open();".
Hier ein Beispiel, bei dem ein Link das Fenster anzeigen kann:

1
 
<a href="javascript:void(0);" onclick="testWindow1.open();">Fenster1 öffnen</a>
 


Beim Aufruf per Link gibt es keine Probleme, aber du musst darauf achten, dass die Open-Funktion nicht vor dem Laden der kompletten Seite ausgeführt wird.
Eine sofortige Ausführung ergäbe einen Fehler und würde kein Fenster (korrekt) anzeigen, also frühestens nach dem Onload-Event.
Bei Links ist das insofern kein Problem, weil sie ja erst nach dem Laden der Seite angeklickt werden können (außer die Seite zeigt den Link schon an, bevor alles geladen wurde... und der User klickt darauf).

Es gibt auch eine etwas kürzere Variante, bei der du die Fenster nicht in einer Variable zwischenspeichern musst:

1
 
<a href="javascript:void(0);" onclick="(new websiteWindow('windowContent3', 300, 175)).open();">Fenster3 öffnen</a>
 


Das anlegen einer Variablen ist hier überflüssig, da hier das Fenster direkt im Link erzeugt wird.
Aber auch hier müssen ID des Inhalt-Containers und Breite/Höhe angegeben werden.


Für das Forum würde ich dir empfehlen, Skript und Style in den Head-Tags zu definieren und die Fenster-Inhalte in der Symbol-Bar vorzugeben.
Du kannst ja in der Symbol-Bar nicht nur Smileys sondern auch HTML-Code definieren, da die Inhalts-Container ausgeblendet sind, nehmen sie auch keinen Platz weg.
Es reicht eigentlich vollkommen, nur einen solchen HTML-Code anzulegen und dort gleich alle DIVs mit Inhalten einzufügen.
Solche Bereiche werden wohl einfach 1:1 in die Symbol-Bar übernommen, als hätte man den HTML-Code direkt reingeschrieben.
Mehrere HTML-Code-Bereiche würden also einfach aneinandergehängt und ergäben im Endeffekt das gleiche Ergebnis.

Zudem benutzt du dann auch die Variante, bei der du keine Variablen vorher anlegst sondern die Fenster gleich im Link generierst.
Wenn du nun das Symbol-Bar-Element, welches die Fenster-Inhalte enthält, noch vor die öffnenden Links positionierst, dann wirst du auch keine Probleme mehr beim Öffnen eines Fensters bekommen.
Skript und Style wurden ja bereits im Head definiert und die Inhalts-Bereiche stehen dann in der Symbol-Bar schon vor den aufzurufenden Links und sind somit also auch bereits bekannt.
Der Inhalts-Bereich wird beim Öffnen eines Fensters also auf jeden Fall gefunden.

Ob du das dann letztendlich per Link, OnClick-Handler auf einem Bild oder sonst irgendwie aufrufst, ist ja im Grunde dann auch egal.


Viel Spaß dann noch beim Fenster-Schauen...

#3 RE: 2 Funktionen von Movert 22.05.2012 13:28

ok, danke. zum Stylesystem brauche ich aber nochmal Hilfe, Ingmar hatte ja was von 2 variablen gesagt, etwas mit postcache, und der foren id, also muss ich das stylesheet so einbauen, dass die forenid aus dem forum oider postcache verwendet wird, ich weiß aber nicht, wie da nun der link zum stylesheet mit dem vaariablen aussehen muss.

#4 RE: 2 Funktionen von florian-zier 22.05.2012 20:49

avatar

Also soviel ich weiß, gibt es ja eigentlich keine Foren-Variablen in dem Sinne mehr.
Das wurde doch alles durch globale Variablen ersetzt.

Aber egal wie es nun aussieht, hast du ja eigentlich schon selbst eine mögliche Lösung für das Problem in deinem letzten Beitrag vorgeschlagen.
Du legst auf deinem Webspace einen Ordner an, in dem dann alle Stylesheets für z.B. Unterforen bereitgestellt sind.
Nennen wir den Pfad mal http: //pfadzumwebspace.de/forum/styles/...
Dabei ist das Leerzeichen nach http nur zur Vermeidung, dass hier im Forum der Link umgesetzt wird und auf der Ebene von ... befinden sich sozusagen die Style-Dateien.

Im Template-Element der Unterforen setzt du nun ein Link-Element, welches einen Style-Sheet einbinden soll.
Hättest du nun einen Style namens forum_14.css, dann würde das Link-Tag ungefähr so aussehen:

1
 
<link rel="stylesheet" type="text/css" href="http://pfadzumwebspace.de/forum/styles/forum_14.css">
 


Aber jetzt hättest du ja dummerweise in jedem Unterforum das Stylesheet forum_14.css reingeladen.
Damit dementsprechend automatisch andere Styles eingebunden werden, musst du die 14 nun durch eine Foren-Variable ersetzen, welche z.B. die Nummer des Forums enthält.
Dieser Beitrag steht im Moment beispielsweise im Thread 464 in Forum 47 (gerade während dem Tippen in Adressleiste zu sehen).
Wie die entsprechende Variable heißt, musst du selbst rausbekommen, aber wurden dazu nicht sogar schon Variablen im Support-Forum angegeben...
Wenn du also die entsprechende Foren-Variable kennst (jetzt einfach mal {{forum_nr}} genannt), dann sieht die abgeänderte Einbindung des Style-Sheets in etwa so aus:

1
 
<link rel="stylesheet" type="text/css" href="http://pfadzumwebspace.de/forum/styles/forum_{{forum_nr}}.css">
 



Um jetzt für alle Unter-Foren einen Style bereitzustellen, musst du nur noch auf deinem Webspace im Ordner http: //pfadzumwebspace.de/forum/styles/ für jedes Unterforum eine neue CSS-Datei anlegen.
Der Name der Datei richtet sich dann nach der Foren-Nummer, welche zum zugehörigen Unterforum gehört.

Wenn du also Unterforen mit den Foren-Nummern 14, 29, 33, 47, 51 hast, dann legst du folgende CSS-Dateien an:

» forum_14.css
» forum_29.css
» forum_33.css
» forum_47.css
» forum_51.css

Da nun in jedem Unterforum die Datei mit der entsprechenden Nummer reingeladen wird, hat nun jedes Unterforum einen eigenen Style.
Denke aber daran, dass du evtl. mit !important arbeiten musst, falls sonst die Priorität der anderen Styles vorrang hätte.


Ich hoffe, der Weg kam damit nochmals etwas verständlicher rüber.
Im Prinzip müsste es ja das gewesen sein, was du selbst bereits im Sinne hattest.
Wie dein letztendlicher Pfad auf dem Webspace und die Namen der Style-Dateien lauten sollen, bleibt nun einfach dir überlassen.
Den Namen der Foren-Variablen müsstest du eben nochmals nachschlagen oder -fragen.
Mit den Details aller Templates bin ich einfach nicht so vertraut, da ich mich eher an relativ unabhängige Skripte halte.
Deshalb kann ich jetzt auch nicht alle Foren-Variablen oder Berechnungsmöglichkeiten innerhalb der Templates eingehen.
Falls ich etwas ins Template einbaue, muss ich mich auch immer zuerst einmal durchwühlen, welche Teile und Variablen ich überhaupt brauche.
Aber du wirst das schon schaffen.
Falls die Foren-ID auch beim Template für's Beitrag-Schreiben vorhanden ist, musst du ja auch dort nur noch kurz das Link-Tag hinterlegen und greifst damit auf die gleiche Style-Datei zu.
Dann musst du eben die Styles von Unter-Foren und Beitrag-Schreiben in einer Datei definieren.
Oder du verwendest dann einen anderen Pfad im Link-Tag, um die beiden Template-Elemente getrennt zu stylen.

Anstatt der Foren-ID kannst du natürlich auch eine andere kennzeichnende Variable verwenden, falls vorhanden.
Solltest du bei der Foren-Nummer bleiben, könnte es auch sein, dass die Variable zwar in mehreren Template-Elementen vorhanden, aber unterschiedlich darin benannt ist.
Passe also ggf. die Variable in dem Pfad deines Link-Tags an.

Viel Glück!

#5 RE: 2 Funktionen von Movert 25.05.2012 14:14

1
2
 
<link rel="stylesheet" type="text/css"
href="http://pfadzumwebspace.de/forum/styles/forum_{{cur_page_name==true.start}}{{cur_page_name}}{{cur_page_name==true.end}}{{postcache_forum==true.start}}{{postcache_forum}}{{postcache_forum==true.end}}.css">
 



wäre dass dann so korrekt? könnte das mal bitte jemand prüfen, da ich nicht weiß, ob die variablen so richtig gesetzt sind.

#6 RE: 2 Funktionen von florian-zier 26.05.2012 19:30

avatar

Hallo Movert,
also die Stelle an sich ist so richtig.
Allerdings habe ich keine Ahnung, von wo du diese Variablen her hast, möglicherweise können sie ja in allen Templates verwendet werden.
Ich habe mal nach diesen Variablen im Template-Element "Forum Ansicht" gesucht, aber dort nicht gefunden.
Aber beim Durchstöbern stolpert man dann irgendwann einmal über die naheliegende Variable {{forum_id}}!

Der Pfad zu den CSS-Dateien würde dann wahrscheinlich so aussehen:

1
 
<link rel="stylesheet" type="text/css" href="http://pfadzumwebspace.de/forum/styles/forum_{{forum_id}}.css">
 



Falls Foren-Variablen nicht irgendwo bekanntgegeben wurden, dann musst du eben leider manchmal manuell in die Template-Elemente reinschauen.
Mithilfe der Browser-Suchfunktion kann man zuerst einmal nach Teilen von naheliegenden Variablen-Namen suchen.
Variablen sind oftmals nach dem gleichen Schema benannt, sodass Vermutungen manchmal bereits zum Erfolg führen.
Ansonsten bleibt einem eben nur übrig, manuell über den Quellcode zu lesen.
Dabei hilft es, sich an den HTML-Elementen an der Seite zu orientieren, die man kennt.
Ich habe diese Variable auch erst nach manuellem Begutachten gefunden.


Ich wünsche dir, dass nun dein Problem gelöst werden kann.
Du brauchst ja wohl nur noch die CSS-Dateien auf deinem Server richtig anzulegen.

Viel Glück!

#7 RE: 2 Funktionen von Movert 28.05.2012 17:53

danke, so gehen schonmal die styles, nur die styles beim schreiben von beiträgen (postcache steht im HPM von Ingmar) gehen nicht.

#8 RE: 2 Funktionen von florian-zier 29.05.2012 15:38

avatar

Also eigentlich müsste das so ziemlich gleich vonstatten gehen.
Gut, dass zumindest die Unterforen an sich funktionieren.

Wie schon einmal gesagt, kann es möglich sein, dass die Variable in anderen Template-Elementen anders heißt.
Probiere notfalls nochmals {{forum_id}} zu setzen, da es evtl. verfügbar ist, aber bis jetzt noch nicht im Template-Element Neuen Beitrag schreiben verwendet wurde.
Ansonsten scheint die Variable {{postcache_forum}} wirklich der Variablen-Name in diesem Element zu sein.
Sie wird dort in einem Skript benutzt, ich habe einfach mal ein Alert dieser Variable ausgeführt und tatsächlich die ID des Forums auf der Antworten-Seite erhalten.

Es ändert sich also nur ein klein wenig der Link am Ende:

1
 
<link rel="stylesheet" type="text/css" href="http://pfadzumwebspace.de/forum/styles/forum_{{postcache_forum}}.css">
 


Wie du siehst, habe ich hier nur den anderen Variablen-Namen eingesetzt.

Achte darauf, dass du im richtigen Template-Element bist und gebe die Variable ggf. auch mal per Alert im Skript aus.
So siehst du dann nach einem Klick auf Antworten, was die Variable genau enthält.
Sie sollte nicht leer sein und wie bei mir die ID des Forums enthalten.

#9 RE: 2 Funktionen von Movert 07.06.2012 18:38

danke, nun funktioniert es!

#10 RE: 2 Funktionen von florian-zier 07.06.2012 21:23

avatar

Super, freut mich, dass es geklappt hat!
Dann kannst du ja nun richtig eine optische Trennung deiner einzelnen Bereiche vornehmen.

#11 RE: 2 Funktionen von Movert 09.06.2012 23:07

Hab ich schon:
Hauptforum: http://welt-der-rollenspiele.xobor.de/
Herr der Ringe: http://welt-der-rollenspiele.xobor.de/f8...-der-Ringe.html
Mass Effect: http://welt-der-rollenspiele.xobor.de/f56-Mass-Effect.html
Risen: http://welt-der-rollenspiele.xobor.de/f8-Risen.html
Gothic: http://welt-der-rollenspiele.xobor.de/f7-Gothic.html
Divinity: http://welt-der-rollenspiele.xobor.de/f6...-Commander.html

Einige andere Bereiche bekommen bald noch einen Style, die anderen bleiben einfach im Standart, nur unsere wichtigen Foren, und die Foren mit eigenen Netzwerkseiten haben somit ein Forendesign.

#12 RE: 2 Funktionen von florian-zier 10.06.2012 00:32

avatar

Hübsch, gut umgesetzt!

#13 RE: 2 Funktionen von Movert 21.06.2012 14:03

danke, das Mount and Blade Forum hat nun auch einen style: http://welt-der-rollenspiele.xobor.de/f98-Mount-Blade.html

#14 RE: 2 Funktionen von Movert 23.06.2012 14:16

Ok, ich hab ein neues Problem, könntest du mal schauen, wie man diesen Image Resizer einbaut? http://www.kit-crafting.de/include.php?p...=235&entries=15
Ich hab das nicht hinbekommen :(

#15 RE: 2 Funktionen von florian-zier 25.06.2012 12:08

avatar

Hallo Movert,
das scheint auch ein Plugin für andere Foren zu sein.
Das wird so wohl nicht auf Klick in einem Xobor-Forum funktionieren.

Ansonsten würde ich vorschlagen, du hältst dich daran, die Bilder gleich als Thumbnail einzufügen.
Xobor hat glaube ich sogar eine solche Funktion inzwischen als Standard ermöglicht.
Den Vorschlag mit einem eigenen Foren-Code für Thumbnails habe ich auch im Thread spoiler, bilder, aufzählungszeichen gemacht.

In einem Beitrag weiter oben sind auch zwei Foren-Codes für Bilder verlinkt.
Versuch es doch mal mit den Skripten der folgenden zwei Threads:



Diese sollten beide im Forum funktionieren, sie sind übrigens auch hier eingebaut.

Da müsste eigentlich etwas für dich dabei sein.
Texte wie "Klicken zum Vergrößern..." müssen dann ja einfach noch selbst im Foren-Code ergänzt werden.

#16 RE: 2 Funktionen von Movert 28.06.2012 17:41

Ja, nur kann man dieses Skript nicht auf Xobor übertragen? immerhin macht der Javascript ja die vergrößerung, könnte man das nicht umschreiben, sodass es bei Xobor Bildern automatisch in der Div klasse mtext passiert?

#17 RE: 2 Funktionen von florian-zier 29.06.2012 21:24

avatar

Hallo Movert,
das hätte keinen Sinn, dieses Skript umzuschreiben.
Es ist speziell auf gewisse Foren angepasst, das Umschreiben wäre nicht nur umständlich sondern im Ergebnis wohl auch sehr unschön.
In dem verlinkten Beitrag sind außerdem Teile von PHP-Code zu sehen.
Und der PHP-Zugriff in Xobor-Foren funktioniert nunmal nicht.

Falls du nicht eine bereits bestehende Lösung von hier verwenden möchtest, könntest du versuchen, ein etwas allgemeineres Skript zu finden.
Eines, welches nicht speziell angepasst wurde sondern auf vielen Seiten funktionieren soll.
Das Bilderverkleinerungsskript von hier könntest du auch so anpassen, dass vor einem Bild noch der Hinweis zum Klicken für Vergrößerung ausgegeben wird.
Aber ansonsten bleibe lieber bei unspezialisierten Skripten, diese lassen sich besser in Xobor-Foren integrieren.

Xobor Forum Software von Xobor
Einfach ein eigenes Forum erstellen
Datenschutz