Firefox-Design-Thema: Schriftart-Text mit Schatten-Effekten versehen

Herzlich willkommen und ein gutes neues Jahr!

Oh ha! Nettes Spielzeug.

Welche Schrift soll denn mit Schattenwurf sein, oder besser gefragt, an welchen Stellen sollen "Wörter" einen Schatten haben?

Und so simpel Deine Frage auch erscheint, so simpel wird die Umsetzung nicht sein.

Aber es ist möglich, und wenn es nicht möglich ist, wird es hier möglich gemacht.

Hast Du "Deinen" Firefox schon auf das Verwenden von CSS-Code vorbereitet?

Thema

Anpassungen von Firefox-Oberfläche mittels userChrome.css und Webseiten mittels userContent.css

Neben den eingebauten Browser-Entwicklerwerkzeugen gibt es für Firefox eine weitere Möglichkeit, die Firefox-Oberfläche und die Gestaltung von Webseiten zu verändern. Dies geschieht mit Hilfe der Formatierungssprache CSS (Abkürzung für englisch Cascading Stylesheets) und den beiden Dateien userChrome.css für die Gestaltung der Firefox-Oberfläche und userContent.css für die Gestaltung von Webseiten nach den Wünschen der Firefox-Benutzer.

Bis zur Einführung der Webextensions durch Mozilla war es…

milupo

10. Februar 2019 um 13:19

Zitat von Gearth

Nein, davon wusste ich bis jetzt überhaupt noch nichts.

Na dann einfach mal machen, ist wirklich nicht schwer und langwierig ist es auch nicht.

Sobald Du das erledigt hast, machen wir uns daran, der Schrift in der Menüleiste und in den Tabs

einen Schatten zu verpassen.

Und glaube mir, wenn Du erst einmal "Blut" geleckt hast, willst Du noch viel mehr anpassen.

Bis morgen.

Kurz eingeworfen: Ich würde dazu die CSS-Eigenschaft text-shadow nutzen. Siehe text-shadow bei MDN und/oder text-shadow bei SelfHTML.

Zitat von Gearth

Da geht es später mit dem weiterführenden Code zum Ziel.

Hallo und Willkommen hier im Forum. 😊

Meinst du das so?

Wenn ja, dann kannst/musst du dir diesen Code noch weiter anpassen:

#main-menubar > menu {
  text-shadow: 3px 3px 4px white !important;
}

.tab-text {
  text-shadow: 3px 3px 4px white !important;
}

Ergänzend würde ich vorschlagen Du lagerst 2002Andreas Code aus!

Dh. Du schreibst in Deine userChrome.css nur Folgendes:

@import url("shadow.css");

Erstellst in Deinem Benutzerprofil unter chrome eine neue Datei eben mit genau diesem Namen
und kopierst 2002Andreas Code da rein, speichern nicht vergessen.

Die shadow.css sollte dann so aussehen:

@-moz-document url(chrome://browser/content/browser.xhtml) {

  #main-menubar > menu {
      text-shadow: 3px 3px 4px white !important;
  }
  .tab-text {
      text-shadow: 3px 3px 4px white !important;
  }
}

OK, Du kannst, Du musst Dir den Schattenwurf, aber auch die Farbe des Schattens noch anpassen.

Spiel etwas mit den Werten herum und Du wirst sehen was passiert.

Denke aber daran, nach jeder Änderung musst Du den Firefox neu starten!

Zitat von Gearth

Jetzt habe ich das erreicht,

Zitat von Gearth

wende ich mich wieder an euch.

Wir sind hier

Zitat von Gearth

Besten Dank an alle für die Informationen!

Jetzt habe ich das erreicht, was ich die ganze Zeit wollte.

Bei weiteren Fragen wende ich mich wieder an euch.

Sehr schön!

Und immer wieder gerne doch.

Zitat von Mira_Belle

Die shadow.css sollte dann so aussehen:

CSS

@-moz-document url(chrome://browser/content/browser.xhtml) {
  /* … */
}

Das ist nicht notwendig. Es heißt ja nicht umsonst userChrome.css.

Zitat von Mira_Belle

Spiel etwas mit den Werten herum und Du wirst sehen was passiert.

Denke aber daran, nach jeder Änderung musst Du den Firefox neu starten!

Sowohl bei MDN als auch Selfhtml kann man übrigens rumspielen, ohne abzuspeichern, auch mit zusätzlichen Deklarationen für Hintergrund- und Textfarbe.

Zitat von Speravir

Das ist nicht notwendig.

Das nicht.

Aber sollte man viele Codes nutzen, dann ist es übersichtlicher, als alles in der userChrome.css zu haben.

Zitat von Speravir

Sowohl bei MDN als auch Selfhtml kann man übrigens rumspielen, ohne abzuspeichern

Geht auch ganz einfach mit den Browser-Werkzeugen.

Zitat von 2002Andreas

Aber sollte man viele Codes nutzen, dann ist es übersichtlicher, als alles in der userChrome.css zu haben.

Das ist richtig und handhabe ich selbst genauso (wenn auch nicht sooo kleinteilig, wie von Mira_Belle vorgeschlagen), aber, ähm, um @import geht es mir doch gar nicht.

Zitat von 2002Andreas

Geht auch ganz einfach mit den Browser-Werkzeugen.

Stimmt auch, ich wollte nur auf die weiteren Möglichkeiten hinweisen, gerade, wenn man eine Deklaration erst mal austesten will.

Ich zitiere mich mal selber.

Zitat von Mira_Belle

Und glaube mir, wenn Du erst einmal "Blut" geleckt hast, willst Du noch viel mehr anpassen.

Deshalb.

Und genau so hat es bei mir im Juni 2021 auch angefangen,

und was war das für eine Heidenarbeit, den ganzen Kram auseinander zu puzzeln.

Also lieber gleich von Anfang an Struktur.

Zitat von Mira_Belle

Also lieber gleich von Anfang an Struktur.

So halte ich das auch. Hat man erstmal die Übersicht verloren, ist es schwierig, wieder Übersicht hineinzubekommen. Also lieber gleich vernünftig Ordnung halten.