eckige Tabs bei Quantum abrunden

Du benötigst Hilfe bezüglich Firefox? Bitte stelle deine Frage im öffentlichen Bereich des Forums und nicht per Konversation an wahllos ausgesuchte Benutzer. Wähle dazu einen passenden Forenbereich, zum Beispiel „Probleme auf Websites“ oder „Erweiterungen und Themes“ und klicke dann rechts oben auf die Schaltfläche „Neues Thema“.
  • Bis auf pingelig genaue Schreibweise ist sonst nichts nötig. Den genauen Profilorder (vielleicht gibt es ja noch einige alte Überbleibsel?) erfährt man mit Hilfe - Informationen zur Fehlerbehebung - Profilverzeichnis -> Ordner öffnen. Darunter dann der Ordner "chrome" und darin die reine Textdatei "userChrome.css". Nicht mit Word bearbeiten sondern mit Notepad oder ähnlichem.

    FF aktuell, 64Bit, Linux, Manjaro mit KDE

  • In der "userChrome.css" habe folgendes Codes drinnen:


    Vielleicht siehst Du, wo bei den Codes etwas verkehrt ist.
    Ich weiß mir keinen Rat mehr.
    Der chrome Ordner ist bei mir dort wie Du es beschrieben hast.

    Gruß Martin


    Windows 10 Home


    FF 72.0.1 (64-Bit)

  • Oha. :D
    Mal abgesehen davon, dass in einem deiner base64-Icons ein Zeilenumbruch drin war, genügt es, wenn @-moz-document url-prefix(){} einmal drin ist. Alle Anweisungen werden innerhalb davon eingegeben. :)
    Teste mal, ob das so hinhaut:

    Windows 10 | FF 62.0 (64-Bit) / FF 61.0 (64-Bit) / FF 63.0 (64-Bit)

  • Hallo Martin, dieser Code (aus Beitrag 52, leicht modifiziert und mit den "schiefen" Ecken) alleine funktioniert. Wenn noch anderer Code dazu kommt, kann sich was "beißen". Da muß man schauen ob die gleichen Elemente auch angesprochen werden und was dann gültig ist. Vor allem die @namespace-Zeile nur einmal und am Anfang. Kann aber glaube ich auch weg...



    Gruß Harry

    FF aktuell, 64Bit, Linux, Manjaro mit KDE

  • Hallo Harry, hallo EffPeh,


    vielen Dank für Eure Hilfe! :D:klasse:
    Der Code von EffPeh hat mir letzten endes weiter geholfen.
    Wenn es dieses Forum mit Euch Helfern nicht geben würde, wären Menschen wie ich aufgeschmissen!!

    Gruß Martin


    Windows 10 Home


    FF 72.0.1 (64-Bit)

  • Danke an Tommy Tulpe und an alle, die hier solche hübsche CSS hochgeladen und verlinkt haben. Ich hätte gern, dass die Farbe der Leiste (Pfeil von unten - s. Screenshot) und die Farbe des Tabs (Pfeil von oben) gleich sind. Wie erreiche ich das?



    [attachment=0]2017-11-19.png[/attachment]

  • Einen oder beide Farbwerte anpassen:

    CSS
    #TabsToolbar .tabbrowser-tab[selected="true"] {
    background: yellow !important;
    }
    #nav-bar {
    background: yellow !important;
    }


    So in etwa (ungetestet)...


    Gruß Harry

    FF aktuell, 64Bit, Linux, Manjaro mit KDE

  • Hallo Harry, das

    CSS
    #TabsToolbar .tabbrowser-tab[selected="true"] {
    background: yellow !important;
    }


    funktioniert nur bei den Standard Tabs, aber nicht bei der abgerundeten Variante.


    Der Hintergrund der Tabs besteht glaube ich aus 3 Teilen die man jeweils einzeln ansprechen musste.

  • Sorry, da hatte ich übersehen. Aber den fremden Code analysieren - das dauert...


    Aber wenn man nur die Leistenfarbe an die bestehende Farbe des Tabs anpaßt muß es doch gehen, oder?


    Gruß Harry

    FF aktuell, 64Bit, Linux, Manjaro mit KDE


  • die Leistenfarbe an die bestehende Farbe des Tabs anpaßt


    Du kannst beiden die gleiche Farbe geben, das ist nicht das Problem.
    Das Problem sind eben die abgerundeten Tabs.
    Früher hieß das:
    tab-start
    tab-middle
    tab-end
    und waren 3 verschiedene Grafiken.


    Und die sind es wohl jetzt auch noch:

    CSS
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' xmlns:svg='http://www.w3.org/2000/svg' width='30px' height='31px' preserveAspectRatio='none'><defs><svg:clipPath id='tab-curve-clip-path-start' clipPathUnits='objectBoundingBox'><svg:path d='m 1,0.0625 0.05,0 0,0.938 -1,0 0,-0.028 C 0.32082458,0.95840561 0.4353096,0.81970962 0.48499998,0.5625 0.51819998,0.3905 0.535,0.0659 1,0.0625 z'/></svg:clipPath><svg:clipPath id='tab-curve-clip-path-end' clipPathUnits='objectBoundingBox'><svg:path d='m 0,0.0625 -0.05,0 0,0.938 1,0 0,-0.028 C 0.67917542,0.95840561 0.56569036,0.81970962 0.51599998,0.5625 0.48279998,0.3905 0.465,0.0659 0,0.0625 z'/></svg:clipPath><svg:clipPath id='tab-hover-clip-path' clipPathUnits='objectBoundingBox'><svg:path d='M 0,0.2 0,1 1,1, 1,0.2 z'/></svg:clipPath></defs><foreignObject width='30' height='31' clip-path='url(%23tab-curve-clip-path-end)'><div id='tab-background-fill' style='background-color:rgb(255,255,255);background-repeat:no-repeat;height:100%;width:100%;' xmlns='http://www.w3.org/1999/xhtml'></div></foreignObject></svg>") !important;
  • Der Hintergrund des Tabs auf dem Bild ist doch weiß? Dann braucht es doch nur noch:

    CSS
    #nav-bar {
    background: #fff !important;
    }


    Dann ist die Nav-Leiste auch weiß und beides ist doch gleich?


    Gruß Harry

    FF aktuell, 64Bit, Linux, Manjaro mit KDE

  • Hier mal ein Bild wenn der Tab schwarz werden soll, es ist nur die linke Hälfte wie du sehen kannst.

    Code
    data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' xmlns:svg='http://www.w3.org/2000/svg' width='30px' height='31px' preserveAspectRatio='none'><defs><svg:clipPath id='tab-curve-clip-path-start' clipPathUnits='objectBoundingBox'><svg:path d='m 1,0.0625 0.05,0 0,0.938 -1,0 0,-0.028 C 0.32082458,0.95840561 0.4353096,0.81970962 0.48499998,0.5625 0.51819998,0.3905 0.535,0.0659 1,0.0625 z'/></svg:clipPath><svg:clipPath id='tab-curve-clip-path-end' clipPathUnits='objectBoundingBox'><svg:path d='m 0,0.0625 -0.05,0 0,0.938 1,0 0,-0.028 C 0.67917542,0.95840561 0.56569036,0.81970962 0.51599998,0.5625 0.48279998,0.3905 0.465,0.0659 0,0.0625 z'/></svg:clipPath><svg:clipPath id='tab-hover-clip-path' clipPathUnits='objectBoundingBox'><svg:path d='M 0,0.2 0,1 1,1, 1,0.2 z'/></svg:clipPath></defs><foreignObject width='30' height='31' clip-path='url(%23tab-curve-clip-path-start)'><div id='tab-background-fill' style='background-color:rgb(50, 50, 52);background-repeat:no-repeat;height:100%;width:100%;' xmlns='http://www.w3.org/1999/xhtml'></div></foreignObject></svg>
  • Hilft eine höhere Gewichtung weiter?

    CSS
    #main-window #navigator-toolbox #nav-bar {
    background: #fff !important;
    }


    oder ist in der nav-bar auch ein Hintergrundbild? Dann dieses abschalten mit background-image: none;
    Gruß Harry

    FF aktuell, 64Bit, Linux, Manjaro mit KDE