Ich frage mich, ob es eine Möglichkeit gibt, anzupassen, welche Schaltflächen (und in welcher Reihenfolge) auf der Symbolleiste für neue Themen angezeigt werden.
Insbesondere möchte ich die Schaltfläche Datum/Uhrzeit durch die Schaltfläche Ereignis hinzufügen ersetzen. Das Datum/die Uhrzeit verwirrt neue Benutzer nur, und in unserem Kontext sind es die Ereignisse, die wir hervorheben möchten. Den Benutzern zu erklären, dass sie zuerst die Kalender-ähnliche Schaltfläche ignorieren, auf das Zahnradsymbol klicken und dann auf das andere Kalender-ähnliche Symbol klicken sollen, ist nicht ideal, wenn man bedenkt, dass unsere Community viele nicht-technisch orientierte und ältere Personen hat.
Ich sehe zwar, dass es Themen zur Anpassung des Buttons für neue Themen gibt, aber nicht der Symbolleiste selbst.
Ich bin auch neugierig darauf. Wir haben kürzlich ein Werkzeug zur Symbolleiste des Komponisten hinzugefügt und dadurch wurde das in die nächste Zeile verschoben.
Mit CSS ist es auch recht einfach, Elemente in diesen Menüs neu anzuordnen… Sie können so etwas tun:
.d-editor-button-bar {
.local-dates { // verschiebt die Datumsschaltfläche an den Anfang
order: -1/
}
}
Hier finden Sie eine Anleitung, wie Sie CSS-Änderungen vornehmen können:
All das gesagt, die schwierigere Änderung ist das Verschieben von etwas aus dem Dropdown-Menü in die Hauptsymbolleiste (oder umgekehrt). Sie müssten die ursprüngliche Schaltfläche mit CSS ausblenden und dann eine doppelte Schaltfläche über die API hinzufügen.
Ein Blick auf eine Beispiel-Theme-Komponente wie Discourse Gifs gibt eine allgemeine Vorstellung davon, wie das gemacht wird… obwohl dies schwierig wird, wenn Sie kein Entwickler sind.
für das Menü
Als ich versuchte, es auf diese Weise zu schreiben, änderte sich die Reihenfolge der Anzeige nicht.
PS: display: none; hat auch nicht funktioniert.
Ja, das wird wirklich gebraucht. Nicht nur eine „Standard“-Option für alle Benutzer, sondern dann könnte jeder Benutzer sie anpassen, denn nicht jeder muss eine Schaltfläche haben, um Text „fett“ oder „kursiv“ oder sogar „KI fragen“ zu machen.
Aber vorerst würde es helfen, die Dinge zumindest global verschieben und zum versteckten Menü/Zahnradmenü hinzufügen zu können.
Auf meinem 13-Zoll-Bildschirm wird es langsam etwas eng (ich möchte immer einen Teil des ursprünglichen Themas sichtbar haben, um Abschnitte zu zitieren usw.):
Ehrlich gesagt bin ich mir nicht ganz sicher. Das wurde in einer Community installiert, die ich früher betrieben habe (aber nicht mehr tue). Es sieht so aus, als ob es hier zu finden ist.
Ich habe auch ältere Leute in meinem Forum und ich fühle mich albern, ihnen das zu erklären.
Das Zahnrad ist auch ein sehr nicht offensichtliches Symbol für “es gibt mehr”. Vielleicht wäre eine Ellipse angebrachter? Gibt es eine einfache Möglichkeit, das Symbol zu ändern?
Eine weitere Hürde, die ich hier gefunden habe, ist, dass es auf Mobilgeräten ein kleines Hamburger-Symbol gibt, das die Symbolleiste ein-/ausblendet, und es scheint standardmäßig deaktiviert zu sein. Dies verursacht weitaus mehr Verwirrung als jeder Vorteil, den es bieten könnte. Ich habe es deaktiviert:
Ich habe das „Symbol zum Erstellen von Ereignissen“ rechts und außerhalb des +Menüs platziert, aber Sie können es mit diesen Anweisungen links platzieren:
Fügen Sie in Ihrem Theme-Header unter admin > appearance > theme > edit > edit code > head dieses JavaScript hinzu:
<!-- Benutzerdefiniertes Symbol zum Erstellen von Ereignissen (Symbolbasiert, sprachunabhängig) -->
<script>
(() => {
const e = ".d-editor-button-bar";
const t = ".btn.no-text.fk-d-menu__trigger.toolbar-menu__options-trigger.toolbar__button.options.toolbar-popup-menu-options";
const n = ".fk-d-menu__inner-content";
const o = ".d-modal.fk-d-menu-modal";
const c = (e) => {
const t = e.querySelector('svg use[href="#calendar-day"]');
return t ? t.closest("button") : null;
};
const r = (e, t, n = 4000) => new Promise((o, c) => {
const r = t(e);
if (r) return o(r);
const l = new MutationObserver(() => {
const n = t(e);
n && (l.disconnect(), o(n));
});
l.observe(e, { childList: !0, subtree: !0 });
setTimeout(() => {
l.disconnect();
c();
}, n);
});
const l = (e = 4000) => {
const t = new MutationObserver(() => {
document.querySelector(o) && t.disconnect();
});
t.observe(document.body, { childList: !0, subtree: !0 });
setTimeout(() => {
t.disconnect();
}, e);
};
const s = (e) => {
if (e.querySelector(".custom-create-event-btn")) return;
const o = document.createElement("button");
o.className = "btn no-text btn-icon toolbar__button link custom-create-event-btn";
o.title = "Ereignis erstellen";
o.innerHTML = '<svg class="fa d-icon d-icon-calendar-day svg-icon"><use href="#calendar-day"></use></svg>';
e.appendChild(o);
o.addEventListener("click", async () => {
const e = document.querySelector(t);
if (!e) return;
e.click();
let o = document.querySelector(n);
if (!o) {
await new Promise((e, t) => {
const c = new MutationObserver(() => {
o = document.querySelector(n);
o && (c.disconnect(), e());
});
c.observe(document.body, { childList: !0, subtree: !0 });
setTimeout(() => {
c.disconnect();
t();
}, 2000);
});
}
try {
(await r(o, c)).click();
l();
} catch {}
});
};
const u = new MutationObserver(() => {
const t = document.querySelector(e);
t && s(t);
});
u.observe(document.body, { childList: !0, subtree: !0 });
const d = document.querySelector(e);
d && s(d);
})();
</script>
Wenn Sie möchten, dass das Symbol links und nicht rechts angezeigt wird: Auf derselben Admin-Seite finden Sie einen CSS-Tab, zu dem Sie Folgendes hinzufügen können:
Bonus: Wenn dieser Button nur in bestimmten Kategorien an dieser Stelle sichtbar sein soll, verwenden Sie das dortige Skript und ändern Sie die Bedingungen mit Ihren Kategorienamen: Discourse Calendar (and Event) - #547 by opcourdis
in die nächste Zeile verschoben.
