Tabs unten - CSS Code

2002Andreas

Zitat von Thomas S.

Und um weitere *.js-Scripte einzubinden

Um Scripte nutzen zu können, bedarf es erst dieser Vorbereitungen:

https://github.com/Endor8/userChr…ster/userChrome

Thomas S.

2002Andreas Rückmeldung:

Mit dieser "JS-Erweiterung" von Endor8 funktionieren unter Win7 auch wieder die CustomButtons wie gewünscht und die Tool- / Tab- / etc.-bar auch.

Was noch nicht geht, ist die Zuordnung einer Hintergrundfarbe für das aktive Tab, inaktives Tab funktioniert.

Mit Deinem Code für die Farben sehe ich also nur gelb, das aktive Tab bleibt weiß (wird nicht rot).

Allerdings funktioniert die Farbe für die Schrift (hier im Bild aber nicht verwendet).

Und wie spreche ich die Farbe der Linie oben vom aktiven Tab an?

Linux habe ich noch nicht getestet.

2002Andreas

Teste bitte mal:

CSS

.tabbrowser-tab[selected] .tab-content { 
    background: red !important;
    }

.tab-line[selected] { 
    display: none !important;
    }

Mit dem unteren Code wird die Leiste über dem Tab ausgeblendet.

2002Andreas

Und so bekommt sie eine andere Farbe:

CSS

.tab-line[selected] { 
    background: white !important;
    }

Thomas S.

Das funktioniert nur eingeschränkt.

Die Linie oben ist nicht mehr zu sehen.

Wenn ich die Tabs höher mache (> 33px) sehe ich eine schmale gefärbte Linie, die aber nicht mehr höher wird wenn ich die Tabs noch höher mache.

.tabbrowser-tab[selected] .tab-content färbt das gesamte Tab inklusive der Linie oben.

Ohne diesen Code ist die Linie normal gefärbte sichtbar.

2002Andreas

Teste bitte wieder:

CSS

.tabbrowser-tab > .tab-stack > .tab-background[selected] {
    background: red !important;
    }
    
.tabbrowser-tab[selected] .tab-label {
    color: white !important;
    }

Thomas S.

Das ist ein Volltreffer, super, Danke, funktioniert jetzt wie gewünscht!

Und da ich ja sonst nichts zu tun habe...

Hast Du noch einen Tipp, wie ich in der Bookmarkleiste die INNEREN Abstände oben, links und unten justieren kann, damit die Lesezeichen nicht so am Rand kleben?

Mit diesem Code erreiche ich nur den äußeren Rahmen / die Leiste selbst, nicht deren Inhalt:

CSS

/* Bookmarks Toolbar Maßanpassung */
#PersonalToolbar {
    height: 25px !important;
    margin-left: 0px !important;
    margin-bottom: 1px !important;
}

2002Andreas

Ich bin mir nicht sicher ob ich dich richtig verstanden habe.

Meinst du das so mit den Abständen innerhalb der Icons in der Symbolleiste?

Das wäre dann mit:

CSS

#PlacesToolbarItems > toolbarbutton{
    margin: 2px 2px 2px 2px !important;
    }

Thomas S.

Nicht ganz.

Die Bookmarks (Icons inkl. Text) belegen eine gewisse Fläche, zu erkennen mit MouseOver / Hoover.

Diese Fläche und deren Position will ich ansprechen - etwas verkleinern, so daß sich um sie herum ein Rand ergibt.

Bisher gehen die bis an den Rand der Toolbar.

Und links ist ein rel. großer Abstand zum Rand der Toolbar, siehe oben, links von "News". Der könnte kleiner sein.

2002Andreas

Teste einfach mal mit unterschiedlichen Werten:

CSS

#PlacesToolbarItems > toolbarbutton {
    margin: 2px -2px 2px 2px !important;
    }

#PlacesToolbarItems {
    margin-left: -8px !important;
    }

Damit ist das erste Lesezeichen fast am linken Rand.

Thomas S.

Das paßt super, vielen Dank für die Hilfe.

Die Anpassungen habe ich damit alle wie gewünscht bekommen.

Liebe Grüße, Thomas

2002Andreas

Freut mich wenn es letztlich funktioniert, wie du es gerne wolltest

Sambatiger

*buddel*

Ich häng mich mal mit ner Frage dran.

Der Code funzt (yeah, endlich Tabs unten ),aber da gibt es eine kleine Diskrepanz. Siehe Bild:

Ich habe die Titelleiste aktiviert,darunter das Menü,darunter die Buttons und darunter eine Lesezeichenleiste.

Wie kann ich den Platz zwischen Menü und Buttons vergrössern,damit es nicht überlappt ?

Am besten zu sehen beim LINKS Pfeil und "Lesezeichen"

Danke !

2002Andreas

Teste bitte mal, indem du die Leiste etwas dicker machst:

CSS

#PersonalToolbar{
    min-height:28px!important;
    }

Den Wert musst du dir wenn dann noch anpassen.

Sambatiger

Ne,leider nicht,es ändert sich nichts. Es sieht weiterhin so aus.

milupo

Probiere mal Folgendes:

CSS

.browser-toolbar {
min-height:50px !important;
}

Wert musst du dir noch einstellen. Sieht bei mir mit 50px so aus:

Sambatiger

Wo füge ich das denn ein ?!?

2002Andreas

Einfach unter den vorhandenen Code einfügen.

Sambatiger

Ok, dadurch kann ich nicht mehr auf die Toolbar zugreifen,als ob die Icons nicht da wären. Auch das Kontextmenü funzt nicht.

Nebenbei gefragt,kann man auch kleinere Leerräume einfügen oder Trennsymbole ?

milupo

Das kann nicht sein. Da hast du irgendwo einen Fehler. Hast du den Code auch richtig übernommen? Hast du den Code kopiert oder neu geschrieben? Am besten kopieren, auf das Symbol rechts klicken (Inhalte kopieren). Mit drei Zeilen kann man eigentlich keine Fehler machen.