ERLEDIGT! [Stylish] Tab-Leiste: Schließen-Button vergrößern

  • Habe diverse Modifizierungen im Fuchs und im Firefoxforum per Userchrome.css und Stylish vorgenommen. Ich möchte nun noch gern das Kreuz zum Schließen in den Tabs (siehe Screen) etwas vergrößern. Wie heißt der Code, den ich wohinein schreiben muss?
    Bitte nicht den DOM-Inspektor empfehlen, damit komme ich nicht klar.
    Dankeschöön
    [attachment=0]Schliessen Tab.jpg[/attachment]

    BTW:
    Im Einführungsthread" Was ist die Schrauberecke?" Ist dieser Link https://www.camp-firefox.de/forum/viewtopic.php?f=4&t=45294 tot, bzw. ergibt das Ergebnis

    Zitat

    Das von dir ausgewählte Thema existiert nicht.

  • CSS
    .tabbrowser-tab .tab-close-button .toolbarbutton-icon {
    border: 2px solid !important;border-color: #0000cc !important;-moz-border-radius: 5px !important;margin-right:-2px!important;}

    Gruß MK204

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

  • Danke für eure Beiträge:
    @ Miccovin: wie vergrößere ich sowas per Hand?
    @ MK204: Dein Code macht mir einen Rahmen um den Schliessen-Button, ich will ihn nur etwas Größer...

  • Hab grad noch einen gemacht - probier mal

    CSS
    .tabbrowser-tab .tab-close-button .toolbarbutton-icon {border-color: #fff !important;border: 2px solid !important;
    background: #ff0000  !important; color: white !important;min-height: 15px !important; max-height: 25px !important; height: 18px !important;margin: 0px 0px 0px 5px !important; }

    EDIT: noch einer - diesmal mit Bild (Bild mit blauer 1)

    CSS
    .tab-close-button, .tabs-closebutton, 
    #find-closebutton {list-style-image: url("http://www.abload.de/img/24oobz.gif") !important;-moz-image-region: rect(0, 25px, 25px, 0) !important;}

    einen hab ich noch - diesmal mit Hover (Orange 1)

    CSS
    .tab-close-button:hover {list-style-image: url("http://www.abload.de/img/24oobz.gif") !important;-moz-image-region: rect(0px 22px, 22px, -2px) !important;}
    
    
    .tab-close-button {list-style-image: url("http://www.abload.de/img/243fxqw.png") !important;-moz-image-region: rect( 0px, 22px, 22px, -2px) !important;}
  • Danke für die Mühe! Ich nutze den leicht modifizierten Code:

    CSS
    .tabbrowser-tab .tab-close-button .toolbarbutton-icon {border-color: #ff0000 !important;border: 1px solid !important;
        background: #ff0000  !important; color: white !important;min-height: 18px !important; max-height: 20px !important; height: 22px !important;margin: 0px 0px 0px 1px !important; }


    So ganz gefällt es mir zwar noch nicht, aber damit kann ich leben! 8)
    Die roten Punkte an den Ecken und die weiße Linie um den Button herum könnten noch weg.[attachment=0]Schliessen Tab.jpg[/attachment]

  • Auch wenn du noch nicht ganz zufrieden bist, könntest du bitte das Thema umbennen:
    [userChrome.css] Tab-Leiste: Schließen-Button vergrößern

  • Boersenfeger:
    "Vergrössern per Hand": Damit meine ich, dass Du die Bilddatei mit mit dem Grafikprogramm Deines Vertrauens bearbeitest (Sicherungskopie nicht vergessen). Abschließend an den alten Platz zurück oder - besser - mit einem Code einbinden. Der bleibt dann auch nach einem Fx.Update bestehen.
    Die originale Bilddatei sollte sich im Programmordner in irgendeiner jar-Datei verstecken. Da müsstest Du selbst suchen.

  • Viel zu suchen gibt es da ja nicht, es wird prinzipiell ein µTheme gebaut und das Original findet sich unter <Programmordner>/chrome/classic.jar, das man an einen beliebigen Platz entpackt.

    1.) im Ordner /skin/classic/global/icons/ findet man close.png, die nach <Profilordner>/chrome kopiert wird
    2.) im Ordner /skin/classic/browser/ findet man browser.css, in der sich die Anweisungen für .tab-close-button (Suche mit einem Editor) befinden. Diese dienen als Vorlage für die Ergänzungen der userChrome.css.

    Nach der Anpassung der Grafik sind dann u.a. folgende Zeilen anzupassen

    Zitat von userChrome.css

    -moz-image-region: rect(0px, 56px, 14px, 42px);
    list-style-image: url("chrome://global/skin/icons/close.png");

    grün == neue Dimension
    rot == streichen

  • Nach Hin-und Herprobieren bleibt nun dieser Code übrig:

    CSS
    /* Tab-Schliessen-Button größer */
     .tab-close-button
     .toolbarbutton-icon {border-color: #DD0000 !important; 
    min-height: 16px !important; 
    max-height: 22px !important; 
    height: 22px !important;
    margin: 2px 3px 0px 1px !important; }


    Ohne Code:
    [attachment=0]Ohne Code schliessen.jpg[/attachment]

    Mit Code:
    [attachment=1]Schliessen Tab.jpg[/attachment]
    Das Ergebnis ist für mich das Optimalste.
    Die Bastelei in der classic.jar habe ich versucht, aber nicht hinbekommen.
    Da bastle ich wohl zu wenig, um es zu raffen.
    Danke an Alle, die geholfen haben.