Jalara Studio

veröffentlicht am

Obsidian - Button der Navigation (rechts oben) deaktivieren

# #


 

Wenn dir die obere rechte Navigation in Obsidian manchmal etwas zu viel Auswahlmöglichkeiten bietet, wird dir folgender Artikel helfen:

Denn dieses Problem lässt sich mit CSS lösen:

Wo füge ich dass CSS in Obsidian ein?

Die folgenden CSS-Snippets lassen sich im "Baustein-Ordner" einfügen. Öffnen kannst du diesen über die Einstellungen (Strg + ,) und Darstellung sowie Klick auf die Schaltfläche "Baustein-Ordner".

Welches CSS benutze ich zum ausblenden?

Für das Ausblenden der einzelnen Button wird der CSS-Befehl display:none genutzt.

Wie spreche ich die Button über CSS an?

Ansprechen lassen sich die einzelnen Menüpunkte über die Klasse .workspace-tab-header und den jeweiligen data-type z.B. "tag".

Wie finde ich die Bezeichnungen der Button?

Einige Plugins bringen ebenfalls Navigation-Button mit.

Der jeweilige jeweilige data-type lässt sich hier über die DevTools ermitteln. Nutze in den geöffneten DevTools den Tastenkürzel Strg + Shift + C, um den jeweiligen Button auszuwählen:

Wie öffne ich die DevTools?

Die Developer-Tools lassen sich über Strg + P sowie der Angabe "dev" oder direkt mit dem Tastenkürzel Strg + Umschalt + I in Obsidian öffnen:

Wie lautet das CSS zum Ausblenden der oberen Navigation-Button?

Die Menüflächen Backlink, Tags, und Alle Properties werden mit Hilfe folgender CSS-Befehle deaktiviert:

.workspace-tab-header[data-type="backlink"],
.workspace-tab-header[data-type="all-properties"],
.workspace-tab-header[data-type="tag"]  {
	display:none !important;
}

Wie bleiben die oberen Navigation-Button mit CSS sichtbar ?

Sollen hingegen einzelne Schaltfläche angezeigt bleiben, wäre der CSS-Befehl display:block die richtige Wahl.

Folgende Befehle blende die Menüflächen Local-Graph und File-Properties dauerhaft ein:

.workspace-tab-header[data-type="localgraph"],
.workspace-tab-header[data-type="file-properties"]{
	display:block !important;
}

Wie gebe ich mit CSS einem Button eine Farbe mit?

Möchtest du einzelne Icons farblich hervorheben, so gelingt dies mit dem CSS-Befehl color:

Das Icon der Menüfläche für die File-Properties macht folgender CSS-Befehl gelb:

.workspace-tab-header[data-type="file-properties"] .workspace-tab-header-inner-icon{
	color: yellow !important;
}