Firefox Tabs

heloschco

Wie kann man das Kreuz (schwarz) im Tab schließen Button weiß färben?

Lothar

2002Andreas

Hallo und Willkommen hier im Forum.

Einfach färben geht nicht, da es sich bei dem x um ein Bild handelt.
Du kannst dir aber ein eigenes Bild dazu nehmen, könnte dann so aussehen:

[Blockierte Grafik: http://www11.pic-upload.de/thumb/07.09.14/nja7lt93ffxj.jpg]

Das erreichst du mit diesem Code:

CSS

/*AGENT_SHEET*/


@-moz-document url-prefix(chrome://browser/content/browser.xul){


.tab-close-button.close-icon.always-right > image {
height: 0 !important;
width: 0 !important;}


.tab-close-button.close-icon.always-right {
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAADLUlEQVQ4jWWTS2hUZxzFf99377yTmel0mkfrGA2tlthK8UFpJxXyonThTloxorVQLNloKbiWLFINuumicWGhYtG2FiIuzCLQdiAiSmgXoaDBBHHMJDOTmUkmuTNz7zd3vi40IaVnd+Ccwx/+5witNVvxZSKRei0W2y4RIAQAWjfQQDafn/8hk+nbqje3ki/a26e+v3Yt6fc1AQZIA9CAAqmpWFbH5y0tf/yYy/VseMTGBSfi8amxsbFkaHoa3Ab4gi8CpAahQSnweil3demh06dTPxWLPZsBRyORqe8uX062pFIsrq+zGArxrtZ4mptASBzLYkZKttk2rbEYmf379ddnzqR+WVvrMWYuXUoNnz//ke/OHdKFApXjx3l9aIj5+/cJz85SKxSY7ewkMTxMVimK9+7hT6fF+ydPdnzV29ttvBcIDO9aWooUczk8hw6x99w5Qk1NBLu7+SeVotDSwtujo0SjUVr37SPz4AHFmRnU3Jx4mM1qUzmO+9fqKsF6nfjdu0QOHGDn4CDhaJSD16+DEEgpAXh+9SrFyUnKWlNfW6OhlGsqrfm7WiXeaFC2LKyzZ6mWSiROndo0uq7L4pUrzF68yJrHQ0FKykJQ1xqz0WiQy2apao0jBGXHwZyYIHT4MNIwQAjqtRoPJybILS9je70sac2qEDS0Rkoh2KUUO5Si2XFo7e9n78i3rFcqVByFZdtUHMWe0VE8HyapOg4BpXhVKRACo8vn++agEJFm16Wjr489IyM4jgMeD/WbN3EfP6b21pvYtRqtA/2IR4/wpdPE/X7mpSyZwraNXCzmvlOtGq+USoTyeVbf2EbT+DgrFy4gTZOIabIwMEB8bp4dKysUm5uZDoZsuZz3C601Rzyehd729rYPymXp372bcDKJc+MGxoumgWliHjuGNTmJ8/Qpv4fD9p+ZTP63ej2xWeVPvd6FI4lE28dKSa0U3mAQQwiEEGjXpW5ZCJ+Pca/Xvv3sWf6W4yT+swWAz/z+hcHOzrZPtJYeIeDlG7XW1LXmthDOrSdPcr/aduJ/Y9rA0UDgeSQet7wvpyqEwNUaBRTz+cDPtdr2rfp/AYkFe80/+csxAAAAAElFTkSuQmCC") no-repeat !important;
height:22px!important;
padding-left:25px!important;
background-position:2px 2px!important;}
}

Alles anzeigen

Einzutragen in die Erweiterung Stylish oder der userChrome.css

https://addons.mozilla.org/de/firefox/addon/2108

Sollte der Ordner chrome nicht vorhanden sein musst du ihn dir erst erstellen, und in ihm dann eine userChrome.css
Du mußt dir im Profilordner einen neuen Ordner chrome erstellen und in diesem dann eine Textdatei ( mit einem Editor ) in die du den Code kopierst, bzw. einträgst.
Hier kopierst du als erstes folgenden Text rein:

Code

@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
@namespace html url("http://www.w3.org/1999/xhtml");

anschließend folgt der von dir gewünschte Code.

Dann schließt du die Datei und speicherst sie als userChrome.css ab.
Danach mußt du den Fx neu starten.

Wo finde ich meinen Profilordner

Hilfe zu Stylish

heloschco

Hallo Andreas,

vielen herzlichen Dank. Das entspricht schon mal meinen Vorstellungen.
Wenn jetzt noch der Button statt rund eckig sein könnte, wäre das super. Geht das auch?

Lothar

Endor

Dieser hier wäre eckig:

CSS

/*AGENT_SHEET*/


    @-moz-document url-prefix(chrome://browser/content/browser.xul){


    .tab-close-button.close-icon.always-right > image {
    height: 0 !important;
    width: 0 !important;}


    .tab-close-button.close-icon.always-right {
    background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABOUlEQVQ4ja3TvWrCUBjGcUkGQXDIHeQCTMQIIuZC7MegGRWUbM4SvQLTXoEKNoKD3QQREWmRuGRy6VRHJwehUP6dPNSeUhT7wgOHl+f9bScW+69pKAqX5OR4oCisNI3PdvusrDSNwXekoSh8tFoXpfETOHgeB88jrNUZlhwWlarYLSpVhiWHsFYXOwnYN5vsm02ebm4B2IYh87LDvOywDUMAhiVH9CRg57rsXJfXu3uiXh+AqNc/eYe1uuhJwHuxKBKkTJYdn+MsOz5ByjzpSMDGttnYNlPDoGumfwWmhiF6ErDWdda6TtdM8zabicMjFPX6BClT9CRgnkwyTybxM5Y4GFlZRlaWl4dHAPyMJXoSMEkkmCQSjHN5/IzFOJf/cycBz/H4RZGAQFWJCoWzEqiq/B+u+kzXzBd6GbzgZJiD5QAAAABJRU5ErkJggg==") no-repeat !important;
    height:22px!important;
    padding-left:25px!important;
    background-position:2px 2px!important;}
    }

Alles anzeigen

hoffe, das passt.
Mfg.
Endor

2002Andreas

Zitat von heloschco

Geht das auch?

Es geht fast alles im Firefox zu ändern, teste bitte erstmal den Code von Endor.

Du kannst dir aber auch selber ein Icon aussuchen und es mal ins Forum stellen, wir basteln dir dann den Code drumrum :wink:

heloschco

Hallo Andreas,

das passt einfach super.
Nun würde mich noch interessieren, ob man die Höhe und Breite des Button verändern kann?
Entschuldige bitte meine "unverschämtheit", aber wenn ich schonmal dabei bin, frage ich einfach mal.

MfG
Lothar

Steph

Zitat von heloschco

Nun würde mich noch interessieren, ob man die Höhe und Breite des Button verändern kann?

Probiere mit height und width

2002Andreas

Zitat von heloschco

die Höhe und Breite des Button verändern kann?

Dazu muss man das Icon vergrößern. Nachteil, es könnte unscharf werden.

Evtl. kann dir ja jemand das Icon besser erstellen, aber so würde es mit einem größeren aussehen:

[Blockierte Grafik: http://www11.pic-upload.de/thumb/07.09.14/vs6c2bqfredn.png]

CSS

/*AGENT_SHEET*/


    @-moz-document url-prefix(chrome://browser/content/browser.xul){


    .tab-close-button.close-icon.always-right > image {
    height: 0 !important;
    width: 0 !important;}


    .tab-close-button.close-icon.always-right {
    background:  url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAIAAABvFaqvAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAElUlEQVR4nK2VzW9UVRjGn3PPuffOnTszpc6UgdIWxBSt4UNKI4EuwI8QgwtSQpA1O3aEPSGEP4Adf4Am2ioxLZuayEIw1AVgQYGWdgq1paPtfN7O3Dtz7/lyMS00iiYmvpuzen953vc8eV6itcb/Uaz1FPP5sQsXiqVSApCcg5B/a9KammYdyKTTJ65ezWzdugbynz59NjKyMDKigFgmI3xfa91ibeTpdQohRLtuvVgMgOd9ffbQUHLvXqK1/vn8+alr17YTsuvUqfb9+3UQSCGIYbwWpJWijJF4vDI5OXP9+guluk+eHBwZYQDmFheXOT9+5kz7wAAcB4kEGAVlUAqcQwgAYAymCcOAFJAKWm8eGDCVuj88HMzPD7ZGq7lu07ad/n4Vi9UWFzWlfhDwiFsmS8TjTiwGoNFs1oMg4sK0TDceJ1Imu7uc/v5ofNxLpdZ2RJVCGArfjyVcaRjLfjBfKgdRlHZivZadMk0AK3V/tuqVGo24Ze94Q2fduKG18H2EoSHEGsgAAAghNGOrvj+3UmgbHNzR2xvm88Xpp/5sDkCjo6PtyJFsZ2cpl3s28VMcaGdMCKHX21lrixpQShGNKAjCINi8c+fbH3/Em82ZL796PpcD0HXoUO/pU1bMmaW0cGciCkMilVJKK/XKR4QQDYh6HeWyJeUW06revbvc3Z19ty978H2vUACQPXjQijkrjx5XJyc7U0lLK5RLol7XSrX+9xWIe16TMVvKnnjst3v3npTKjaETbT3b3/r0OADquvO3bj/7dtTOv9ixuYNGUbNQ5J6npXwFAqUaiKrVQGvZaBgEUW5u8fFUA9h/9uzWPbsB5H99NDU2Vhwf77IYtBQgQcQjr/rSugwAMQwFhKUSF6JWq9XCZmXVk67b8vG6nzW0pozWarUXCwvJmGMmU6FXlQChdF0RIRIIKxWhVK1S+UOD7Op954MPuz44asadhXv3Ae2mM3s+Oz1vmiu3bpc9j9T9FOfh6qoG/qaoWo2krFWqlfb2N48dO3DunJ1MLvx458mNMaJ138mhnsOHnUwmIkZhdDRWrkRShvW6AjYs2zAk0KjVQqVqXrWacNP73rOTyeLMzPMbN2o/3CIEM5zDsnsGDmw5euTRN1/bnhcBjSCQgPFyNAJogAsRBAGz7bbUpt8fPBS+X3/4SzAx4TzLEZCG1rOW7eXzhVwu2dZGi4Wg2eBCqL/kEQCpdcAjK+5mCZn/4vOpMNrmuqlyyfQ8AFhZWb1588noqGNb2yybWlYQ+HJDJjIABmOGZUVKgSCoVo3mtNtomEpJynxoIiUAvbQk8/mU4KZhcMdpNpua0UjDsCxqmmugRqXiRRExzY7ObYJSwjmjlFLKpZSEgFIAkJJqbVIqpRRSatNkUuaXljzOg2JxDZRMpx3T9DjP2HYim1WcK6U0IQxgGxOdEA0QrW3DMEyzvrzscR4zzVQ2C4BorZenpx8MD39/+bIE0oB4maqvjVqAAAwoARQ4dunS7qGhzn37SOuK+IXCd1euVOv1OGNr4f9P14WQVvgHQmxKJD65eNHt6FhT9PqG/1h/Ao3WiRwrHiAkAAAAAElFTkSuQmCC") no-repeat !important;


    height:28px!important;
    padding-left:27px!important;
    background-position:2px 2px!important;}
    }

Alles anzeigen

Evtl. musst du dir die Werte noch etwas anpassen.

Zitat von heloschco

Entschuldige bitte meine "unverschämtheit",

Kein Problem, wir sind doch hier um uns zu helfen wenn möglich :wink:

heloschco

Hallo,
das ist schon recht gut, die Hohe bekomme ich auch hin, aber nicht die Breite.
Ich hätte gerne den Bitton so groß wie den Schließenbutton in den Windowsanwendungen, also sagen wir mal: ca.2cm breit und ca. 1cm hoch und das ganze ohne Rahmen.

MfG
Lothar

heloschco

Hallo bochmals,

ich habe da einen Code, den ich gerne benutzen würde, aber leider ist das Kreuz nicht in weiß darzustellen.

.tabbrowser-tab .tab-close-button .toolbarbutton-icon
{ background: #ff0000 !important;
color: #ffffff !important;
border-right: 15px solid red !important;
border-left: 15px solid red !important;
}

Lothar

Endor

Bitte mal testen, das ist jetzt ein breiteres Symbol:

CSS

/*AGENT_SHEET*/


    @-moz-document url-prefix(chrome://browser/content/browser.xul){


    .tab-close-button.close-icon.always-right > image {
    height: 0 !important;
    width: 0 !important;}


    .tab-close-button.close-icon.always-right {
    background: url("data:image/png;base64,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") no-repeat !important;
    height:22px!important;
    padding-left:25px!important;
    background-position:2px 2px!important;}
    }

Alles anzeigen

hoffe, das passt.
Mfg.
Endor

2002Andreas

Endor, das hast du sehr gut gemacht :klasse::wink:

Endor

Danke!!
Hoffentlich gefällt es heloschco auch.
:wink:
Mfg.
Endor