Im neuen Wbb5 hat man die Möglichkeit eigene Html Boxen im Forum rechts einzufügen. Bei Xobor kann man ja nur die vorgesehenen Boxen mit ja oder Nein in der rechten Sidebar anzeigen lassen. Habe mal versucht eine Box nach rechts zu schieben mit dem second script. Aber das passt natürlich nicht. Deshalb wäre es irgendwie klasse, wenn man wie die Boxen im Portal, solch eine Box in der rechten Sidebar vom Forum einfügen könnte. Hast du da vielleicht eine Idee?
Eigene HTML-Box im Xobor (v6)-Template einbauen Aktualisiert 23.10.21
Hallo Nara, möchte man noch zusätzliche Boxen auf der rechten Seite platzieren, ist es möglich sie an eine vorhandenen Box anzuhängen. Hierzu muss man sich die "ID" über die rechte Maustaste und "Untersuchen" heraussuchen und in das Skript übertragen. Zu beachten ist auch, welche Boxen aktiviert sind und welche nicht! Weiter unten stehen 4 Möglichkeiten zur Verfügung. Hier verändert sich nur die ID im Skript!
Installation - Nur fürs Xobor (v6)-Template & Mobil
Wichtig: Wenn man neue HTML-Boxen im (v6) anlegt, sind einige Sachen zu beachten!
Die CSS-Angaben <style>... </style> am besten oberhalb vom Vorlagen-Skript (Beitrag #2) oder in "CSS/SCSS" einfügen!
Das Skript <script>... </script> unterhalb des Vorlagen-Skript platzieren. Man kann so auf "document ready" verzichten!
Keine "Backticks" (´) verwenden, denn die werden für das Einfügen der Vorlage benötigt! Am besten hierfür "Einfache Anführungszeichen" (') nutzen! Durch Verwendung der "Backticks" im Vorlagen-Skript ist es möglich, einfache (´) und normale Anführungszeichen (") in den Boxen zu verwenden!
Das Skript braucht nicht als Plugin installiert werden, wird nur nach Eigenes Javascript kopiert! Durch den Eintrag von Zeile 2+17 kann das Skript auch in Eigene Fußzeile , HTML vor Navigation oder Eigene Kopfzeile kopiert werden!
Die HTML-Box wird hinter Letzte Aktionen im Forum platziert!
In Zeile 4 wird die ID der Box eingetragen, hinter der die eigene Box angehängt wird! Hier ist es die ID von "Letzte Aktionen im Forum" (#activity_feed). Soll die Eigene HTML-Box vor der anzuhängenden Box liegen, muss in Zeile 4 "after" gegen "before" ausgetauscht werden!
In Zeile 7 wird die Überschrift untergebracht.
In Zeile 12 wird der HTML-Inhalt der Box eingetragen. Um die Übersicht zu behalten, werden "Backticks" verwendet (`)" ! "Backslashs" für jede Zeile entfallen!
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18
<script> window.addEventListener('load', function ( ) {
<p>Im neuen <i>WoltLab Burning Board 5</i> hat man die Möglichkeit eigene Html-Boxen im Forum rechts einzufügen. Bei Xobor kann man ja nur die vorgesehenen Boxen mit ja oder Nein in der rechten Sidebar anzeigen lassen. Habe mal versucht eine Box nach rechts zu schieben mit dem second script. Aber das passt natürlich nicht. Deshalb wäre es irgendwie klasse, wenn man wie die Boxen im Portal, solch eine Box in der rechten sidebar vom Forum einfügen könnte. Hast du da vielleicht eine Idee?</p>
Das Skript braucht nicht als Plugin installiert werden, wird nur nach Eigenes Javascript kopiert! Durch den Eintrag von Zeile 2+17 kann das Skript auch in Eigene Fußzeile , HTML vor Navigation oder Eigene Kopfzeile kopiert werden!
Die HTML-Box wird hinter Wer ist Online? platziert!
In Zeile 4 wird die ID der Box eingetragen, hinter der die eigene Box angehängt wird! Hier ist es die ID von "Wer ist online?" (#useronline). Soll die Eigene HTML-Box vor der anzuhängenden Box liegen, muss in Zeile 4 "after" gegen "before" ausgetauscht werden!
In Zeile 7 wird die Überschrift untergebracht.
In Zeile 12 wird der HTML-Inhalt der Box eingetragen.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18
<script> window.addEventListener('load', function ( ) {
<p>Im neuen <i>WoltLab Burning Board 5</i> hat man die Möglichkeit eigene Html-Boxen im Forum rechts einzufügen. Bei Xobor kann man ja nur die vorgesehenen Boxen mit ja oder Nein in der rechten Sidebar anzeigen lassen. Habe mal versucht eine Box nach rechts zu schieben mit dem second script. Aber das passt natürlich nicht. Deshalb wäre es irgendwie klasse, wenn man wie die Boxen im Portal, solch eine Box in der rechten sidebar vom Forum einfügen könnte. Hast du da vielleicht eine Idee?</p>
Das Skript braucht nicht als Plugin installiert werden, wird nur nach Eigenes Javascript kopiert! Durch den Eintrag von Zeile 2+17 kann das Skript auch in Eigene Fußzeile , HTML vor Navigation oder Eigene Kopfzeile kopiert werden!
Die HTML-Box wird hinter der Shoutbox platziert! Ist die Shoutbox nicht installiert, wird die HTML-Box ganz oben recht angezeigt!
In Zeile 7 wird die Überschrift untergebracht.
In Zeile 12 wird der HTML-Inhalt der Box eingetragen.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18
<script> window.addEventListener('load', function ( ) {
<p>Im neuen <i>WoltLab Burning Board 5</i> hat man die Möglichkeit eigene Html-Boxen im Forum rechts einzufügen. Bei Xobor kann man ja nur die vorgesehenen Boxen mit ja oder Nein in der rechten Sidebar anzeigen lassen. Habe mal versucht eine Box nach rechts zu schieben mit dem second script. Aber das passt natürlich nicht. Deshalb wäre es irgendwie klasse, wenn man wie die Boxen im Portal, solch eine Box in der rechten sidebar vom Forum einfügen könnte. Hast du da vielleicht eine Idee?</p>
Das Skript braucht nicht als Plugin installiert werden, wird nur nach Eigenes Javascript kopiert! Durch den Eintrag von Zeile 2+17 kann das Skript auch in Eigene Fußzeile , HTML vor Navigation oder Eigene Kopfzeile kopiert werden!
Die HTML-Box wird hinter der Forum Statistik platziert!
In Zeile 7 wird die Überschrift untergebracht.
In Zeile 12 wird der HTML-Inhalt der Box eingetragen.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18
<script> window.addEventListener('load', function ( ) {
<p>Im neuen <i>WoltLab Burning Board 5</i> hat man die Möglichkeit eigene Html-Boxen im Forum rechts einzufügen. Bei Xobor kann man ja nur die vorgesehenen Boxen mit ja oder Nein in der rechten Sidebar anzeigen lassen. Habe mal versucht eine Box nach rechts zu schieben mit dem second script. Aber das passt natürlich nicht. Deshalb wäre es irgendwie klasse, wenn man wie die Boxen im Portal, solch eine Box in der rechten sidebar vom Forum einfügen könnte. Hast du da vielleicht eine Idee?</p>
Das Skript braucht nicht als Plugin installiert werden, wird nur nach Eigenes Javascript kopiert! Durch den Eintrag von Zeile 2+31 kann das Skript auch in Eigene Fußzeile , HTML vor Navigation oder Eigene Kopfzeile kopiert werden!
Die HTML-Box wird hinter der Forum Statistik platziert!
In Zeile 6 wird die Überschrift untergebracht.
In Zeile 16 wird der HTML-Inhalt der Box eingetragen.
Die HTML-Box lässt sich wie die anderen Kategorien öffnen und schließen (Nachtrag aus Beitrag #15)! Bei mehreren Boxen mit diesem Feature muss die ID "customcard" einen anderen Wert bekommen (customcard3, customcard4, ....)! Das JavaScript braucht nur einmal vorhanden sein!
<p>Im neuen <i>WoltLab Suite Forum 5</i> hat man die Möglichkeit eigene Html-Boxen im Forum rechts einzufügen. Bei Xobor kann man ja nur die vorgesehenen Boxen mit ja oder Nein in der rechten Sidebar anzeigen lassen. Habe mal versucht eine Box nach rechts zu schieben mit dem second script. Aber das passt natürlich nicht. Deshalb wäre es irgendwie klasse, wenn man wie die Boxen im Portal, solch eine Box in der rechten sidebar vom Forum einfügen könnte. Hast du da vielleicht eine Idee?</p>
Das Skript braucht nicht als Plugin installiert werden, wird nur nach Eigenes Javascript kopiert! Durch den Eintrag von Zeile 2+31 kann das Skript auch in Eigene Fußzeile , HTML vor Navigation oder Eigene Kopfzeile kopiert werden!
Die HTML-Box wird hinter der Forum Statistik platziert!
In Zeile 6 wird die Überschrift untergebracht.
In Zeile 16 wird der HTML-Inhalt der Box eingetragen.
Die HTML-Box lässt sich wie die anderen Kategorien öffnen und schließen (Nachtrag aus Beitrag #15)! Bei mehreren Boxen mit diesem Feature muss die ID "customcard" einen anderen Wert bekommen (customcard3, customcard4, ....)! Das JavaScript braucht nur einmal vorhanden sein!
<p>Im neuen <i>WoltLab Suite Forum 5</i> hat man die Möglichkeit eigene Html-Boxen im Forum rechts einzufügen. Bei Xobor kann man ja nur die vorgesehenen Boxen mit ja oder Nein in der rechten Sidebar anzeigen lassen. Habe mal versucht eine Box nach rechts zu schieben mit dem second script. Aber das passt natürlich nicht. Deshalb wäre es irgendwie klasse, wenn man wie die Boxen im Portal, solch eine Box in der rechten sidebar vom Forum einfügen könnte. Hast du da vielleicht eine Idee?</p>
Erstmal eine tolle Idee von dir. Darüber habe ich auch schon lange nachgedacht. Noch geiler wäre es, wenn XOBOR das v6-Template so anpassen könnte, das man die Boxen der Protalseite mit auf der Forumseite einbauen UND vor allem entsprechend der Größenanordnung frei scheibbar machen könnte !! DAS wäre TOP !! DANN läßt sich so ein Forum noch viel viel besser gestalten !!! Der Forumanbieter (yooco.de) bietet seinen Forenbetreibern da ganz tolle Gestaltungsmöglichkeiten, wo man Boxen auf allen Seiten frei anlegen kann. DAS ist richtig geil. Hier mal ein paar Sceenshots aus einem Forum, was dort mal entworfen habe:
Habe mal das Script von Wolfgang in mein Übungsforum (v6-Template) eingetragen und dann in Zeile 10 ein Script für eine Weterbox mit eingefügt (im Script grün markiert):
<script> $('#activity_feed').after('<div class="card order-0 mb-3 fadeIn"> \ <div class="card-header clearfix"> \ \ <h5 class="card-title">So wird das Wetter in deiner Region</h5> \ \ </div> \ <div class="card-body "> \ \ <p><iframe allowtransparency="true" width="420" height="360" marginheight="0" marginwidth="0" frameborder="0" scrolling="yes" src="hier die Verlinkung der Wetterbox eintragen"> </iframe></p> \ \ </div>'); </script>.
Das Ergebniss sah dann (n der Dektop-Ansicht via Laptop) erstmal so aus:
Um die Wetterbox dann zentiriert in die Textbox zu bekommen, habe ich folgenden CSS-SCSS Befehl mit aufgenommen: p { margin-top: 0.5rem; margin-bottom: 0rem; padding-left: 44px; }
Das Ergebniss in der Desktop-Ansicht via Laptop sieht dann jetzt wie folgt aus:
Wenn ich aber mein Übungsforum via Handy/Tablet aufrufe, dann sieht das leider so aus:
Vielleicht ginge eine Anwendung in Wolfgangs Skript, das Inhalte wie Textboxen automatisch zentriert und der die Ansicht auf Desktop- /Mobilgeräten entsprechend anpasst...
Zu 1. Teil: Resizable und Draggable in der rechten Box einbauen
Die Boxen verschieben, vergrößern und verkleinern ist eine gute Sache. Ist jetzt im Xobor (v6) möglich! Hier muss jQueryUI geladen werden! Siehe Beitrag #16....
Zu 2. Teil: Iframe in der rechten Box einbauen
Zitat von 844erHabe mal das Script von Wolfgang in mein Übungsforum (v6-Template) eingetragen und dann in Zeile 10 ein Script für eine Wetterbox mit eingefügt (im Script grün markiert): ....
Wenn Du ein "Iframe" einbaust, ist es ratsam die Breite nicht so hart festzulegen.
Hier ist gut "auto" oder "100%" einzutragen! Dann kann die Breite sich automatisch anpassen!
Zentrieren funktioniert auch mit "text-align:center"! <center> ... </center> geht auch!
Zentrieren dauerhaft einstellen, ist nicht so angebracht, da in den Boxen kann auch Text stehen kann, der nicht zentriert werden soll!
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18
<script> window.addEventListener('load', function ( ) {
Zitat von NaraSo, habs gerade probiert, aber es funktioniert nicht bei mir. Hab es nur mit anderem Inhalt der Box einfach mal so übernommen, wie bei dir.
Hallo Nara, @creator hat den Fehler gefunden! Danke hierfür!
Es war ein Leerzeichen hinter dem Backslash in Zeile 2 zu viel! Habe den super Vorschlag von creator verwendet und "backticks" (`) in den Klammern von "after" eingebaut. Hierdurch kann man die Skriptzeilen umbrechen und eine übersichtlich Darstellung bekommen (war mir auch neu)!
Aktuell benötigt ein Backtick immer zwei Tastenanschläge: ` und Space
Nachtrag: Durch einen zusätzlichen Eintrag kann das Skript jetzt auch in Eigene Fußzeile , HTML vor Navigation oder Eigene Kopfzeile kopiert werden! Beitrag wurde nochmal erweitert und es bestehen 6 Möglichkeiten die Eigene HTML-Box zu platzieren!
Mal noch ne kurze Frage. Hätte gerne einen Ticker in die Box eingebaut, aber mit Javascript geht das nicht oder muss das als I Frame gemacht werden? Zwei Scripte in einem funktionieren nicht. Da gibts auch keine Lösung, oder? Wo ich hoste hab ich kein https. Da müsste ich nur wegen dem I Frame mein Forum unverschlüsselt einstellen. Bin leider überhaupt nicht fit in Sachen Javascript, deshalb frage ich einfach mal.
Hallo Nara, welchen Ticker willst Du einbauen, was soll er können, wie soll er aussehen? Die meisten Ticker haben ein DIV-Container den Du in die HTML-Box kopieren kannst. Das Java-Ticker-Script kannst Du dann abschießend setzen.
Den folgenden Ticker kannst Du in allen 6 Versionen einbauen. Ich habe als Beispiel die Version 5 (Vor den Kategorien) ausgesucht!
Den folgenden Ticker habe ich hier im Forum schon mal vorgestellt:
Der Ticker hat 4 verschiedene Nachrichten, die auch beliebig erweitert oder gekürzt werden können!
Geschwindigkeit und Pause sind einstellbar!
Wichtig! Der Ticker ist nicht für Nachrichten geeignet, die über die Länge des Ticker-Fensters reichen!
Das Skript braucht nicht als Plugin installiert werden, wird nur nach Eigenes Javascript kopiert! Durch den Eintrag von Zeile 18+34 kann das Skript auch in Eigene Fußzeile , HTML vor Navigation oder Eigene Kopfzeile kopiert werden!
In Zeile 3-9 kann das Aussehen des Tickers bestimmt werden!
Für NARA: Eigene HTML-Box im Xobor (v6) - Ticker einbauen!
Hallo Nara, habe Dein speziellen Ticker für Version 2 (Box rechts) anpassen können! Super Ticker, der ein bestimmtes Jahres-Ereignis ankündigt, mit Text, Anzahl der Tage und Datum. Sogar jahresübergreifend....
Das Skript braucht nicht als Plugin installiert werden, wird nur nach Eigenes Javascript kopiert! Durch den Eintrag von Zeile 2+41 kann das Skript auch in Eigene Fußzeile , HTML vor Navigation oder Eigene Kopfzeile kopiert werden!
In Zeile 7 wird die Überschrift plaziert.
In Zeile 20 wird das Aussehen des Tickers bestimmt!
<div id="tickertext" style="font-weight:bold;font-family:verdana, arial, helvetica;color:#33cc00;font-size:13px;font-style:oblique;text-align: center !important;">Ticker kann nicht angezeigt werden!</div>
</td></tr> </tbody> </table> </center>
</div> </div>`);
var today=new Date() var theoccasion=new Date(today.getFullYear(), 04, 04) // Monat, Tag var beforeOccasionText="bis Ostern" var onOccasiontext="Heute ist Ostern" var monthtext=new Array("Jan","Feb","März","April","Mai","Juni","Juli","Aug","Sept","Okt","Nov","Dez") theoccasion.setMonth(theoccasion.getMonth()-1) var showdate="("+theoccasion.getDate()+". "+monthtext[theoccasion.getMonth()]+")" var one_day=1000*60*60*24 var calculatediff="" calculatediff=Math.ceil((theoccasion.getTime()-today.getTime())/(one_day)) if (calculatediff<0){ var nextyeartoday=new Date() nextyeartoday.setFullYear(today.getFullYear()+1) calculatediff=Math.ceil((nextyeartoday.getTime()-today.getTime())/(one_day)+calculatediff) } var pluraldayornot=(calculatediff==1)? "Tag" : "Tage" if (calculatediff>0) tickertext.innerHTML = "<b>Noch "+calculatediff+" "+pluraldayornot+" "+beforeOccasionText+" "+showdate+"!</b>"; // " ... "+calculatediff+" "+pluraldayornot+" "+beforeOccasionText+" "+showdate+" ... "; else if (calculatediff==0) tickertext.innerHTML = ".·:*¨¨*:·. <b>"+onOccasiontext+"</b> .·:*¨¨*:·."; // " ... "+onOccasiontext+" ... ";
Habe das auch mit einem Forenzähler probiert, klappt aber nicht. Habe dir den Code per PN geschickt. Vielleicht hast ne Idee, wie ich diesen in so eine Box bekomme.