Beiträge von Horstmann

  • Bookmark-Button und Bezeichnung

    Zitat von 2002Andreas
    Zitat von Horstmann

    auch in 119+ klappt.

    Im Anpassenfenster

    Danke für's Testen! :)

    Ich habe den Code nochmal gerafft bekommen, das war mir doch zu unhübsch und umständlich . ;)

  • Bookmark-Button und Bezeichnung

    Ich weiss man sollte keine alten Themen ausgraben ;) , aber das hier fand ich generell ganz interessant.

    Die meisten Buttons in Fx haben ja Text, der ist nur nicht sichtbar.

    Dieser Text sitzt in einem ::before Element zu label, und - man kann ihn sich anpassen!

    Diesen Text zu beutzen ist um einiges einfacher als ein neues Pseudoelement zu basteln, wie wir es hier gemacht hatten; weniger Code, und alle nötigen Maße, Farben etc. werden von Fx bereitgestellt.

    Das Prinzip sollte bei den meisten Buttons funktionieren; der eine zusätzliche Aufwand ist für das Anpassen Fenster, da fällt mir gerade nichts eleganteres ein.

    Wer Lust hat kann das hier mal testen; ich bin auf Fx115esr, würd mich interessieren ob das auch in 119+ klappt.

  • userChrome.css bearbeiten

    Zitat von xyzdef

    Sicherlich finde ich zu Haufe Beispielcodes im Netz. Wo befinden sich gute Seiten?

    Gibt ne Menge, aber dieses Forum ist schon mal prima, eine Menge Info und Code findet sich auch auf Reddit (muss man sich halt teils durchquälen), und die beste Anfänger-freundliche CSS Code Sammlung für Fx - die ich kenne - ist diese.

    Gute Quellen für Basiswissen und sehr nützlich als Nachschlagewerke zu einzelnen Themenbereichen sind MDN oder W3schhools; eine gute Übersicht über aktuellen Fx Code gibt es bei searchfox.

    MDN Artikel gibt es teils auch in Deutsch, aber Englisch ist schon gut zu können, der Code selber ist ja auch in Englisch.

  • Tabform

    Zitat von Mira_Belle

    Horstmann

    Danke auch für diesen Code!

    CSS
        #navigator-toolbox { 
        background-image: linear-gradient(0deg, rgba(255, 170, 0, 1) 2%, rgba(223, 144, 0, 1) 4%, rgba(192, 118, 0, 1) 8%, rgba(161, 93, 0, 1) 16%, rgba(131, 69, 0, 1) 32%, rgba(102, 47, 0, 1) 64%, rgba(74, 25, 0, 1) 72%, rgba(47, 3, 0, 1) 80%, rgba(11, 0, 0, 1) 88%, rgba(0, 0, 0, 1) 100%) !important;
    }

    Gerne doch, war eine meiner leichteren Übungen. :)...

    Kleiner Scherz, der Code ist nicht von mir. ;)

    Sieht aus wie ein Verlauf über die ganze Toolbox, das geht im Prinzip.

  • Tabform

    Zitat von Sören Hentzschel


    Dir wird nichts anderes übrig bleiben, wenn du auch neuere Firefox-Versionen anpassen möchtest. Selbst wenn du es in eigenem Code nicht verwenden möchtest, musst du den bestehenden Firefox-Code ja verstehen, um ihn zielführend anpassen zu können. Und wenn du die CSS-Regeln versteht, kannst du sie auch anwenden. So schließt sich der Kreis. Viel gibt es außerdem ja gar nicht, was man dafür lernen müsste, wenn man eh schon im CSS-Thema drin ist. Das lässt sich mit wenigen Sätzen erklären und mehr als das ist es am Ende auch nicht. Das ist leichter als beispielsweise jemandem die Komma-Regeln der eigenen Sprache zu erklären. Also keine Angst davor. ;)

    Stimmt schon; lesen bzw. verstehen kann ich den "neuen" Code halbwegs, und nach meiner kurzen Recherche ist es tatsächlich nicht so komplex, bringt aber wie gesagt interessante neue Möglichkeiten mit sich.

    Mal schauen.

    Wo ich mir nicht ganz sicher bin: ist Komma-Regeln die korrekte Schreibweise, oder sollte das nicht eher Kommaregeln sein? :P

    Kleiner Scherz; bitte nicht nochmal eine Rechtschreibdebatte, oder - ... Rechtschreib-Debatte? ;)

  • Tabform

    Das Gute an Variablen, und den Berechnungsformeln, ist dass man nur einen oder einige wenige Werte ändern muss, um den gesamten Code auf einmal anzupassen.

    Vorrausgesetzt natürlich dass man alles korrekt aufgebaut hat; und ich bin da nicht gerade Experte drin. ;)

    Neu gibt es noch dazu das Nesting und (bald) den :has Selector in Fx, was noch mehr Möglichkeiten eröffnet.

    Aber ob ich dass noch dazulernen will...

    Unser Code hier ist ziemlich einfach, ich hab selber zum Testen meist nur absolute Werte benutzt, wegen der Übersichtlichkeit.

    Für die Anwendung ist dann eine mehr automatisierte Form sinnvoller, weil man nur als Author noch dahintersteigt, welcher Wert warum wo steht.

    Dann schau dir mal die Codes von Aris an, oder auch andere wie der erwähnte von Godie etc., das ist eine komplett andere Welt.

    An sowas kann ich nicht mal kratzen, die Komplexität an sich und der benutzten Variablen ist fantastisch. 8|

    Und gut zu hören dass multiselected klappt - da würde ich nur ungern nochmal drangehen. ;)

  • Tabform

    Zitat von Mira_Belle

    Aber weißt Du, ich wollte mir die Spielerei aufheben, mit dem Farbverlauf und so.

    So was vergesse ich doch sonst, wenn ich es "lösche" und nicht hin und wieder ausprobiere!!

    "Für was war das nochmal so? Muss ich testen. Achja, jetzt weiß ich es wieder!" Selbstgespräch Ende.

    Das kenn ich gut; Stunden am CSS basteln an irgendeiner Ecke, ein paar Wochen später die Frage was, wie und warum überhaupt? ;)

    Für Verläufe gibt's zig Möglichkeiten; kuck mal: ;)

  • Tabform

    /*-------------------------------------------*/

    Um zu wissen dass es anders geht, musst du eigentlich erstmal wissen wie es anders geht, und was der Code macht. ;)

    Aber natürlich geht's anders, wie immer.

    Anmerkungen schreib ich oben rein zu den einzelnen Blöcken, hoffe das macht halbwegs Sinn. :)

    Danke für den Test! :)

    Hmm, das ist wirklich seltsam. :/

    Ich hatte das auch auf meinem Fx 119 Frankencomputer getestet, ohne Probleme; sonst hätte ich gesagt wegen meinem normalen 115esr Testumfeld sind die Selektoren nicht aktuell.

    Aber dann war es eine gute Idee, fill/stroke direkt in die before/after Elemente zu schreiben. :thumbup:

    Ich hatte das eigentlich nur weiter nach oben verlegt, damit alle Farbeinstellungen im gleichen Block liegen, was aber funktionell schnuppe ist. Bzw. in deinem Fall gar nicht klappt.

    Hast du multiselected Tabs mal probiert, gibt's da evtl. auch Ärger?

    Die sind zumindest in meinem Code nämlich aufwendig getrennt farblich.

  • Tabform

    Zitat von Mira_Belle

    Irgendwie komme ich mir blöd vor, Dir all diese Codeschnipsel raus suchen zu müssen.

    Die sind in dem CSS aus Beitrag #130.

    Und ich hätte gerne gewusst, wo diese Formeln herkommen.

    Wieso werden diese Werte berechnet, bzw, so?

    Ginge doch auch anders!

    Einige deiner Codebeispiele von vorher (#133) waren aber so nicht in meinem Code, daher die Frage; raus suchen musst du sie nicht, ich hab sie ja reingeschrieben, die find ich inzwischen im Schlaf. ;)

    Zu den Formeln später mehr.

    Kapier ich nicht, da fehlt die rechte Ecke in der selektierten Tab, in der letzten Tab ist sie da - bei mir aber nicht. :/

    Hast du das mal in einem Testprofil probiert - ohne das ganze andere CSS und Scripts?

    In dem Screenshot ist noch eine Menge anderes CSS etc. beteiligt.

    Du kannst aber fill/stroke auf jeden Fall in die before/after Elemente schreiben (und mit den Variablen von oben), hatte ich ursprünglich auch so, sollte aber eigentlich keinen Unterschied machen.

  • Tabform

    Zitat von Mira_Belle

    :/

    Noch besser bekomme ich es jetzt wirklich nicht mehr hin!


    Das Problem ist, bei mir auf dem Mac ist das alles anders aufgebaut; hier funktioniert #titlebar { order: 1 !important; }, Fensterbuttons noch bei Bedarf verschieben oder ausblenden, und fertig.

    Andreas hat erwähnt dass das in Windows mit aktuellem Fx wohl nicht mehr klappt, kann ich aber halt nichts zu sagen; dein Code klappt am Mac so nicht.

    Es gibt wie immer was von MrOtherGuy, das sieht aktuell aus (benutzt auch order?); den von 2002Andreas finde ich gerade nicht.

    Für eine dicke Kante würde ich sowas probieren, ohne das ganze Padding und Margin unten und Verschieben (Ausnahme:

    #navigator-toolbox padding erhöht um Borderbreite), das geht auch bei mir im groben Schnelltest (aber: am Mac !):

  • Tabform

    Zitat von Mira_Belle

    Bugs.

    Wieder die fehlenden Vektorgrafiken.

    Korrektur:

    Da kann entweder die Grafik komplett fehlen, und dann macht dieser geänderte CSS Code gar keinen Unterschied, weil er nur die Kanten der Grafik betrifft.

    Oder du hast evtl. die Farben verändert bevor du den Code unverändert probiert hast, und in einem Profil ohne andere CSS; die Farben sind sonst eigentlich festgemeisselt.

    Zitat von Mira_Belle

    Code für Tabs unten

    Da habe ich lange für gebraucht, dass das Ergebnis gut ausschaut.

    Bei allen anderen Ideen, die ich hatte, war nie das Ergebnis zufriedenstellend.

    Andere Baustelle, aber der Code ist ... Müll. Sorry. ;)

    Zuerst mal, calc( var(--tab-min-height) + 10px ); kommt aus deinem Tabs unten Code, nicht von mir - damit will ich nichts zu tun haben. ;)

    Generell ist --tab-min-height eine interne Firefox Variable, mit der man eine Menge Sinn und Unsinn anrichten kann, genauso wie mit --tab-block-margin.


    Die var(--ug-corner-size) Regeln in dem Beispiel kommen mir teilweise auch unbekannt vor - hast du daran selber was gedreht, oder von alten Versionen übernommen?

    Falls ja - keine gute Idee. 8)

    --ug-corner-size ist schlicht eine selber gemachte Variable für die Höhe und Breite der Eckengrafik, und gleich mit --tab-min-height, die ganz oben neu definiert wird.

    Und eigentlich nur deshalb um den schwachsinnigen Kompaktmodus mit zu bedienen. X/

    Der Code ist eigentlich nur dafür gedacht die Farben im oberen Bereich zu ändern und ein evtl. paar Kleinigkeiten für Buttons etc., und sieht keine anderweitige CSS vor die eingreift oder manche Teile überschreibt - wofür man auch nicht planen kann.

    Wenn also der Code in einem sonst unveränderten Testprofil nicht funktioniert, kann ich mir das gerne anschauen.

    Andernfalls eben nicht. :|

  • Tabform

    Zitat von Mira_Belle

    Horstmann

    Die letzte, neue Version gefiel mir sehr gut, vielen Dank.
    Ich habe noch ein paar Kleinigkeiten verändert, klitzekleine Bugs beseitigt und Farben angepasst.

    Hier das komplette CSS

    Prima! :)

    Was für Bugs hast du denn selber noch gefunden/geändert, gibt ja bestimmt noch einige?

    Die Border unten war in meinem Setup aber so gewollt, macht die seitlichen runden Kanten sauberer, aber das hängt von den anderen Farben etc. ab.

    Sonst hab ich auf den ersten Blick nichts gesehen, ausser dass dein Code für Tabs unten bei mir gar nicht funktioniert, aber das ist nur weil ich auf einem Mac bin. ;)

    Trotzdem sieht der Code dafür nicht dolle aus, würd ich bei Gelegenheit nochmal rangehen.

  • Tabform

    Zitat von Mira_Belle

    Werde ich machen, danke.

    Aufgeräumt und besser kommentiert, eine Version für dein dunkles Theme, ist evtl. einfacher zu arbeiten mit.

    Edit: mehr Overflow Bug Fixes.

  • Tabform

    Zitat von Mira_Belle

    Da nun an dieser Stelle die Entwicklung eingestellt wird, kann ich mich ja beruhigt an eine verbesserte Version

    der meinigen machen.

    Bevor ich den dringend nötigen Termin bei der Suchtberatung mache ;) - einen könntest du vielleicht noch testen. 8)

    Der hier sollte kaum noch Auffälligkeiten im Overflow haben, und sollte besser als der ältere Code sein den du benutzt...
    Farben kann man wieder komplett oben anpassen, ist hier zum Testen auf ein helles Profil eingestellt.

    Für dein Theme wie du es benutzt, könnte sowas evtl. ein Anfang sein:

  • Tabform

    Zitat von Mira_Belle

    Und was genau hast Du geändert?

    Denn rein von der Optik sehe ich keinen Unterschied

    und auch das Überlaufproblem besteht noch.

    Wobei, wenn ich genau hinschaue, es ist nicht mehr gar so krass.

    Hmm, stimmt leider. :/

    Ich denke ich lass es jetzt lieber bleiben; da sind zu viele Anpassungen in Firefox involviert in dem Bereich, mit dem Overflow und angehefteten Tabs, das krieg ich einfach nicht sauber hin. ;( ;)

  • Tabform

    Zitat von Mira_Belle

    Na da bin ich aber mal gespannt. 8o Kann es kaum erwarten.

    Und betrifft es wieder den kompletten Code,

    oder nur einen bestimmten Teil, bestimmte Selektoren?

    Ich habe am Rest natürlich auch wieder rumgefummelt ;) , aber generell ist der Code in der Basis der selbe.

    Du solltest eigentlich - ohne irgendwo unten reinzugehen - alle Farben im oberen General adjustments Block einstellen können.

    Die unter Tableisten Kante hab ich mal rausgeworfen und mit was Anderem ersetzt, es geht ja nur um Abrenzung, oder?

    Aber das kann man aufbauen wie man will, da gibt es zig Möglichkeiten.

    Hier ist mein momentaner Testcode; den hab ich nur kurz in Fx119 getestet, ist immer ein Akt das System anzuwerfen, aber sah ok aus.

    Die Grafik ist hier auch wieder eingebunden.

  • Blauer Rahmen um Tabbar oder Titlebar

    Zitat von Nikolaus2001at

    Hallo zusammen,

    nachdem ich gestern abend in Bastellaune war hab ich mir mit unten stehenden css Code einen blauen Rahmen um meine Tabbar oder Titlebar gebaut.

    Warum so kompliziert; der Rahmen soll jeweils einmal rund um die Tableiste und die Navbar gehen, korrekt?

    Border würde ich dazu eher nicht benutzen, weil das ins Layout eingreift (v.a. in der Navbar, sieht man gut an deinem Screenshot) und Grössen verändert; vielleicht eher sowas?

    CSS
     /* Tab-Bar, Navbar: Blauer Rahmen  */

