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

Gearth

Hallo,

ich bin neu in der Anwendung von Firefox-Themen. Ich habe nichts dergleichen zu meiner Frage über die Suchfunktion gefunden; wenn doch etwas vorhanden ist, bitte darauf hinweisen.

Meine Frage erscheint simpel zu sein, aber ich weiß nicht, wie ich es hinbekomme:

Ich habe in eigenes Design-Thema mit Firefox Color erstellt, nur hätte ich jetzt noch gerne Schatten-Effekte dazu für den Text der Schriftart. Ich habe bereits in diversen Foren gelesen, dass man das mit diesem Werkzeug nicht realisieren kann.

Kann mir hier Jemand weiterhelfen, und mir ein Programm nennen, dass diesen Effekt auf den Text hinzufügt?

Vielen Dank im Voraus!

-

Gearth

Mira_Belle

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.

Gearth

Hallo Mira_Belle,

gut, das was Du sagst, stimmt mich optimistisch.

ich habe eines dieser Firefox-Themen von der Add-On-Seite Mozillas (siehe Bild im Anhang) ausprobiert, und es sollte die Menüleiste und die Tab-Auswahl betreffen; mehr ist mir jetzt nicht aufgefallen.

Mira_Belle

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

Gearth

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

Das ist ein komplett neues Feld, in das man sich erst mal einarbeiten muss. Das scheint langwierig zu werden, bis man diese Marterie komplett beherrscht.

Nur hätte ich lieber ein schnelleres Ergebnis.

Ich brauche wirklich nur diesen Schatten-Effekt auf die Schrift...

Wenn es Dir nicht zu viel Aufwand ist: Welche Werte muss man userChrome.css und userContent.css eintragen, um genau das zu erwirken?

Mira_Belle

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.

Gearth

Gut, ich habe jetzt in der Konfiguration bei toolkit.legacyUserProfileCustomizations.stylesheets den Wert auf 'True' gesetzt.

Das eröffnete mir die Möglichkeit den angegebenen Programm-Code aus userChrome.css bildlich darzustellen.

So weit, so gut!

Vielen Dank nochmal, dass Du Dir soviel Mühe gibst mir weiterzuhelfen! Da geht es später mit dem weiterführenden Code zum Ziel.

Dann eine gute Nacht, und bis morgen.

Speravir

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

2002Andreas

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:

CSS

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

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

Mira_Belle

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:

CSS

@-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!

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.

2002Andreas

Zitat von Gearth

Jetzt habe ich das erreicht,

Zitat von Gearth

wende ich mich wieder an euch.

Wir sind hier

Mira_Belle

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.

Speravir

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.

2002Andreas

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.

Speravir

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.

Mira_Belle

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.

DenalB

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.

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

2002Andreas 4. Januar 2023 um 10:33