Firefox - Headbereich anpassen

[Branks]

Für die URLbar nutze ich in der userChrome.css folgenden Script:

#urlbar{
    background-color:#110602 !important;
    color:#7BC4BE !important;
}

Die Selectier-color würde ich auch gern steuern können.

Für die Searchbar würde ich auch gern color und background-color einstellen können. Die hover-Transparenz würde ich gern unterdrücken, ohne Effekt.
Lässt sich ggf. realisieren, dass bei erneuten OnClick nach dem Absetzen der Suche nicht auto-selectiert sondern den Cursor platziert wird?

Die MenuBar kann ich mittels Personas plus einfärben, fand aber keine Möglichkeit, Themes zu speichern.
Der untere Bereich im Screenshot lässt sich nicht zufriedenstellend einfärben. Genannt wird für das top-Bild eine Größe von 3000x200. Ich will es aber mal mit einer angepassten Größe probieren.
Ansich sollte es hier auch Scriptig-Möglichkeiten geben?

Im FF-Default-Theme ist der Zurück-Button ein großer Kreis. Ein elegant wirkendes Rechteck wird man im default-Theme sicher nicht realisieren können? Sobald es ein gültiges Theme gibt, will ich das dann anpassen. Man muss halt Geduld haben... ich. --- Hoffentlich beruhigt sich bald der rasche Versionenwechsel. Es darf ja auch mal was (fast) ohne Sicherheitslücken geben.

Ergänzung (2. Juni 2018)

 

[macko125]

Oh boy, wieder einmal Arbeit für mich.

Die Selectier-color würde ich auch gern steuern können.

Bitte immer genau beschreiben was du meinst. Aber höchstwahrscheinlich meinst du wohl den blauen Rahmen, wenn die Urlbar/Searchbar im Fokus ist, nicht wahr?

Wenn ja, dann kann man die blaue Rahmenfarbe so abändern:

/* Urlbar und Searchbar Fokusfarbe in weiss  */
#urlbar[focused="true"],
.searchbar-textbox[focused="true"]{
border: 1px solid #ffffff !important;
}

Sieht dann etwa so aus:

Für die Searchbar würde ich auch gern color und background-color einstellen können.

Geht per CSS so:

.searchbar-textbox {
  background-color: #110602 !important;
  color: #7BC4BE !important;
}

Die hover-Transparenz würde ich gern unterdrücken, ohne Effekt.

Auch hier gilt, bitte immer genau sagen welches Element zu genau meinst. Aber ich nehme einmal an du meinst die Hover-Transparenz der Toolbar-Elemente?
Wenn ja, dann geht dann kannst du dies folgendermassen unterdrücken:

.toolbarbutton-1 {
  --toolbarbutton-hover-background: none !important;
  --toolbarbutton-active-background: none !important;
}

bei erneuten OnClick nach dem Absetzen der Suche nicht auto-selectiert sondern den Cursor platziert wird?

Verstehe ehrlich gesagt nicht, was du genau haben möchtest. Bitte näher erläutern.

Der untere Bereich im Screenshot lässt sich nicht zufriedenstellend einfärben.

Sowohl Menü- als auch Navigationsbar können folgendermassen per CSS eingefärbt werden:

/* Menü- und Navigationsbar einfärben bei Verwendung des dunklen Themas*/
:root:-moz-lwtheme-darktext{
    --chrome-background-color: # !important; /*Menübar Farbe */
    --chrome-secondary-background-color: # !important; /*Navigationsbar Farbe*/
}

/* Menü- und Navigationsbar einfärben bei Verwendung des hellen Themas*/
:root:-moz-lwtheme-brighttext {
    --chrome-background-color: # !important; /*Menübar Farbe */
    --chrome-secondary-background-color: # !important; /*Navigationsbar Farbe*/
}

Im FF-Default-Theme ist der Zurück-Button ein großer Kreis. Ein elegant wirkendes Rechteck wird man im default-Theme sicher nicht realisieren können?

Kannst doch einfach auf die Kompakte Dichte wechseln, dort hast du keinen runden Zurückbutton mehr, und die Toolbaricons sind alle ein wenig kompakter (-> unter Anpassen > "Dichte" zu finden)

