Hover Effekt der Toolbar Icons verändern

denis_std

Huhu!

Ich habe über folgenden Befehl den Abstand der Buttons nach außen um 4px verkleinert.

CSS

toolbarbutton {
margin-top: -4px !important;
margin-bottom: -4px !important;
}

Wie bekomme ich nun den Hover Effekt beim darüberfahren auch auf diese Größe angepasst? Würde mich freuen wenn jemand mir helfen könnte!

Gruß Denis

PS: das Design des neuen FF 2.0 ist einfach nur grauenhaft

Pumbaa80

Zitat von denis_std

PS: das Design des neuen FF 2.0 ist einfach nur grauenhaft

Dann nimm das Theme "Winestripe" !
https://addons.mozilla.org/firefox/3479/

denis_std

Das hab ich schon, aber die Hover Effekte bleiben damit immer noch zu groß Deswegen die Nachfrage.

Gruß Denis

Pumbaa80

okay, Du solltest lieber diesen Code verwenden:

CSS

toolbarbutton {padding-top: 0px !important; padding-bottom: 0px !important;}

und den von Dir genannten ersetzen.
(siehe Das Box-Modell)

HTH
Pumbaa

denis_std

Naja das Problem ist nun wieder das gleich wie ganz zu Anfang. Ich habe oberhalb und unterhalb der Icons gut 5px freien Platz. Nun passt zwar wieder der "Hover" Effekt auf die Fläche, aber ich möchte ja eben oben und unten keinen freien Platz haben.

Pumbaa80

Ist der freie Platz außerhalb oder innerhalb der Buttons?
Mach am besten mal einen Screenshot.

denis_std

http://img171.imageshack.us/img171/1196/screen2we1.png

So wie ich den Abstand haben möchte. Das ganze habe ich mit dem oben beschriebenen Befehl erreicht. Das einzige was nervt, ist das der Rahmen beim darüberfahren so groß ist, dass er oben und unten bis an den Rand geht. (er steht über)

http://img171.imageshack.us/img171/8075/screenga3.png

So ist mir der Abstand zu groß nach oben und unten.

Pumbaa80

Zitat von denis_std

Naja das Problem ist nun wieder das gleich wie ganz zu Anfang. Ich habe oberhalb und unterhalb der Icons gut 5px freien Platz.

:-?? Seltsam, bei mir nicht:

[Blockierte Grafik: http://img145.imageshack.us/img145/2461/kleinebuttonspk9.png]

denis_std

Das is mal wirklich strange. Dann werde ich es nochmal versuchen aber ich denke es wird nichts bringen. Ein Unterschied zwischen Linux und Windows sollte es ja bei diesem Thema eigentlich nicht geben *grübel*

Pumbaa80

Eigentlich nicht.
Du könntest noch versuchen, manuell die Höhe der Menüleiste zu begrenzen:

CSS

#toolbar-menubar {
   height: 24px !important;
   padding-top: 0px !important;
}

Vielleicht hilft das ja.

denis_std

Hmm wenn ich rein die Höhe begrenze, dann habe ich immer noch das Problem mit dem zu großen Hover. Ist der Hover nicht auch in einer Klasse festgelegt?

Gruß Denis

Pumbaa80

In einer Pseudoklasse.
Aber eigentlich sollte die Höhe der Buttons immer gleich sein, ob Hover oder nicht.

Notfalls tuts vielleicht noch dieser

CSS

toolbarbutton:hover {height:20px !important;}

denis_std

Werde ich gleich testen. Was mir noch eingefallen ist, kann man die Vor und Zurück Buttons schmäler machen. Bzw. den "2. Hovereffekt" wenn man direkt über den Pfeil fährt irgendwie wegbekommen. Den gab es doch vorher auch nicht oder?

Gruß Denis

Pumbaa80

Zitat von denis_std

Bzw. den "2. Hovereffekt" wenn man direkt über den Pfeil fährt irgendwie wegbekommen.

Ich weiß nicht, was Du meinst.
Vielleicht gibt es doch Unterschiede zwischen der Linux- und der Windows-Version ?
Oder meinst Du die drop-down-Pfeile? Die kann man ausblenden:

CSS

#back-button > dropmarker, #forward-button > dropmarker {
  display: none !important;
}

denis_std

http://img243.imageshack.us/img243/4406/screen3ni5.png

Ich meine den Kreis links oben direkt über dem grünen Pfeil. Der erscheint, wenn man direkt über die Pfeilmitte fährt.

Gruß Denis

Pumbaa80

Also den gibt es unter Windows definitiv nicht. Wahrscheinlich hängt es mit http://developer.mozilla.org/en/docs/CSS:-moz-appearance zusammen. Firefox holt sich einige Design-Elemente aus dem Fenster-Manager.

So kann man das abschalten:

CSS

toolbarbutton {-moz-appearance: none !important;}

Aber vermutlich sieht der Button danach eher langweilig aus.

denis_std

Perfekt, genau das habe ich gesucht. Die Buttons sind die gleichen geblieben und dieser grausame Rand hat sich endlich verabschiedet

Gruß Denis und vielen Dank für die ganze Hilfe!