[Stylish] Tabs anpassen (Firefox 3.5)

  • Ein paar Codes mit dem man die Tabs nach eigenen Wünschen anpassen kann.

    Damit kann man die Höhe und die Breite der Tabs bestimmen

    CSS
    margin: 0px 0px 0px 0px !important;

    Mit Color bestimmt man die Schriftfarbe

    CSS
    color: #fff !important;

    Schrift mittig setzen

    CSS
    .tab-text {text-align: center !important;}

    Schriftgröße ändern

    CSS
    font-size: 9.5pt !important;

    Schriftdicke ändern (bold, bolder, normal)

    CSS
    font-weight: bold !important;

    Schriftart ändern (sans-serif,Tahoma, Arial usw.usw)

    CSS
    {font-family: Verdana !important;}

    Tab - Icon ausblenden

    CSS
    .tab-icon-image {display: none !important;}

    Tab - Schliessen Schaltfläche ausblenden

    CSS
    .tab-close-button {display: none !important;}

    Farblich verändern unter Verwendung von Base 64 - Farben
    Weitere Farbcodes >>>> [Stylish] Buttons - Base64 (Firefox 3.5)

    Aktiver Tab (Blau)

    CSS
    .tabbrowser-tab[selected="true"]
    { -moz-appearance: none !important; margin: 0px 0px 0px 0px !important;background: url("data:image/png;base64,iVBORw0KGgoAAAAN
    SUhEUgAAAAEAAAAjCAIAAADaE/fjAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAYklEQVR4nAXBSw7CQAxEwfYzn1E4IVsuzwIiViiaBLup0v1huotuYSdVTbcpQ5Won6
    k2btPHgSTmnHzeT9b1xbZ9ySgyQS7cO4ogleDENiVhBRHQOmOJIMnrIE/JGAuXcfsD4hY4dKR+hIoAAAAASUVORK5CYII=") !important; color: #00ffff !important; }


    [Blockierte Grafik: http://www.abload.de/img/1421u.png]

    Aktiver Tab - Hover (Rot)

    CSS
    .tabbrowser-tab[selected="true"]:hover{ text-align: center !important; margin: 2px 5px 0px 0px !important; color: #fff !important;
    -moz-appearance: none !important; background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAZCAIAAAB/8tMoAAAACXBIWXMAAAsTAAALEwEAmpwYAAAA
    QElEQVR4nEXLsRHEMAwDwcON+2/O1fyIFBz+5sv7PBa8rUvdiwMecBN/rRM8iYd6wKHe4gancYPb/xvigAtO+QCL3SSum+CNiAAAAABJRU5ErkJggg==")  !important;}


    [Blockierte Grafik: http://www.abload.de/img/1bkdua.png]

    Inaktiver Tab (Schwarz)

    CSS
    .tabbrowser-tab:not([selected="true"])
    { margin: 2px 5px 0px 0px !important; -moz-appearance: none !important; background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAaCAIAAAD5Zq
    GGAAAACXBIWXMAAAsSAAALEgHS3X78AAAAKUlEQVQIW2OYO3cu058/f5h+/frF9Pv3bzAGsUH458+fKPSPHz8YyAQAlpAiKDKcgAsAAAAASUVORK5CYII=") !important; color: #fff !important; }


    [Blockierte Grafik: http://www.abload.de/img/1421u.png]

    Inaktiver Tab - Hover (Dunkelblau)

    CSS
    .tabbrowser-tab:not([selected="true"]):hover 
    {background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAtCAIAAADgGZaTAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAAYklEQVR4nD3OwQ3CUBDE0Plujl4ojt4IkYICO+aA4OrL
    cy7XG22xRSUJVrRESSSKLW3pv5WF2HAcT7btzr4/eJ0n7xk6gx1iWGuRtWgHZ75WgpHk54QabIlDImbR30skWWg+HetayAV1bVoAAAAASUVORK5CYII=") repeat center !important; color: #fff !important; }


    [Blockierte Grafik: http://www.abload.de/img/1g5nvq.png]


    Farblich verändern unter Verwendung von HTML - Farben
    Weitere HTML - Farben >>>>> http://tomheller.de/theholycymbal/html-farben.html

    Aktiver Tab (Rot)

    CSS
    .tabbrowser-tab[selected="true"]
    { -moz-appearance: none !important; margin: 0px 0px 0px 0px !important;background: #ff0000 !important; color: #fff !important; }


    [Blockierte Grafik: http://www.abload.de/img/4q2uz.png]

    Aktiver Tab - Hover (Grün)

    CSS
    .tabbrowser-tab[selected="true"]:hover
    { text-align: center !important; margin: 2px 5px 0px 0px !important; color: #000 !important;-moz-appearance: none !important; background: #00ff00  !important;}


    [Blockierte Grafik: http://www.abload.de/img/41l4eb.png]

    Inaktiver Tab (Orange)

    CSS
    .tabbrowser-tab:not([selected="true"])
    { margin: 2px 5px 0px 0px !important; -moz-appearance: none !important; background: #ffc800 !important; color: #000 !important; }


    [Blockierte Grafik: http://www.abload.de/img/42o0hf.png]

    Inaktiver Tab - Hover (Dunkelrotbraungemisch)

    CSS
    tabbrowser-tab:not([selected="true"]):hover{background: #800000 !important; color: #fff !important; }


    [Blockierte Grafik: http://www.abload.de/img/43fxnc.png]

    Gruß MK204

    Mozilla/5.0 (Windows NT 5.1; rv:19.0) Gecko/19 Firefox/19.0b2

  • Hier auch noch ein paar Tabsachen:

    • Da ich es nicht bunt mag, lasse ich bei mir inaktive Tabs transparent darstellen, wodurch sie einfach nur etwas "schwächer" sind, was den aktuellen Tab hervorhebt:

      CSS
      #content tab:not([selected="true"]) {
      opacity: 0.5 !important;
      }
    • Dann noch ein Userstyle, der den Throbber oval darstellt. Mal etwas anderes, dazu ein schlanker Code.
      http://userstyles.org/styles/15434
    • Zu guter Letzt etwas, was ich seit kurzem liebe: Die Tableiste ganz oben:
      http://userstyles.org/styles/10253

    Funktioniert alles auch über die userchrome.css.

  • Das Wort : ....Unbenannt.. entfernt aus leerem Tab:

    CSS
    @namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);
    
    
    [value="(Unbenannt)"]{
    
    
    margin: -52px 0px 0px 0px !important;}

    Button für: ...Neuer Tab... entfernt:

    Code
    @-moz-document url(chrome://browser/content/browser.xul) {
    
    
    .tabs-newtab-button {
    display: none !important } }
  • Einzeln und unter entsprechender Beachtung auch für userChrome.css oder als css- Datei in der userChrome.css einbindbar.

    [1] https://developer.mozilla.org/en/CSS/-moz-box-shadow

  • Button für: ...Alle Tabs anzeigen... entfernt:

    CSS
    @namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
    
    
    .tabs-alltabs-button{
    -moz-appearance: none !important;
    display:none !important}

    Tabs mittig:

    Code
    @-moz-document url(chrome://browser/content/browser.xul) {
    
    
    .tabbrowser-tabs .scrollbox-innerbox {
    -moz-box-pack: center !important }}

    Tab - Text zentrieren:

    Code
    @-moz-document url(chrome://browser/content/browser.xul) {
    
    
    .tab-text {
    text-align: center !important}}
  • Zitat von 2002Andreas

    Button für: ...Alle Tabs anzeigen... entfernt:

    CSS
    @namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
    
    
    .tabs-alltabs-button{
    -moz-appearance: none !important;
    display:none !important}


    Ich denke, der nachfolgende vereinfachte Code erfüllt auch die gewünschte Entfern- Funktion :wink: .

    Code
    @namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
    
    
    .tabs-alltabs-button {
         display:none 
         }


    Das Setzen von -moz-appearance [1] und !important [2] wäre dann nicht erforderlich!

    [1] https://developer.mozilla.org/en/CSS/-moz-appearance
    [2] http://de.selfhtml.org/css/formate/kaskade.htm#ursprung