Symbolleistenhöhe anpassen?

Hallo,

z.B. durch Plazierung folgenden Codes in die Userchrome.css.
Diese Datei findest Du in Deinem Benutzerprofil im Verzeichnis /chrome. Falls die Datei nicht vorhanden ist, mit einem Texteditor einfach neu erstellen.

#main-menubar,
#nav-bar,
#status-bar,
#PersonalToolbar,
#FindToolbar,
#downbar
{
   max-height: 000px !important;
}


oder


#main-menubar,
#nav-bar,
#status-bar,
#PersonalToolbar,
#FindToolbar,
#downbar
{
   height: 000px !important;
}

analog dazu alle anderen "Bars" die Du installiert hast.
Der Wert 000px muss von Dir angepasst werden (Pixelwert).

Ich würde gerne genau das Gegenteil machen, also die Toolbar und die Menübar minmal größer machen.

Bei mir sieht die userchrome.css allerdings so aus:
/* Windows Classic (9x/Me/2000) style Menus */
menupopup, popup {
border: 2px solid !important;
-moz-border-top-colors: ThreeDLightShadow ThreeDHighlight;
-moz-border-right-colors: ThreeDDarkShadow ThreeDShadow;
-moz-border-bottom-colors: ThreeDDarkShadow ThreeDShadow;
-moz-border-left-colors: ThreeDLightShadow ThreeDHighlight;
padding: 1px !important;
}
menubar > menu[disabled="true"] {
border: 1px solid transparent !important;
}
menubar > menu[_moz-menuactive="true"] {
border-top: 1px solid ThreeDHighlight !important;
border-right: 1px solid ThreeDShadow !important;
border-bottom: 1px solid ThreeDShadow !important;
border-left: 1px solid ThreeDHighlight !important;
background-color: transparent !important;
color: MenuText !important;
}
menubar > menu[_moz-menuactive="true"][open="true"] {
border-top: 1px solid ThreeDShadow !important;
border-right: 1px solid ThreeDHighlight !important;
border-bottom: 1px solid ThreeDHighlight !important;
border-left: 1px solid ThreeDShadow !important;
}

Welche Werte muß ich denn da anpassen?

Auch die Zahl neben px nehm ich an, oder?

P.S: Habe mich jetzt mit den Werten etwas rumgespielt, komme aber zu keinem brauchbaren Ergebnis.
Wenn ich die Werte verändere sieht FF danach eher so aus wenn man auf einen Menüpunkt klickt:
[Blockierte Grafik: http://img82.imageshack.us/img82/8695/ff1gi.th.jpg]

Wobei ich das eher so haben will (übertrieben dargestellt...;))

[Blockierte Grafik: http://img140.imageshack.us/img140/8476/nt0zk.th.jpg]

Hallo,

in Deinem Code hast Du bezüglich Breite/Höhe keinen CSS-Tag. Du hast bezüglich "Pixeländerung" nur den Rahmen (border) und Innenabstand (padding).
Bei Grössenänderungen muss schon auch noch ein entsprechender CSS-Tag folgen (height, max-height, min-height, width, min-width, max-width...).

Dann veränderst Du mit den angegebenen IDs ja auch nicht Symbolleisten, sondern die Popup-Menues, Menueinhalte etc.

Wenn Du genau das Gegenteil erreichen willst, dann füge einfach am Ende, am Anfang Deiner Userchrome.css den entsprechenden Code ein:

#main-menubar,
#nav-bar,
#status-bar,
#PersonalToolbar,
#FindToolbar,
#downbar
{
   height: 000px !important;
}

Und mit der Ziffer 000 muss Du ein wenig experimentieren.
Nimm nicht alle Bezeichner, sondern nur die für die Bar, die Du ändern willst.
Z.B.:
#status-bar
{
height: 35px !important;
}
für die Statusbar usw.

Ok thx, das hilft mir schon mal viel weiter.
Ich habe jetzt bspw.folgendes geschrieben:

#nav-bar
{
height: 55px !important;
}
#main-menubar
{
height: 55px !important;
}

Das mit der Toolbar klappt auch wie erwartet, nur sind jetzt die Toolbarsymbole nicht mehr ganz in der Mitte.
Gibt's da auch irgendeine Möglichkeit die in die Mitte zu bekommen?

Das zweite Problem ist daß die Breite der Menüleiste sich nicht verändert (trotz des doch ziemlich hohen px Werts).

P.S. Und wie heißt eigentlich die Adressleiste?
Address bar gibt's ja nicht....

Soooo viele Fragen vor dem Frühstüück

Natürlich kann man auch die Buttons in Position bringen, aber dazu muss man natürlich wissen, welcher Button (welche Erweiterung) es ist.

Die Navigationsbar ist ein wenig "tricky", weil sie eigentlich aus mehreren Teilen besteht:
da gibt es einmal die
#nav-bar (das ist die ganze Leiste)
#url-bar (Adresseingabe)
#searchbar (Sucheingabe)

Mit Breite meinst Du sicherlich die Höhe, oder ?
Schreib doch mal genau was Du alles ändern willst, dann tut man sich etwas leichter.

Ok, dann mal einfach im Klartext...;)