Hoffentlich beruhigt sich bald der rasche Versionenwechsel.

Ganz sicher nicht, und denke auch nicht dass sich das ändern wird. Seit Firefox im Jahre 2011 auf ihr Rapid Release Plan gewechselt sind, gibt es immer jede 6. Woche eine neue FF Release Version.

---

Bezüglich Anpassungen von Firefox: Wenn du ernsthaft interessiert bist, deinen Fuchs ganz persönlich anzupassen, dann würde ich dir empfehlen dich ein wenig einzulesen, wie man mittels der Entwicklerkonsole die Oberfläche von Firefox debuggen kann, wie auch einige simple CSS-Kenntnisse. (siehe auch: Style Editor)
Auch existieren von einigen Leuten sehr umfangreiche Stylesheets, welche so ziemlich fast alles an der Oberfläche abändern, und an die man sich orientieren kann für eigene Anpassungen (siehe dazu: Custom CSS tweaks for Firefox Quantum und Shadowfox)

 

[Branks]

Oh oh, ich sehe. Das geht tatsächlich schon zu arg in den Zumutungsbereich. Hatte auch nicht auf so schnelle kompakte Soforthilfe gehofft.

Ja, mitunter ist es schwer, den richtigen Ausdruck zu finden. Die Selectier-color der urlbar, damit meine ich die color, wenn man einen Eintrag selectiert (OnClick oder OnMouseMove). Das ist bei mir leuchtend gelb, also ziemlich erschlagend.

Ergänzung (3. Juni 2018)

Die Rahmen sind allerdings gute Stilmittel. Z.B. etwas heller als die Umgebung, bei OnFocus etwas dunkler. Sowas bringt dann den letzten Schliff.

Ah. Die Hover-Transparenz hatte ich bei der Searchbar genannt. Sry, es war sicher unklar platziert. Jetzt ist der Effekt weg. Ich mag möglichst dezente bis gar keine Reaktionen auf Hover. Umgebungen werden schnel sehr unruhig.

Die Hover-Transparenz der Toolbar-Elemente? Jau. Einer der aero-Effekte. Ich verzichte gern.

"bei erneuten OnClick nach dem Absetzen der Suche nicht auto-selectiert sondern den Cursor platziert wird? "
Ich meinte: Text in der Searchbar -> Enter. Das Ergebnis der Suche gefällt noch nicht. Also platziere ich die Maus erneut in der Suche und... der gesamte Eintrag wird auto-selectiert. Das ist unpraktisch. Ich mag lieber nicht selectieren sondern PenPos, also den Cursor platzieren.

 

[Branks]

Auf jeden Fall möchte ich lernen, die Oberfläche zu gestalten. Kompakt + Dark + der Anpassscript, und schon wurde aus dem rohen Klotz ein richtig eleganter, moderner Browser. Klare Linien, und doch nicht eckig sondern in sich gerundet wirkend. Wenn ich dagegen vergleiche, wie ich gesten mit Gimp kaum brauchbares versucht habe...

Eine Krönung wird viel später noch sowas wie mein Seamonkey-Theme sein. Farbverläufe, Profilrundungen. Displays kommen auf solche Art einfach toll:

 

[macko125]

Die Selectier-color der urlbar, damit meine ich die color, wenn man einen Eintrag selectiert (OnClick oder OnMouseMove). Das ist bei mir leuchtend gelb, also ziemlich erschlagend.

Ja, jetzt weiss ich was du meinst, war mir vorhin nicht ganz klar, ob du mit Selektierfarbe wirklich die Textauswahlfarbe gemeint hattest. Die gelbe Textauswahlfarbe stammt sehr wahrscheinlich von einem Persona-Theme ab, welches ja nach Theme die Farben jeweils anpasst.
Die Textauswahlfarbe kannst du jedenfalls so per CSS anpassen:

/*Ausgewählte Textfarbe ändern "Dunkles Theme"*/
:root:-moz-lwtheme-brighttext {
    --chrome-selection-color: # !important; /*Farbe des Textes beim markieren*/
    --chrome-selection-background-color: # !important; /*Hintergrundfarbe des markierten Textes */
}

