leider funktionert der Code für die abgerundeten Tabs auch bei mir mit ff 70 nicht
Der Code funktioniert einwandfrei im Fx 70.
Firefox 70.0. 64 Bit Win 7
-
Herman4 -
23. Oktober 2019 um 14:09 -
Erledigt
-
-
Ja das Bild hab ich gesehn und glaub dir, nur bei mir gehts auch nicht, warum auch immer. Der von mir gefundene geht.
Wollte es nur mal anmerken, brauchs ja ned
Nix für ungut
-
Mein Fehler, dein Code funktioniert, man sollte schon alles richtig kopieren, hatte ne Klammer vergessen. Sorry.
Da ne Bekannte das auch so möchte hab ich den Code jetzt von dir genommen, aber leider hab ich bei ihr und auch bei mir ein kleines Problem. Wir haben beide nen viereckigen Hintergrund beim aktiven Tab unabhängig vom Theme welches wir benutzten.
Wie kriegt man denn das weg
Danke schon mal
-
nen viereckigen Hintergrund beim aktiven Tab
Kann ich hier nicht bestätigen
Teste bitte mal:
CSS
Alles anzeigen.tabbrowser-tab:not([selected="true"]) > .tab-stack > .tab-background { background: none !important; } #TabsToolbar { margin-bottom: 1px !important; } .tab-background[selected="true"], .tabbrowser-tab:not([selected="true"]) { border-radius: 80px !important; border: 1px solid black !important; } .tabbrowser-tab::after, .tabbrowser-tab::before { margin-inline-start: 0px!important; border-left: 0px solid!important; border-image: none !important; border-image-slice: 0 !important; width: 0px !important; box-sizing: border-box; opacity: 0 !important; } .tab-line { display: none !important } -
Mensch geht die Hilfe hier aber flott, kenn ich aus anderen Foren auch anders, muss ja auch mal gesagt werden, danke
Nein klappt auch nicht, sorry. Nur wenn man bei Windows den klassischen Stil einstellt gehts., aber da sieht Windows sehr bescheiden aus.
-
Bitte auch mal testen:
CSS
Alles anzeigen#TabsToolbar { margin-bottom: 2px !important; } #TabsToolbar .tabbrowser-tab .tab-line { display: none !important; } #TabsToolbar .tabbrowser-tab { margin-left: 1px !important; } #TabsToolbar .tabbrowser-tab, #TabsToolbar .tabbrowser-tab .tab-background { background: unset; border-radius: 80px !important; border: 1px solid rgba(0,0,0,0.33) !important; } /* TabLabel settings */ .tabbrowser-tab .tab-label { text-shadow: 1px 1px 1px #000000 !important; font-weight: normal !important; font-size: 12px !important; font-family: "Arial" !important; color: white !important; } .tabbrowser-tab .tab-label:not(:-moz-lwtheme) { text-shadow: none !important; color: black !important; } .tabbrowser-tab .tab-label[selected="true"] { text-shadow: 1px 1px 1px #000000 !important; color: white !important; font-weight: normal !important; font-size: 12px !important; font-family: "Arial" !important; } /*--- selektiert ---*/ .tab-background[selected=true]:not(:-moz-lwtheme) > spacer { background-image: linear-gradient( rgba(103,171,224,1), rgba(10,58,95,1) ), none !important; /* blau */ /*background-image: linear-gradient( rgba(230,175,175,1), rgba(84,25,25,1) ), none !important;*/ /* rot 1*/ /*background-image: linear-gradient( rgba(245,155,155,1), rgba(84,25,25,1) ), none !important;*/ /* rot 2*/ filter: drop-shadow(4px 3px 2px rgba(0,0,0,0.33)) drop-shadow(-4px 3px 2px rgba(0,0,0,0.33)) !important; border-radius: 80px !important; } .tab-background[selected=true]:-moz-lwtheme > spacer { background-image: linear-gradient( rgba(103,171,224,1), rgba(10,58,95,1) ), none !important; filter: drop-shadow(3px 3px 2px rgba(0,0,0,0.33)) drop-shadow(-2px 3px 2px rgba(0,0,0,0.33)) !important; border-radius: 80px !important; } /*--- hover(nicht selektiert) ---*/ .tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected=true]):not(:-moz-lwtheme) > spacer { background-image: linear-gradient( rgba(255,255,255,1), rgba(115,115,115,1) ), none !important; filter: brightness(130%) contrast(95%) drop-shadow(1px 1px 1px rgba(0,0,0,0.33)) drop-shadow(-1px 1px 1px rgba(0,0,0,0.33)) !important; border-radius: 80px !important; } .tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected=true]):-moz-lwtheme > spacer { background-image: linear-gradient( rgba(225,225,225,0.66), rgba(100,125,145,0.66) ), none !important; box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.75); border-radius: 80px !important; } /*--- nicht selektiert ---*/ .tab-background:not([selected=true]):not(:-moz-lwtheme) > spacer { background-image: linear-gradient( rgba(255,255,255,1), rgba(125,125,125,1) ), none !important; filter: brightness(115%) contrast(90%) drop-shadow(1px 1px 1px rgba(0,0,0,0.33)) drop-shadow(-1px 1px 1px rgba(0,0,0,0.33)) !important; border-radius: 80px !important; } .tab-background:not([selected=true]):-moz-lwtheme > spacer { background-image: linear-gradient( rgba(255,255,255,0.33), rgba(110,110,110,0.33) ), none !important; box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.75); border-radius: 80px !important; } /*--- Multi-selektiert ---*/ .tab-background[multiselected=true]:not([selected=true]) { background-image: linear-gradient( rgba(225,225,225,1), rgba(50,98,135,1) ), none !important; border-radius: 80px !important; } .tabbrowser-tab:hover > .tab-stack > .tab-background[multiselected=true]:not([selected=true]) { background-image: linear-gradient( rgba(225,225,225,1), rgba(50,98,135,1) ), none !important; border-radius: 80px !important; } -
Leider nein, hab auch scon alles andere deaktiviert, addons scripte
-
Dann versuche mal diesen Code, läuft bei mir bis zur aktuellen Nightly. Farben sind alle anpassbar. Ich nutze Tabs nur oben abgerundet, wenn du unten dazu haben willst, kein Problem.
CSS
Alles anzeigen/**********************************************************************************************************/ /************************ Anpassen der TAB-Leiste *********************************************************/ /**********************************************************************************************************/ /*** inaktiver Tab Rand Stärke und Farbe ****************/ .tab-background[selected="true"], .tabbrowser-tab:not([selected="true"]) { border-radius: 10px 10px 0 0 !important; border: 1px solid #4682B4 !important; } /****** entfernt störende Teile des Tab-Hintergrundes ********/ .tabbrowser-tab::after, .tabbrowser-tab::before { margin-inline-start: 0px!important; border-left: 0px solid!important; border-image: none !important; border-image-slice: 0 !important; width: 0px !important; box-sizing: border-box; opacity: 0 !important; } /************* Tabschliessen-Button ****************/ .tab-close-button.close-icon{ display: -moz-box !important; width: 20px; height: 20px !important; border: none !important; border-radius: 5px !important; background-color: none !important; } .tab-close-button { color: red !important; /* Farbe des Kreuzes */ } /**** blendet den Hintergrund aller Tabs aus *******/ .tab-background { background: none !important; } /*** nicht aktiver Tab ändert Farbe nach Überfahren mit der Maus ******/ .tabbrowser-tab:hover { background-image: linear-gradient(to top, gold 30%, yellow 60%)!important;/*background: yellow !important;*/ color: black !important; } /************* Hintergrund aktiver Tab ****************/ .tab-background[selected] { background-image: linear-gradient(to top, orange 15%, yellow 90%)!important;/*background: gold !important;*/ border-radius: 10px 10px 0 0 !important; border: 1px solid black !important; } /************* Schrift aktiver Tab ****************/ .tabbrowser-tab[selected] { background: none !important; font-weight: bold !important; /* fette Schrift */ } /************* Schrift im Zentrum des Tabs ****************/ .tab-label { -moz-box-flex: 1 !important; text-align: center !important; } /*********** Abstand zwischen den Tabs ******************/ .tabbrowser-tab { margin-left: 1px !important; } /********** obere sichtbare Tablinie entfernt ****************/ .tab-line { display:none!important } /*** doppelte graue Linie unter der Tabs-Toolbar entfernt ***/ #nav-bar{ box-shadow: none !important; } /******* Höhe und Breite der Tabs einstellen ********/ .tabbrowser-tab{ max-height: 24px!important; -moz-box-flex: 0!important; width: 180px!important; /** Breite der Tabs **/ } /******** Icon im Tab versetzt ********************************/ #TabsToolbar .tab-icon-image { height: 15px !important; width: 15px !important; margin-left: -4px !important; margin-bottom: 2px !important; } /****************/ -
Und der obere CSS-Code ist das einzige, was in deiner userChrome.css steht?
So wie es aussieht wurde (fast) nichts von dem Code übernommen.
Kannst du mal den Inhalt deiner userChrome.css hier posten...
-
Das steht im Moment drin, mehr nicht. Auch mit ändern des Wertes auf 2px hat sich nichts geändert
CSS
Alles anzeigen.tabbrowser-tab:not([selected="true"]) > .tab-stack > .tab-background { background: none !important; } #TabsToolbar { margin-bottom: 1px !important; } .tab-background[selected="true"], .tabbrowser-tab:not([selected="true"]) { border-radius: 80px !important; border: 1px solid black !important; } .tabbrowser-tab::after, .tabbrowser-tab::before { margin-inline-start: 0px!important; border-left: 0px solid!important; border-image: none !important; border-image-slice: 0 !important; width: 0px !important; box-sizing: border-box; opacity: 0 !important; } .tab-line { display: none !important } -
Versteh ich jetzt nicht. Hast du den Code, den ich gepostet habe in die userChrome.css geschrieben und damit deinen alten Code ersetzt?
-
Fehler meinerseitz, entschuldige hab nur den einen Wert geändert. Moment machs gleich
-
mit deinem kompletten code, sieht man noch so ne Art Trennlinie zwischen den Tabs. Stärker link und rechts von aktiven Tab zeimlich schwach neben den inaktiven
-
-
Füge das noch zusätzlich in den Code ein:
CSS/* Tab-Seperatoren entfernen */ .tabbrowser-tab::after, .tabbrowser-tab::before { opacity: 0 !important; border-image: unset !important; border-image-slice: none !important; width: 2 !important; } -
Die graue Linie unter den Tabs bekommst du damit weg, zusätzlich einfügen:
CSS/*** doppelte graue Linie unter der Tabs-Toolbar entfernen ***/ #nav-bar{ box-shadow: none !important; } -
Perfekt jetzt muss ich noch mit den Farben spielen, danke
Wenn ich noch irgendwie rausfinde welcher Farbcode für was steht
-
ich hab noch so ne dünne Linie über den aktiven tab mit deinem Code
Nun waren wir ja erst einmal bei dem Code von @BrokenHeart, dafür waren jetzt die Code_Schnipsel gedacht. Wenn du die jetzt in den Code von BrokenHeart einfügst, dann ist alles bestens. Habe ich jetz probiert.
Nimmst du jetzt meinen Code, dann darfst du nichts weiter verwenden, außerdem musst du ein Theme von Mozilla installieren (ich habe Clouds), sonst werden die Farben nicht richtig dargestellt. Frage nicht warum, das Thema hatten wir schon mal.