Ich habe das (für viele hier vielleicht unverständliche) Bedürfnis Firefox so aussehen zu lassen wie IE.

Das klappt mit den Erweiterungen Button Pack (für zusätzliche Buttons) und dem IE Skin (http://www.bamm.gabriana.com/ieskin.html) eigentlich recht gut.

NUR, sind die Toolbar-, Menü und Adressleisten beim IE minimal höher.

Die Toolbarleiste etwas breiter (oder höher, je nach dem wie man's sehen will) zu machen ist mir ja schon gelungen.
Die #url-bar (Adresseingabe) und
#searchbar (Sucheingabe) werde ich noch ausprobieren.

Nur sind die Toolbaricons halt nicht mehr in der Mitte der Toolbarleiste (verständlich, ich habe schon befürchtet daß ich das im skin selber ändern muß, wobei ich die dafür zuständige Datei wahrscheinlich nie finden werde....)

Jetzt momentan sieht das Ding jedenfalls so aus:

[Blockierte Grafik: http://img480.imageshack.us/img480/3951/ieff6ce.th.jpg]

#url-bar zu verändern hat übrigens auch nix gebracht.

Das einzige was sich ändert ist die Toolbarleiste und zwar wenn man den nav-bar Wert ändert.

Menüleiste und Adressleiste ändern sich nicht.

Ich seh mir das jetzt mal mit dem Standardtheme an, vielleicht liegt's ja am Skin daß sich da nix ändert.

P.S. Ahaaa, beim Standardtheme wird die Höhe der Menüleiste geändert, dann liegt's also am IE Theme daß sich die Höhe der Menüleiste nicht ändert.

Ah, verstehe.

Gut, dass es mit einer Leiste nicht unbedingt funktioniert, muss nicht heissen, es geht nicht. Die Bezeichner können sich themenspezifisch ändern.

Hast Du zufällig den DomInspector installiert ? Das ist eine von Firefox mitgelieferte "Erweiterung", die man bei der Installation mit installieren kann.

Falls ja, mit diesem Gerät kannst Du die Bezeichner für alles, was Du ändern willst, selbst herausfinden.

Zu den Buttons mal ein kleines Beispiel, den Home- oder Startseite-Button:

#home-button
{
   min-width: 35px !important;
   max-width: 35px !important;
   border: none !important; 
   padding: 2px 0px 0px 0px !important;
   margin: 3px 0px 0px 0px !important;
}

Der Bezeichner spricht diesen Button an, danach kommen dann alle CSS-Angaben, die diesen Button (dieses Element) beeinflussen sollen.
Margin (Aussenrand), Padding (Innenrandabstand), Border (Rahmen um den Button), width, height etc.
Mit den Werten um es wirklich zentriert zu bekommen, muss man ein wenig experimentieren. Meistens hilft der Bezeichner PADDING, seltener MARGIN. Die Angaben bei margin,padding sind nicht zwingend, aber idealerweise immer 4 Werte

padding: 1px 2px 3px 4px = oben 1px rechts 2px unten 3px links 4px
none bedeutet den Wert weglassen usw.

Die Bezeichner der Buttons, die ich auf dem Screenshot gesehen habe, sind:

back-button
forward-button
stop-button
reload-button
home-button
search-button (kann themenspez. anders lauten)
????
downloads-button

Bei einigen Buttons sind noch die kleinen Pfeile (Auswahlliste) dabei, die haben eine eigene Bezeichnung, meistens etwas in der Art:

#reload-button .toolbarbutton-menubutton-dropmarker

Mit dem DOM-Inspektor kannst Du diese IDs selbst herausfinden:

DOM starten
Datei->Fenster inspizieren->das erste auswählen
auf den Button links neben dem Fernglas klicken (wird dunkel)

dann zum Browserfenster wechseln
mit der Maus auf das Element klicken, das analysiert werden soll (sollte jetzt kurz ein roter Rahmen drum erscheinen)
zurück zum DOM-Inspektor

im linken Fenster sollte jetzt der Bereich markiert sein, der zum angeklickten Element korrespondiert. Dort steht meistens auch schon die ID oder CLASS. Falls nicht, gibt es im rechten Fenster weitere Elementbeschreibungen dazu, hier findet sich irgendwo eine id oder class oder ein type=Bezeichner.

Und mit diesem Bezeichner wendest Du dann ganz normal der CSS-Syntax gehorchend Befehle an.
Die Erweiterung Stylish hilft dabei ganz gut, weil man meistens (nicht immer) den Neustart nach einer Änderung spart.

Falls Du den Dominspektor nicht installiert hast, wird es etwas schwieriger, denn soweit ich weiss, kann dieser nicht nachträglich installiert werden (bin mir da aber nicht 100%ig sicher). Somit wäre eine Neuinstallation des Firefox notwendig mit der ausgewählten Option DomInspektor.

Zitat

Und mit diesem Bezeichner wendest Du dann ganz normal der CSS-Syntax gehorchend Befehle an.

Und wo?
Ich hab jetzt bspw. den Reload Button angeklickt, und es hat auch alles soweit geklappt, er wurde erkannt und alles, nur wo genau kann ich da jetzt Einstellungen verändern.

Hier mal bspw. ein Screenshot:
[Blockierte Grafik: http://img149.imageshack.us/img149/2027/padding5vf.th.jpg]

In der blau unterlegten Auswahlbox kann ich auch noch andere Punkte anwählen wie z.B. Position, allerdings sind die genauso ausgegraut wie die Padding Werte.

Oben drüber kann ich auch noch andere "Orte" auswählen, wie bsp. Computed Style.
Hier finde ich wieder Eigenschaften von dem Button (nehm ich mal an....).
Hier ist zwar nix ausgegraut aber verändern kann ich auch nichts:
[Blockierte Grafik: http://img139.imageshack.us/img139/2600/comp3aa.th.jpg]

permanent ändern geht nicht im DOM Inspektor. Sagt der Name: Inspektor, der untersucht nur was.

Änderungen machst Du nach wie vor in der Userchrome.css.
Aber im DOM-Inspektor (besonders die rechte Seite) kannst Du in der Rubrik CSS-Style auch schon bestimmte Einstellungen zu bestimmten Werten sehen.

sorry, habe die Hälfte vergessen ...

Primär wichtig im DOM I sind auf der rechten Seite die DOM Nodes-Einstellungen.
Hier siehst Du eben die Classen, IDs, types etc. und die CSS-Style-Rules. Hier kannst Du die gesetzten CSS-Attribute einsehen, die es zum ausgewählten Objekt gibt.

Habe jetzt dieses Fenster geöffnet, mit dem kann man offensichtlich doch was ändern, allerdings bleibt es wohl nicht gespeichert:
[Blockierte Grafik: http://img74.imageshack.us/img74/2084/pad3jr.th.jpg]

Was natürlich blöd ist denn woher soll ich den Wissen in welcher Datei diese Einstellungen tatsächlich vorgenommen werden müssen?

Ich glaub ich lass es lieber....

Die Firefox-Entwickler sollten echt mal über einen grafischen Editor nachdenken mit dem man sich das einfach so zurechtbasteln kann wie man will, denn daß es theoretisch möglich ist, sieht man ja.

Im DOM Inspektor kann man natürlich ändern, temporär, getreu dem Motto "mal sehen was passiert wenn ich die Farbe auf gelb ändere".

Du musst auch in keiner Browserdatei was ändern.

In Deinem Benutzerprofil im Unterverzeichnis gibt es die Datei Userchrome.css.
Dort schreibst Du all die schönen Sachen rein, Neustart, fertig.
Gefällt es Dir eines Tages nicht mehr, dann änderst Du diese Dateieinträge wieder, löscht sie oder löscht gleich die ganze Datei.
Das ist eine Config-File für den Firefox.

Ein Wert wie er in dem Screenshot oben steht (DOM Inspector), steht aber nirgends in dieser Userchrome.css

Und ich wüsste auch nicht was ich da reinschreiben sollte.
Abgesehen davon gilt der neue px Wert nur für den nicht-gedrückten Button.

Wenn man ihn drückt rückt der Button wieder nach oben dort wo er war bevor ich den wert für padding verändert habe.

Brauch ich dafür jetzt eine weitere Erweiterung, vielleicht den DOM Inspector für gedrückte Buttons der mir dann wieder temporär anzeigt wie es aussehen könnte wenn man wüsste wo man da was verändern sollte.

Sorry aber das alles ist ja wirklich selten umständlich gemacht.
Wenn man die Möglichkeit hat so viele Dinge zu verändern (was ja sehr gut ist), dann wär's doch echt sinnvoll mal ein BRAUCHBARES Tool zu entwickeln mit dem auch Nicht-Informatiker schnell zu brauchbaren Ergebnissen kommen und nicht so ein abstraktes Ding wo man erst recht nicht weiß wo man die Einstellung findet.

Ich hab schon in einem anderen Thread mal geschrieben wie unglaublich umständlich und unpraktisch es ist Firefox zu übersetzen (ich weiß, das hat jetzt mit dem Thema nix zu tun).
Windows zu übersetzen ist dagegen richtig einfach (weil einfach sehr schnell offensichtlich ist wo was hingehört), auch ohne Informatik Studium.

Mich regt das immer etwas auf wenn Dinge die einfach sein könnten so unnötig verkompliziert werden.

Aber trotzdem natürlich vielen Dank für deine sehr ausführliche Hilfe.

Naja, irgendwie kann ich Dich natürlich verstehen.
Es gibt im Internet viele Anleitungen, ein schönes Möbelstück zu fertigen. Alles was man benötigt ist die Bedienungsanleitung, eine Drechselmaschine und einen Ster Holz. Ich könnte trotzdem daraus keine Holzbodenvase fertigen.

Du musst ein paar Grundkenntnisse in CSS und auch HTML haben, um in dem Bereich auch zu verstehen, was Du machst.

In der Userchrome-Datei steht normalerweise nichts drinnen. Eben das ist der Sinn. Dann kommt der Anwender und sagt sich: ich möchte meinen Browser indiv. anpassen. Dann schreibt er diese Änderungen in diese Datei rein, einfach so, wie es ihm einfällt:

Userchrome.css:

#menu-bar
{
max-height: 20px !important;
}

fertig

Es befinden sich jetzt 4 neue Zeilen in der Datei, die etwas bewirken.
Jede weitere Anpassung kommt dann einfach dazu usw.

Im Prinzip ist es nicht schwer, aber ein bisschen Aufgeschlossenheit benötigt man schon.
Und den Wunderkasten, wo man auf Knopfdruck alles "wunschgemäss designen" kann, wird es (hoffentlich) nie geben

So, nachdem ich jetzt versehentlich das Schließen Tastaturkürzel

gedrückt habe (wieder so eine blöde Sache, wieso haben sie

nicht gleich eingestellt, daß ein Doppelklick auf die Leertaste das

Programm schließt, wäre noch lustiger....*grmpf*) ist alles was ich

geschrieben habe wieder weg.
Egal.

Was schreib ich denn jetzt konkret in die css Datei?

Den Wert der blau unterlegt ist habe ich von 0px auf 5px geändert,

was dazu geführt hat daß die Buttons (gottseidank nicht nur einer

sondern alle auf der Toolbar) mehr in die Mitte gerückt sind (was

ich wollte).

[Blockierte Grafik: http://img337.imageshack.us/img337/6608/dom4ma.th.jpg]

#reload-button
{
margin-top: 5px !important;
}

ist eine Variante. Falls aber bereits vom Theme her für margin-bottom, margin-left, margin-right Werte gesetzt sind, kann es sein, dass Du so nicht hinkommst.

Da wäre dann die Alternative, alle Rahmen neu zu setzen erfolgversprechender:

#reload-button
{
margin: 5px 0px 0px 0px !important;
}

heisst: top=5px, right=0px, bottom=0px, left=0px

Falls margin nicht den gewünschten Erfolg bringt, kann auch padding (gleiche Syntax) benutzt werden. Während margin den Aussenabstand beeinflusst, greift padding auf den Innenabstand.

Ein Button besteht nicht nur aus einem Button, sondern das ist erstmal ein grafisches Objekt, das an einem vom Theme bereitgestellten Platz steht. Der Button hat aber als Teil ein Icon und eine Beschriftung ggf. auch noch einen Menuepfeil (Dropmarker).

Eine Hilfe kann sein, wenn Du einen Button bearbeiten willst, Du erst einmal einen Rahmen um den Button machst:

#reload-button
{
border: 1px solid black !important;
}

Bringt einen auf allen vier Seiten (top,right,bottom,left) erscheinenden Rahmen mit 1px dicke in der Farbe schwarz (man kann auf die Hexwerte nehmen #000000 oder rgb(0,0,0), ergibt das gleiche.

Nun siehst Du, welchen "Platz" der Button auf der Leiste für sich reserviert hat. Dann siehst Du einfacher: aha, oben etwas runter, etwas mehr rechts usw. und kannst die entsprechenden Werte angeben.

Somit wäre es möglich und auch sinnvoll, die einzelnen Elemente auch getrennt zu bearbeiten:

#reload-button .toolbarbutton-icon
{
....Werte für das Button-Bild
}
#reload-button .toolbarbutton-text
{
....Werte für den text
}

Wenn der Button korrekt sitzt, entferne den Eintrag für den Rahmen wieder und lass den Rest in der Userchrome.css drinnen.

Die ganze Struktur ist hierarchisch aufgebaut:
- die Symbolleiste als Oberelement
--- ein einzelner Button als Unterelement der Symbolleiste
----- ein Buttonbild als Unterelement des Buttons
----- ein Buttontext - dto. -
--- ein weiterer Buttom
usw.

Ist natürlich nicht sooo einfach, aber wenn Du das Prinzip mal verstanden hast, kannst Du nahezu alles anpassen, was Du möchtest (eigene Buttonbilder, eigenen Text, Lesezeichen unterschiedlich gestalten etc.).

Vielen Dank!
Der allererste Vorschlag hat gott sei dank schon geklappt

Zitat

#reload-button
{
margin-top: 5px !important;
}

Mußte das zwar für jeden Button einzeln machen, aber das geht ja noch vom Arbeitsaufwand her.

Hast du jetzt noch einen Tip wie ich Firefox dazu veranlassen kann schneller zu laden?

Ich weiß da gibt's so ein Firefox Preloader Ding, aber das braucht im Prinzip genauso lange wie wenn ich Firefox automatisch mit Windows starte (ist wohl auch so ziemlich dasselbe).

Leider dauert das aber ewig (genauso lange wie der eigentliche Windows Start).
Ich habe auch schon alle Erweiterungen deinstalliert die ich nicht brauche, aber trotzdem dauert das ewig.
Mein Rechner ist nicht gerade aktuell (PIII 800Mhz) aber trotzdemn scheint mir das zu lange.

P.S: Mal als Beispiel. Jetzt nach dem ich diesen Beitrag geschrieben hatte, habe ich FF geschlossen und wieder geöffnet.
Dauerte 43 Sekunden.
Das kann doch nicht normal sein.