/*Ausgewählte Textfarbe ändern "Helles Thema"**/
:root:-moz-lwtheme-darktext{
    --chrome-selection-color: # !important; /*Farbe des Textes beim markieren*/
    --chrome-selection-background-color: # !important; /*Farbe des Textes beim markieren*/
}

Das Ergebnis der Suche gefällt noch nicht. Also platziere ich die Maus erneut in der Suche und... der gesamte Eintrag wird auto-selectiert. Das ist unpraktisch.

Nein, dieses Verhalten kann man nicht abändern, jedenfalls nicht auf einem einfachen Weg. (kenne jetzt nur ein Script, welches nach einer Suche den Suchbegriff aus der Suchleiste raus löscht.)
Ansonsten brauchst du, wenn du bsp. eine Suche bei Google angestossen hast und den Suchbegriff verfeinern möchtest, ja nicht umbedingt wieder auf die Suchleiste von Firefox zu klicken, sondern kannst die Suchleiste von der Google-Webseite direkt anklicken, da dort wie gewünscht nur der Cursor gesetzt wird.

Eine Krönung wird viel später noch sowas wie mein Seamonkey-Theme sein. Farbverläufe, Profilrundungen. Displays kommen auf solche Art einfach toll:

Wenn du mit Farbverlaufen in CSS herumspielen möchtest, dann gibt es mit dem Ultimate CSS Gradient Generator ein sehr nettes Online-Tool, mit welchem man sich fertigen CSS-Code von Farbverläufen basteln kann

Und weil ich mal kurz Laune hatte, habe ich mich einmal kurz die Mühe gemacht, den Farbverlauf fast perfekt von deinem Screenshot in CSS nachzubauen (Dunkles Theme muss dabei ausgewählt sein):

/*Standard Hintergrund transparent setzen "Dunkler Theme" */
:root:-moz-lwtheme-brighttext {
    --chrome-background-color: transparent !important;
    --chrome-secondary-background-color: transparent !important
}

/*Farbverlauf Menü-+Navigationstoolbar*/
#navigator-toolbox {
    background: linear-gradient(to bottom, #070607 0%,#000000 10%,#005a6c 40%,#00cdf1 55%,#005a6c 70%,#000000 85%,#000000 100%) !important;
}

Sieht bei mir dann etwa so aus:

Sieht, nach meiner Ansicht nach, bei mir jetzt natürlich nicht so toll aus mit meinem Theme/Anpassungen. Daher bevorzuge ich meinem Falle lieber mein eigenes Theme und Farben

---

Ach ja, nur so am Rande erwähnt, weil es mir gerade auf deinem Screenshot aufgefallen ist: Gibt es irgendwie einen besonderen Grund weswegen du im FF zwei Adblocker gleichzeitig am laufen hast? Weil es macht nicht so viel Sinn zwei Erweiterungen zu nutzen, welche genau das selbe machen mittels Filterlisten/eigenen Regeln. Verwende doch einfach nur ein einzigen Adblocker, abonniere dort deine Filterlisten/erstelle deine eigenen Regeln, und gut ist.

 

[Branks]

Der Script für "Ausgewählter Text Farbe abändern" zeigt hier keinen Effekt, auch nicht, wenn ich ihn am Schluss platziere. Habe es mit background-color, mit color, mit veschiedenen Werteinträgen bzw. mit Farbnamen probiert. Nichts. - Mit Script debuggen habe ich mich noch nie befasst.

-----

Gut. Es geht also nur, die google-Suche im input der Webside zu verfeinern. Ist OK und P.g. gleichzeitig. Ich mag den raschen Anzeigewechsel direkt während der Eingabe nicht. Nur bei der Bildersuche finde ich es prima.

-----

Dank. Die Seite von Ultimate CSS Gradient Generator gefällt sehr, eine der 'toppesten', die ich je sah. Die Nutzung erkunden ist für den ollen ich Pflicht. Dank für dein Knobelergebnis. Muss es gleich nutzen.