#TabsToolbar, #nav-bar {
    /*border: 2px solid #00bbff !important;*/
    border-image:  linear-gradient(#00bbff, #00bbff) 1 / 2px !important;
}

  • Tabform

    Auf den Punkt getroffen! :)

    Ich habe eine Lösung für den Überlauf, aber dann verändern sich die Breiten je nach gewählter/nicht gewählter etc. Tab.

    Dafür hab ich im Prinzip auch eine Lösung - aber die hat noch einen massiven Bug... :/

  • Tabform

    Zitat von Mitleser
    Zitat von Horstmann

    Wenn du einen direkt mit dem Code anwendbaren, und für den Code funktionierenden Vorschlag für eine Lösung hast

    Nö, habe ich nicht. Damit habe und werde ich mich auch nicht beschäftigen, 'form follows funktion' ist bei diesem Thema auch nicht Programm, sondern eher 'mir ist gerade langweilig'. Entschuldigung für den vorherigen Beitrag.

    Also mal kurz vorbeigeschaut um über unser nutzloses Getue die Nase zu rümpfen, hmm? 8)

    Vielleicht nicht ganz im Geiste dieses Unter-Forums, aber was weiss ich schon. ;)

    Zitat von Mira_Belle

    Apropos, Du hast zwar --ug-color3 definiert, aber diese "Farbe" kommt gar nicht zur Anwendung!

    Die soll wohl für die Linie zwischen den Tabs und dem Fensterinhalt sein, richtig?

    Richtig; einiges an Einträgen wird nicht benutzt, ist aber noch da als eventuelle Option und weil es halt immer noch ein Test ist, kein fertiger Code.

    Sorry dass es so kompliziert ist und sich dauernd ändert, aber es hängt halt so vieles zusammen und voneinander ab... ?(

    Wenn es denn je fertig wird... ;)

    Der Overflow ist die ultimative Hürde; das nervt wirklich.

    Ich bin momentan dabei die Tabs komplett neu aufzubauen, mit den Rundungen innerhalb vom Tab selber, aber erst mal schauen ob was geht damit.

    Der letzte Code sollte eigentlich fast funktionieren im Overflow, mit wenigen Ausnahmen, aber ist halt wirklich übles Gehacke; das muss besser gehen. :!: ;)