{"type":"rich","html":"
\"PepeCyBs<\/a>PepeCyBs Welt<\/a> wrote the following post <\/a>Thu, 19 Dec 2024 01:06:53 +0100<\/span><\/span><\/div>
Hubzilla optisch anpassen<\/strong>
Dieser Artikel wurde am 27. Mai 2024 erstmals ver\u00f6ffentlicht.<\/em>

\"Image\/photo\"<\/a>

An Hubzilla<\/a> \u201eklebt\u201c der schlechte Ruf, es w\u00fcrde optisch nicht viel hergeben, sei h\u00e4sslich oder w\u00fcrde veraltet ausschauen.

Ich habe dem schon \u00f6fter widersprochen und habe behauptet, man k\u00f6nne es optisch sehr gut anpassen, so dass es wirklich schick und aktuell aussieht.

Nur wie macht man das?

Nun, wenn der Pepe das behauptet, dann lasst Euch an die Hand nehmen und einmal exemplarisch zeigen, wie man Hubzilla \u201eaufh\u00fcbscht\u201c.

Den wirklich einfachen Einstieg in Hubzilla habe ich hier erl\u00e4utert: Komm\u2018 ins Fediverse<\/a>

Hat man sich einen Kanal<\/a> bei Hubzilla angelegt, dann macht die Oberfl\u00e4che tats\u00e4chlich optisch nicht viel her.

\"Image\/photo\"<\/a>

Apps anpinnen<\/h3>
Als erstes pinnen wir die wichtigsten Apps<\/a> an die obere Navigationsleiste: \u201eBeitrag schreiben\u201c, \u201eKanal\u201c, \u201eStream\u201c, \u201eVerbindungen\u201c und \u201e\u00d6ffentlicher Beitrags-Stream\u201c.

Dazu w\u00e4hlen wir im App-Men\u00fc<\/a> (\u22ee oben rechts) den untersten Men\u00fceintrag \u201e+ Apps\u201c. Damit gelangen wir in die App-Einstellung und sofort bei den bereits installierten Apps. Auf dieser Seite klicken wir nun bei jeder gew\u00fcnschten App auf das kleine Pin-Nadel-Symbol und sehen dann auch sofort, wie das jeweilige Icon oben in der Navigationsleiste erscheint.

\"Image\/photo\"<\/a>

\"Image\/photo\"<\/a>

\"Image\/photo\"<\/a>

Punkt eins ist also abgehakt.

Anzeige-Einstellungen<\/h3>
Jetzt geht es an die Einstellungen f\u00fcr die Anzeige. Daf\u00fcr klicken wir im Hauptmen\u00fc (oben links, wo das eigene Avatarbild zu sehen ist) auf den Eintrag \u201eEinstellungen\u201c. In der linken Seitenleiste sind nun die verschiedenen Einstellungskategorien zu sehen. Hier w\u00e4hlen wir \u201eAnzeige-Einstellungen\u201c.

\"Image\/photo\"<\/a>

\"Image\/photo\"<\/a>

Die Seite f\u00fcr die Anzeige-Einstellungen wird angezeigt. Da wir das Design anpassen wollen, ist der Tab \u201eBenutzerdefinierte Design-Einstellungen\u201c die richtige Wahl.

\"Image\/photo\"<\/a>

\"Image\/photo\"<\/a>

Die Eingabemaske weist zun\u00e4chst aber nur wenige M\u00f6glichkeiten auf (f\u00fcnf Einstellungen). Die letzte Einstellung ist diejenige, bei der wir den Schalter als erstes einschalten m\u00fcssen: \u201eErweiterte Einstellungen anzeigen\u201c. Auf \u201eAbsenden\u201c klicken und erneut den Tab \u201eBenutzerdefinierte Design-Einstellungen\u201c aufrufen. Nun sind viel mehr Einstellungen zu sehen.

\"Image\/photo\"<\/a>

\"Image\/photo\"<\/a>

Als Beispiel werde ich hier einmal die Farben ab\u00e4ndern, die Gr\u00f6\u00dfe der Avatare im Stream anpassen und ein Hintergrundbild festlegen.

Unter den Haupteinstellungen findet man die Einstellungen f\u00fcr die Farben des Farbschemas. Unter jedem Eingabefeld ist als kleiner Kreis die Standard-Farbe angezeigt. Bei der Wahl einer eigenen Farbe, ist es sinnvoll sich zumindest bez\u00fcglich der Helligkeit ungef\u00e4hr an der Standard-Farbe zu orientieren. Klickt man in eines der Eingabefelder, \u00f6ffnet sich ein Farbwahl-Dialog, \u00fcber welchen man nun die Farbe festlegen kann. Ich habe mich in meinem Beispiel f\u00fcr ein gr\u00fcnes Farbschema entschieden und nur die grundlegenden Farben ge\u00e4ndert: \u201ePrimary theme color\u201c, also die Grundfarbe des Themes, \u201eSuccess theme color\u201c, das ist die Farbe z.B. f\u00fcr anklickbare Links, \u201eInfo theme color\u201c, die z.B. als Farbe f\u00fcr markierte Men\u00fceintr\u00e4ge als Hintergrundfarbe angezeigt wird, sowie die \u201eHintergrundfarbe der Navigationsleiste\u201c. Alle anderen Farben habe ich nicht ver\u00e4ndert. Die Farbwahl ist nat\u00fcrlich jedem selbst \u00fcberlassen.

\"Image\/photo\"<\/a>

Schlie\u00dflich habe ich die \u201eGr\u00f6\u00dfe der Avatare von Themenstartern\u201c auf 48 Pixel festgelegt.

\"Image\/photo\"<\/a>

\"Image\/photo\"<\/a>

\"Image\/photo\"<\/a>

\"Image\/photo\"<\/a>

Fehlt noch das Hintergrundbild. Dieses sollte relativ gro\u00df sein\u2026 ungef\u00e4hr der Gr\u00f6\u00dfe des haupts\u00e4chlich genutzten Bildschirms entsprechend. Au\u00dferdem w\u00fcrde ich dazu raten ein eher helles bzw. blasses Bild zu verwenden (ggf. mit dem Grafikprogramm aufhellen und den Kontrast verringern), damit es die eigentlichen Inhalte nicht \u201eerschl\u00e4gt\u201c.

Das Hintergrundbild muss irgendwo \u00fcber eine URL erreichbar sein. Da bietet es sich an, das Bild in die Dateien (Cloud) des eigenen Kanals hochzuladen und von dort aus zu verwenden.

Daf\u00fcr \u00f6ffnet man im Hamburger-Men\u00fc die App \u201eDateien\u201c. Hier kann man sich, wenn man mag, einen extra Ordner anlegen (bitte beachten, dass der Ordner und auch das dort hochgeladene Bild \u00f6ffentlich zugreifbar sind\u2026 daf\u00fcr die Zugriffsrechte mit dem kleinen Vorhangschloss evtl. anpassen) und anschlie\u00dfend das Bild hochladen.

\"Image\/photo\"<\/a>

\"Image\/photo\"<\/a>

\"Image\/photo\"<\/a>

\"Image\/photo\"<\/a>

\"Image\/photo\"<\/a>

\"Image\/photo\"<\/a>

\"Image\/photo\"<\/a>

\"Image\/photo\"<\/a>

\"Image\/photo\"<\/a>

Nach dem Hochladen wird das Bild in der Dateiliste angezeigt. Ein Rechtsklick auf den Eintrag und die Auswahl, die URL zu kopieren bef\u00f6rdert die URL f\u00fcr das Bild in die Zwischenablage.

\"Image\/photo\"<\/a>

Zur\u00fcck bei \u201eBenutzerdefinierte Design-Einstellungen\u201c kann man nun die URL in das Eingabefeld \u201eHintergrundbild\u201c einf\u00fcgen.

\"Image\/photo\"<\/a>

\"Image\/photo\"<\/a>

Ein letzter Klick und Hubzilla erstrahlt in der neuen Optik.

\"Image\/photo\"<\/a>

\"Image\/photo\"<\/a>

Das war die Pflicht\u2026 als dritter Punkt folgt nun die \u201eK\u00fcr\u201c. \ud83d\ude09

Wir wagen uns an den PDL-Editor.

PDL-Editor<\/h3>
Ich habe mich bem\u00fcht, diese nicht ganz trivialen Anpassungen auch f\u00fcr Einsteiger verst\u00e4ndlich zu erl\u00e4utern.

Grundlagen<\/h3>
Verschiedene Apps und Grundfunktionen von Hubzilla basieren auf eigens daf\u00fcr gestalteten Webseiten. Der Nutzer kommt mit den dahinter liegenden Mechanismen eigentlich nicht in Ber\u00fchrung, er nutzt diese Seiten einfach.

Ruft man beispielsweise die App \u201eKanal\u201c auf, so wird einem der eigene Kanal angezeigt.

\"Image\/photo\"<\/a>

Ganz oben kann man das Banner des Kanals sehen. In dieses Banner sind der Kanalname und die Kanaladresse (Handle) eigebettet.
Darunter befindet sich die Navigationsleiste mit dem Hauptmen\u00fc, dem Titel des Hub, ggf. angepinnten Apps und dem App-Men\u00fc<\/a>.

Interessant wird es dann aber im Bereich unter der Navigationsleiste. Hier sind bei den verschiedenen Apps die gr\u00f6\u00dften Unterschiede festzustellen. Bei der Kanal-Seite findet sich in der linken Seitenleiste (im unver\u00e4nderten Standard-Zustand) zuoberst eine Karte mit den Kanalinformationen (Banner, Profilbild, Kurzbeschreibung, Profilinfos).

In der Mitte, im Inhaltsbereich, werden die von diesem Kanal erstellten Inhalte angezeigt.

Unter der Profilinfo-Karte befindet sich in der linken Seitenleiste eine Karte mit einem Teil der Verbindungen (beim Aufruf fremder Kan\u00e4le werden hier die gemeinsamen Kontakte angezeigt).

Darunter wiederum befindet sich eine Karte mit den Archiven der Inhalte (oberste Ebene sind die Jahre, eine Gliederungsebene darunter die Monate). W\u00e4hlt man ein Archiv aus, so werden im Inhaltsbereich nur die Inhalte angezeigt, die im gew\u00e4hlten Archivzeitraum ver\u00f6ffentlicht wurden.
Unter der Archivkarte befindet sich dann die Karte der Kategorien. Hier werden s\u00e4mtliche Kategorien, unter welchen Inhalte ver\u00f6ffentlicht wurden, aufgef\u00fchrt. Ein Klick auf eine solche Kategorie f\u00fchrt dazu, dass im Inhaltsbereich s\u00e4mtliche Inhalte angezeigt werden, die von dem Kanal unter der entsprechenden Kategorie ver\u00f6ffentlicht wurden.

Unter der Archiv-Karte befindet sich die Karte mit der Schlagw\u00f6rter-Wolke, welche die genutzten Hashtags anzeigt und mit denen man den Inhalt des Inhaltsbereichs (Artikel des Kanals) filtern kann.

In der rechten Seitenleiste werden, sofern ungesehene Benachrichtigungen vorhanden sind, diese in einer weiteren Karte gezeigt.

So ist der \u201eNormalzustand\u201c.

Module mit dem PDL-Editor bearbeiten<\/h3>
Die verschiedenen Seiten, die man \u00fcber Apps erreichen kann, werden auch als \u201eModule\u201c bezeichnet.

Das Aussehen dieser Seiten kann man nun als Nutzer in gro\u00dfen Teilen anpassen und gestalten. Intern wird der Aufbau einer solchen Seite durch eine PDL-Datei bestimmt. Diese Dateien sind Layout-Dateien, welche die Comanche Seitenbeschreibungssprache nutzen.
Damit sich der Nutzer nicht mit einer solchen Sprache auseinandersetzen muss, gibt es die App \u201ePDL Editor\u201c, mit welchem man den Seitenaufbau mit einem GUI ver\u00e4ndern \/ erstellen kann.

Die App muss man zun\u00e4chst (wie hier beschrieben<\/a>) installieren und aktivieren. Dann kann man sie aus dem App-Men\u00fc heraus aufrufen.

Ruft man den PDL-Editor auf, so wird als Standard die Seitenstruktur des HQ angezeigt.

Zentral am unteren Bildschirmrand findet man das Hauptmen\u00fc des PDL-Editors. Hier gibt es die Eintr\u00e4ge

\u201eMODULES\u201c, \u201eTEMPLATES\u201c, \u201eITEMS\u201c, \u201eSOURCE\u201c und \u201eAPPLY\u201c.

Aus dem Men\u00fc \u201eMODULES\u201c kann man das zu bearbeitende Modul (das entspricht der zu bearbeitenden Seite) ausw\u00e4hlen.

Angenommen, wir m\u00f6chten die Kanal-Seite (wie sie einem selbst, aber auch Besuchern angezeigt wird) anpassen, so w\u00e4hlt man hier das Modul \u201echannel\u201c aus.

\"Image\/photo\"<\/a>

Die PDL-Datei f\u00fcr die Kanalseite wird geladen und man sieht die entsprechenden, gerade beschriebenen Bestandteile (\u201eITEMS\u201c) dieser Seite.

\"Image\/photo\"<\/a>

Angenommen, wir m\u00f6chten nun unsere Kanalseite mit einer Anzeige der Uhrzeit in der rechten Seitenleiste \u201everfeinern\u201c, so w\u00e4hlt man unter \u201eITEMS\u201c das Item \u201eCLOCK\u201c aus, \u201eergreift\u201c es mit dem Mauszeiger am Kreuzpfeil-Symbol und zieht es nach rechts in die Seitenleiste.

\"Image\/photo\"<\/a>

\"Image\/photo\"<\/a>

Damit die \u00c4nderungen auch \u00fcbernommen werden, klickt man anschlie\u00dfend auf \u201eAPPLY\u201c im Hauptmen\u00fc.

\"Image\/photo\"<\/a>

Ruft man nun die Kanalseite auf, so erscheint eine Karte mit der aktuellen Uhrzeit in der rechten Seitenleiste.

\"Image\/photo\"<\/a>

Auf diese Weise kann man alle Seiten, die man unter \u201eMODULES\u201c findet, nach dem eigenen Geschmack anpassen.

Hat man seine Seite angepasst und sie ist irgendwie \u201eso v\u00f6llig zerhackst\u00fcckt\u201c: Kein Grund zur Panik! Im Hauptmen\u00fc findet man bei ge\u00e4nderten Layoutseiten den zus\u00e4tzlichen Eintrag \u201eRESET\u201c. Ein Klick darauf setzt das Seitenlayout auf den Hubzilla-Standard zur\u00fcck.

Ich stelle hier jetzt aber nicht s\u00e4mtliche Items vor\u2026 hier darf jeder ein wenig experimentieren. Die meisten haben einen erkl\u00e4renden Titel.

Klickt man im PDL-Hauptmen\u00fc auf \u201cSOURCE\u201c, so wird einem der Quelltext des aktuellen Layouts angezeigt. Ein Blick hier hinein hilft, mit PDL vertraut zu werden. Au\u00dferdem sind hier auch \u00c4nderungen direkt im Quelltext m\u00f6glich\u2026 falls irgendwas nicht \u00fcber die \u201eITEMS\u201c erreichbar ist. Hierf\u00fcr sollte man sich aber mit der Seitenauszeichnungssprache, den Bl\u00f6cken und Modulen vorher vertraut machen.

\"Image\/photo\"<\/a>

Nun noch eine kleine \u00dcbung f\u00fcr Fortgeschrittene!<\/h3>
Angenommen, man hat ein paar Artikel erstellt und m\u00f6chte einige davon \u00fcber ein Men\u00fc in der rechten Seitenleiste der Kanalseite zug\u00e4nglich machen.
Das ist durchaus machbar.

Doch daf\u00fcr ben\u00f6tigt man zun\u00e4chst einmal ein Men\u00fc. Um Men\u00fcs zu erstellen, muss man allerdings die App \u201eWebseiten<\/a>\u201c installieren und aktivieren, denn das Erstellen von Men\u00fcs ist Teil der Webseiten-Funktionalit\u00e4t. Also selbst wenn man keine Webseiten in seinem Kanal erstellen m\u00f6chte, braucht man zum Erstellen von Men\u00fcs die App \u201eWebseiten\u201c. Wobei\u2026 so ganz stimmt das nicht. Man kann den Men\u00fceditor auch anders erreichen, als \u00fcber die App \u201eWebseiten\u201c. Daf\u00fcr gibt man

\/menu\/<\/code>

ein. Nun landet man auch in der Men\u00fc-\u201eApp\u201c. Einfacher ist es allerdings mit der Webseiten-App.

\"Image\/photo\"<\/a>

Ein Klick auf \u201eErstelle\u201c \u00f6ffnet den Men\u00fc-Editor.

\"Image\/photo\"<\/a>

Hier muss man nun einen passenden Namen (\u00fcber den man das Men\u00fc sp\u00e4ter ansprechen kann) und (optional) einen Titel f\u00fcr das Men\u00fc eingeben (dieser ist sp\u00e4ter auf der Webseite zu sehen).

Danach klickt man auf \u201eAbsenden und fortfahren\u201c.

Nun landet man im Link-Editor des gerade erstellten Men\u00fcs. Hier gibt man den Titel des Men\u00fceintrags und die dazugeh\u00f6rige URL ein. Man kann auch die Reihenfolge der Sortierung der Men\u00fceintr\u00e4ge \u00fcber das Feld \u201eReihenfolge in der Liste\u201c festlegen. Hat man die Eingabe erledigt und klickt auf \u201eAbsenden und fortfahren\u201c, kann man anschlie\u00dfend einen weiteren Men\u00fceintrag eingeben. Ein Klick auf \u201eAbsenden und fertigstellen\u201c, f\u00fcgt den Eintrag hinzu und beendet den Men\u00fceditor (man kann Men\u00fcs selbstverst\u00e4ndlich auch im nachhinein noch bearbeiten).

Nun erscheint das neue Men\u00fc in der Liste der Men\u00fcs.

\"Image\/photo\"<\/a>

Jetzt zur\u00fcck zum PDL-Editor und dort das Kanal-Modul aufrufen.

Nun gibt es wieder zwei M\u00f6glichkeiten. Entweder, man \u00f6ffnet den Quelltexteditor \u201eSOURCE\u201c und gibt den Eintrag f\u00fcr die Men\u00fckarte an der passenden Stelle per Hand ein\u2026

Hier w\u00e4hlt man, wenn das Men\u00fc in der rechten Seitenleiste erscheinen soll, die Region \u201eright_aside\u201c und gibt dort als neue Zeile

[menu]artikelmenu[\/menu]<\/code>

ein.

\"Image\/photo\"<\/a>

Nun noch auf \u201eSubmit\u201c klicken und schon erscheint die neue Karte im visuellen PDL-Editor.

\"Image\/photo\"<\/a>

Mit \u201eAPPLY\u201c noch \u00fcbernehmen\u2026 und dann ist das Men\u00fc auf der Kanal-Webseite.

\"Image\/photo\"<\/a>

Die zweite Methode (mit der man nicht die richtige Stelle im Quelltext suchen muss) ist es, im PDL-Editor einfach ein beliebiges Item an die Stelle zu ziehen, wo das Men\u00fc erscheinen soll. Dann klickt man auf den \u201eEdit\u201c-Button bei diesem Item, \u00e4ndert den vorhandenen Eintrag auf

[menu]artikelmenu[\/menu]<\/code>

und klickt auf \u201eSubmit\u201c. Dann noch ein \u201eAPPLY\u201c und man hat das selbe Ergebnis.

\"Image\/photo\"<\/a>

Soviel erstmal zur grundlegenden Nutzung des PDL-Editors.

Na und jetzt sieht Hubzilla doch wirklich nicht mehr langweilig und altbacken aus, oder?<\/div><\/div>
<\/div>","width":640,"height":426}