----

Äh ja. ABP ultimate lässt mich weniger happy aussehen, als ich gehofft hatte. Für flüchtige Popups ist es zu langsam... ist offenbar auch in der Umsetzung zu langsam. Rechts unten der top-Button blitzte nach Blockung immer wieder kurz auf. Mit ABP tut er das nun nicht. Bei den Knobelkuren hier hatte ich es jetzt nicht einlig, den ABP u zu deinstallieren. - Muss ohnehin noch schauen, ob für den ABP der Elemente Hiding helper noch gültig ist. Mitunter ist ja nicht mal der sehr schnelle RMB (Rechtsklick) schnell genug. - Ich muss ruhige! Werbung ansich nicht blocken. Aber die viel zu vielen Überfrachtungen, Loader, Spinner usw müssen! alle weg. Mitunter ist das sehr schwer, wenn ich nicht mal im Quelltxt die Ursache entdecke.

 

[macko125]

Der Script für "Ausgewählter Text Farbe abändern" zeigt hier keinen Effekt, auch nicht, wenn ich ihn am Schluss platziere.

Ja, weiss auch nicht wie das passiert ist, aber als ich den Beitrag verfasste habe, hat es beim kurzen Test funktioniert in meinem Browser, und jetzt nach dem gegen testen funktioniert es plötzlich nicht mehr
Das passiert jedenfalls, wenn man nicht genügend den Code getestet hat
Wie dem auch sei, ich habe mittlerweile den CSS-Code in meinem vorherigen Post korrigiert, und dieses Mal sollte es nach meinem gründlichen Test auch wirklich hinhauen. (hab es auch in einer portablen Version getestet)

Mit Script debuggen habe ich mich noch nie befasst.

Ja, das weiss ich doch. Es war ja auch ein Vorschlag meinerseits gewesen, dass wenn du Zeit und Laune hast, dich ein wenig damit auseinander setzen kannst, damit du nicht für jede Anpassung nach dem CSS-Code fragen musst, sondern es einfach selbst machst. Beispielsweise kannst du dir einmal die userChrome.css von Shadowfox anschauen, welches ein Komplettes Dunkles Thema für FF ist, und wo du dir einfach ein paar CSS-Schnipsel in dein eigenes reinkopierst, damit du nachvollziehen kannst, was welcher CSS-Selektor macht. Aber für einen guten Lerneffekt empfehle ich dennoch die Browserwerkzeuge + Stylebearbeitung zu aktivieren/anzuwenden, damit du deine userChrome.css sozusagen live-editieren kannst, und direkt siehst was die Regeln auf der Benutzeroberfläche bewirken.

Kleines Tutorial hier noch von mir, wie du die Entwicklerwerkzeug von FF starten und damit die userChrome.css mit dem Style Editor bearbeiten kannst:

---

Spoiler: Kleines Tutorial für die Entwicklerwerkzeuge

Die Entwicklerwerkzeuge kannst du mittels Strg+Umschalt+I oder in der Menübar unter Extras -> Web-entwickler-> Werkzeuge ein-/ausblenden.
Jetzt sollte ein Fenster aufgehen mit dem Namen Entwicklerwerkzeuge. Rechts am an der oberen Seite gibt es dann ein kleines Zahnrad als Symbol. (siehe Screenshot 1)

Dort klickst du drauf um in die Einstellungen zu kommen. In den Einstellungen stellst du dann unter "Erweiterten Einstellungen" die zwei markierten Einstellungen mittels den Checkboxen auf ein (siehe Screenshot 2)

Nachdem du diese Einstellungen getätigt hast, kannst du das Fenster wieder schliessen, und dann mittels Strg+Umschalt+Alt+I die Browserwerkzeuge starten können. Beim aufrufen sollte dann ein kleines Bestätigungsfenster für die eingehende Verbindung angezeigt werden (siehe Screenshot 3)-> dort dann auf ok drücken.

