Padding von Lesezeichen-Elementen verringern

  • Hejo

    Ich würde gerne das Padding von Lesezeichen-Elementen wie Ordnern verkleinern.

    [Blockierte Grafik: http://img3.imagebanana.com/img/7q5kvedy/element.png]

    Also so, dass der Abstand von der Schrift bis zum Rand des selben Elements kleiner ist. Ich finde aber irgendwie mit dem DOMi nicht den korrekten Wert zum verändern, ich kann zwar die Schriftgröße verändern usw., aber krieg das Padding nicht runter. Genaugenommen möchte ich, dass der Rand bereits 1 Pixel vom Favicon entfernt anfängt. Habt ihr da eine Idee?

  • Danke, aber nein, ich meine die Elemente auf der Personal Toolbar für sich, nicht relativ zur Leiste. Zb den Ordner den ich dem Screenshot rot markiert habe.

    Der Ordner besteht aus einem Favicon, Text, und einem Rand. Und ich hätte gerne, dass der Rand dichter am Favicon/Text ist. Oder anders gesagt: Lesezeichen und Ordner sollen kleiner werden.

    Beispiel: Leg mal ein Lesezeichen an ohne Namen, so dass es nur aus dem Favicon besteht. Dann geh mit der Maus drüber und du wirst sehen dass um das Favicon ein Padding nach oben und unten von ca. 3 pixeln ist, das hätte ich gerne für das gesamte Objekt entfernt.

    [Blockierte Grafik: http://img3.imagebanana.com/img/ciat463w/beispiel.png]

  • Ich glaube, was Du verändern willst, ist das Hover-Element, also dieser "Button", der angezeigt wird, wenn Du mit der Maus über dem Lesezeichen bist. Ich meine, mich schwach zu erinnern, dass das etwas schwieriger ist und hängt - glaube ich - auch von der Toolbarhöhe ab.

    Mit dem folgenden Code, kannst Du den Abstand zwischen den Lesezeichen verkleinern (ändern muss man nur die Werte der 7), evtl. lässt sich da auch was mit oben/unten basteln. Die Hoverteile bleiben damit aber unberührt und gehen bei zu kleinem Horizonzalabstand auch teilweise über das nächste LZ hinweg (war mir aber immer egal, da der Mauszeiger dort ja eh nur kurz verweilt).

    #personal-bookmarks toolbarbutton {
    margin: 0px -7px 0px -7px !important;
    padding: 0px 0px 0px 0px !important;
    }

  • Endlich geht's Forum wieder, war die ganze Nacht heiß auf eure Antworten.

    Schade dass ihr auch nicht wirklich weiter wißt. Wie ich den Abstand zwischen Elementen verkleinere ist schon klar, aber darum geht's mir nicht. Wie gesagt, ich will den Abstand innerhalb des Elements verkleinern - nicht außerhalb. Am einfachsten dadurch dass die Höhe des Elements verringert wird.

    Das wichtigste wäre erstmal rauszufinden, wie überhaupt der Objektname ist. Es scheint ".bookmark-item" zu sein, allerdings kann ich dessen Höhe nicht verringern.

    Das witzige ist ja seitlich kann ich das Padding nach belieben vergrößern und verkleinern.

    Beispiel:

    CSS
    .bookmark-item{
     padding-left: 10px !important;
     padding-right: 10px !important;}


    Damit hab ich 10 Pixel nach links und rechts mehr Padding, genau wie man es erwarten würde. Aber seltsamerweise geht folgendes nicht:

    CSS
    .bookmark-item{
     padding-top: 10px !important;
     padding-bottom: 10px !important;}


    Wenn man das macht, wird das Favicon gequetscht und der Text verrutscht, erwarten würde ich zumindest, dass die Höhe anschwillt, so wie es bei obigem Code zur Seite hin passiert. padding-top/bottom auf 0 zu setzen verändert nichts, was wohl ein Indikator dafür ist, dass es bereits auf 0 sitzt, und der Abstand zwischen Favicon/Text zum Rand anders zustande kommt.

    Das gleiche Phänomen mit zb

    CSS
    .bookmark-item{
     max-height: 14px !important;}


    Das funktioniert nicht, das Element bleibt unverändert groß. Aber

    CSS
    .bookmark-item{
     min-height: 40px !important;}


    schlägt an, das Objekt wächst in der Höhe. Warum kann es nur in die Höhe und zur Seite wachsen, nicht aber schrumpfen?

    Auch wenn ich "#PlacesToolbarItems .toolbarbutton-text" und "#PlacesToolbarItems .toolbarbutton-icon" mit display:none ausblende, so dass nichts "dagegendrücken" kann, ist es mir nicht möglich ".bookmark-item" in der Höhe zu verkleinern.

    Mal gucken ob mich die Boxmodell-Links weiterbringen, aber ich wäre um weitere Hilfe dankbar ^^

    PS: Ich bin übrigens hauptsächlich in der Beta 3 zugange, nur mal um's erwähnt zu haben, aber ich erinnere mich dass ich das Problem (das bestimmt ein Denkfehler ist) auch bei der 3.6 hatte.

  • Eine schwere Geburt für einen so simplen Code :)

    CSS
    #PersonalToolbar toolbarbutton {
     margin: 0px !important;
     padding: 0px !important;
     -moz-appearance:none !important;
     max-height: 20px !important;}


    Damit klappt's nun, kleinere Buttons.

  • Zitat von vommie

    (...) Bitteschön, sogar animiert


    Danke.

    Sieht schön minimalistisch aus. Ist mir aber zu bunt. Gibts das auch in Graustufen?

  • Ich mag's auch kompakt :) Ich verteufel zuviel Padding und Margin ^^

    Also bunt sind ja eigentlich nur die Icons der Lesezeichen oder Addons, die normalen Firefox-Buttons (Neuladen, Vor/Zurück, Neuer Tab , ...) sind Graustufen.

    Weiß jetzt nicht obs einen Graustufenfilter in CSS gibt den man einfach alle Icons legen könnte, müßt ich googlen wenn das grad eine Andeutung war dass du gern den Style hättest. Manuell kann man die aber natürlich alle Grau machen und dann zb Base64-enkodiert einfach einpflegen, das muss dann aber jeder Nutzer selbst machen weil ich ja nicht jedes Icon der Welt ändern kann :D. Ich persönlich mag's aber 'bunt'.

  • Wenn Du noch ein bisschen mehr Platz rausholen willst, könntest Du noch die Ordnericons bei den LZ-Ordnern ausblenden.
    Die Suchleiste kann man auch rausschmeissen und mit Schlüsselwörtern über die Adressleiste arbeiten.
    Und wenn Du Dich in der LZ-Symbolleiste etwas einschränkst, kannst Du die noch mit der anderen Leiste zusammenlegen und hast nur noch eine.

  • Zitat von vommie

    (...) einen Graustufenfilter in CSS gibt den man einfach alle Icons legen könnte, (...)


    Das wärs.

    Zitat von vommie

    (...) eine Andeutung war dass du gern den Style hättest. (...)


    Für die 4 Final tät ich den schon gern haben wollen ...

  • Zitat von Miccovin

    Wenn Du noch ein bisschen mehr Platz rausholen willst, könntest Du noch die Ordnericons bei den LZ-Ordnern ausblenden.
    Die Suchleiste kann man auch rausschmeissen und mit Schlüsselwörtern über die Adressleiste arbeiten.
    Und wenn Du Dich in der LZ-Symbolleiste etwas einschränkst, kannst Du die noch mit der anderen Leiste zusammenlegen und hast nur noch eine.


    gute Vorschläge, aber ich mag's eigentlich so wie's jetzt ist - für mich persönlich ein guter Kompromiss zwischen Kompaktheit und Nicht-jeden-Kram-ausblenden oder sich-einschränken-müßen (zb an Lesezeichen) ^^. Außerdem steh ich auf Icons, ich würd eher den Text von Ordnern entfernen und stattdessen jedem Ordner ein individuelles Ordner-Icon spendieren (so wie bei dem Ordner mit dem kleinen RSS-Icon auf dem Screenshot, in dem ich Feeds hab) - das spart sogar noch mehr Platz. :D

    Zitat von pencil

    Für die 4 Final tät ich den schon gern haben wollen ...


    Ok, momentan ist der eh noch totale Baustelle.