Jetzt sollte dann die Entwicklerwerkzeug aufgehen für den Browser (sollte chrome://browser/content/browser.xul im Titel stehen), welches direkt innerhalb des Reiters "Stilbearbeitung" startet. In der linken Sidebar suchst du dann deine userChrome.css und machst einen Klick darauf, und danach sollte dir der Style-Editor den Inhalt deiner userChrome.css anzeigen.

Jetzt wenn du ein CSS-Code/Regel in das Editierfenster schreibst, wirst du sofort die Änderung an der Firefox-Oberfläche sehen können, ohne dass du dabei immer neu starten musst. (sehr hilfreich, wenn man seinen Browser anpassen möchte.)
1. 2. 3. 4.

 

[Branks]

Oh oh... die userChrome.css von Shadowfox ist ja umfangreicher als der index von Selfhtml. Das Hauptproblem wird noch für lange Zeit die Objektbezeichner-Kunde sein. Ich denke, ich werde mir eine Liste mit den für mich wichtigsten Bezeichner anlegen. - Man muss ja nicht alles im Kopf haben, muss nur wissen, wo es steht. ^^

Der Code bewirkt jetzt, eine geklickte URL wird nicht mehr selektiert. Ich muss noch die Selectierfarbe anpassen. Jau. Ohne das Entwicklerwerkzeug ist das Arbeiten viel zu mühevoll. Hab auch Dank für den Orientierungs-Tut. Für die nächsten Jahre werde ich nun wohl sehr beschäftigt aussehen.

 

[macko125]

Ja die userChrome.css vom Shadowfox Theme ist schon sehr umfangreich, aber auch weil das eine komplett Anpassung der gesamten Benutzeroberfäche vom FF ist.(man muss dafür unzählige Regeln erstellen, um fast die ganze Oberfläche zu stylen. Meine userChrome.css ist übrigens beinahe gleich lang ) Und selbstverständlich brauchst natürlich nicht alle CSS-Selektoren auswendig zu lernen oder gar zu kennen, sondern wie du schon selbst gesagt hast, es geht eher um die Handhabung zu begreifen, was genau wie verändert wird, und welche Regeln was bewirken.

Jetzt wo du weisst, wie man die Entwicklerkonsole für den Browser starten kann, kannst du zusätzlich auch ein wenig mit dem Seiteninspektor herumspielen, mit welchem du mit dem kleinen Button neben dem Reiter "Inspektor" (ein Icon mit einer kleinen Maus welche in ein Fenster zeigt), Elemente der Benutzeroberfläche auswählen (es wird dabei ein roter Rahmen über die Elemente angezeigt, wenn man mit der Maus drüberfährt), und so die verschiedenen Benutzeroberflächenobjekte inspizieren kann, um sich so auch die angewandten CSS-Regeln für das markierte anzuzeigen, wie auch die zugrundeliegenden CSS-Selektoren. (rechte Sidebar zeigt dabei alle angewandten Regeln an des markierten Bereichs) Darin kann man sich dann auch frei austoben, und beispielsweise live Änderungen vornehmen (z.B einen Farbwert abändern), ohne dass man sich etwas zerschiesst, da alle Änderungen rein temporär sind.

Der Code bewirkt jetzt, eine geklickte URL wird nicht mehr selektiert. Ich muss noch die Selectierfarbe anpassen. Jau

Ja dann funktioniert es ja auch richtig, denn ich habe ja, wie du es sicher gesehen hast, ganz bewusst den Bereich mit dem Farbwert leer gelassen, damit du dort deine eigenen Farbenwerte nach Gusto eintragen kannst. Daher bitte noch Farbwerte eintragen, sonst zeigt es wirklich keine Farbe mehr an. (Entweder als Hex-/RGB/RGBA-Wert usw.)

 

[Branks]

Oh ja, dank, sehe jetzt scho :happy: aus. ^^ Konte schon einpaar Punkte rausfinden.
Mit dem Inspektor wird die "indie-Kunde" sicher noch zügiger realisierbar.
Mit der Vererbungslehre hatte ich noch zu wenig Kontakt. Die muss trainiert werden.

Jau, ein # ist noch keine Color. Aber das wird, wenn man was einträgt.
Dank für die viele Weiterhilfe.