CSS Firefox Userchrome.css Bearbeiten

Fatal!ty Str!ke

Lt. Commander
Registriert
März 2008
Beiträge
1.780
Hi, ich versuchs mal hier bei CB. Vielleicht kann ja von euch jemand helfen. Ich hab schon bei Winfuture.de gefragt, aber ohne erfolg. :(


Und zwar gehts darum, Firefox in Google Chrome umzuwandeln. Warum? Mir gefällt das simple und klar strukturierte Design, aber ich will keinesfalls auf meine Firefox addons verzichten. Also bitte keine Fragen nach dem "Warum". ;)

So, ich hab mittlerweile alle addons gefunden, um aus meinem Firefox (3.5 RC) so perfekt wie möglich Chrome zu machen. Zudem hab ich Das Fenster Icon entfernt, den Titel. Die Icons in der Firefox.exe wurde duch die von chrome ersetzt und das "About" Fenster hab ich auch editiert. Ich bin so gut wie fertig.


Nur gibts da eben noch diesen einen Schönheitsfehler, der mich die ganze Zeit nerft. (Dafür hab ich schon stundenlang addons gesucht - ohne erfolg. Ich hab schon ALLES durchprobiert. Mit einem existierenden Addon ist das Problem definitiv nicht zu lösen.)

Hier der Screenshot:



Der Abstand zwischen den Tabs und dem oberen Fensterrand ist einfach viel zu groß. Nachdem ich über google rausgefunden hab, dass man über die userchrome.css so gut wie alles verändern kann (z.b. Toolbars überall plazieren, größe bestimmen, Menüs verändern, buttons anders platzieren....)
dachte ich mir, dass ich damit das Problem lösen kann.

NUR hab ich überhaupt KEINE Ahnung von CSS. Ich hab nach endlosem Suchen eine Zeile gefunden, mit der ich am oberen Ende der tableiste 2 pixel abschneiden konnte. Dadurch bin ich 2 pixel nach oben gekommen. Aber zugleich ist zwischen Tableiste und Toolbar ein Spalt entstanden. Und mehr als 2 pixel abschneiden kann ich auch nicht, da dann die Tabs oben abgeschnitten sind.

Man müsste eben nichts abschneiden, sondern die ganze Leiste bzw alle zwei verschieben. Und nachdem, was ich alles gesehen habe, bin ich mir eigentlich sehr sicher, dass das hinzubekommen ist. (wahrscheinlich sogar sehr einfach?)


Das ist das wichtigste.
Wenn möglich wärs super, wenn man dann die Tableiste bis zu den Min-Max-close buttons begrenzt, da sich das dann überschneiden würde oder sehr eng wird. Und dann noch den Button darunter entfernen. Der existiert bei Chrome nämlich nicht und ich nutze den eh nie. Das ist der Button, um alle Tabs in nem Menü zu zeigen - also die Tab liste.


Ich wär euch sehr Dankbar, wenn ihr mir helfen könnt.
 
Zuletzt bearbeitet:
AW: Brauche Hilfe - Firefox Userchrome.css Bearbeiten

Danke für die hilfe.

Aber hast du den screenshot nicht angesehen? Ich hab bereits die richtigen Addons zusammengesucht. Ich hab mittlerweile über 24 Stunden addons und möglichkeiten gesucht, es so perfekt wie möglich hinzubekommen. Über google und auf der Mozilla seite.

Erspart euch also BITTE die Suche nach Firefox addons! Ihr werdet keins finden, welches ich nicht schon getestet hätte. Es gibt keine Addon kombination, die Glass und schmale bzw. entfernte Titelleiste ermöglichen.



Alles, was ich will ist die Tableiste weiter nach oben zu bringen. Und eben noch den Button entfernen und die Tableiste begrenzen.


Ich weis, 100%ig, dass es möglich ist, das mit der userchrome.css anzupassen, zumindest die zwei letzen sachen. Ob das mit der Tableiste-nach-oben geht, weis ich nicht. Aber ich hoffe mal, dass es möglich ist.

Ich brauch nur ein paar codezeilen. Das ist alles...
 
Zuletzt bearbeitet:
Re: Brauche Hilfe - Firefox Userchrome.css Bearbeiten

bevor du in der userchrome.css rumfummeln musst, würde ich dir ans herz legen stylish zu verwenden. der vorteil ist einfach der, dass inline angepasst und on-the-fly übernommen werden kann, direkt mit vorschau und natürlich dem rückgängig machen. "profile" gibt es dort auch, je nachdem was du willst (also per seite, domain oder auf den firefox selbst gerichtet).

das ist aber keine pflicht, sondern nur ein vorschlag. wenn du das aber in der userchrome css haben willst, dann kann ich dich davon natürlich nicht abhalten.

weiterhin empfehle ich dir die seite userstyles.org, denn dort gibt es schon tonnenweise änderungen für seiten und den firefox. such einfach mal nach ein paar scripten, wo du denkst, dass diese für dein ziel gebraucht werden. entweder fügst du den style zu stylish hinzu oder du kannst dir den css-code ansehen und selbst einarbeiten (ist also egal ob addon oder userchrome).

was dein problem angeht, kann ich dir nur wiefolgt helfen (hab das sonst nie gemacht, sondern nur die scripte angesehen und zusammengelegt):

geh mal in den firefox\chrome-ordner und extrahier dort mal alle *.jar-dateien, welche die ganzen styles enthalten. in der browser.css (.\chrome\classic\skin\classic\browser) gibt es eine klasse die tabbrowser-tabs heißt, welche die tableiste betrifft (zeile 1327 um genau zu sein). füg dort mal die eigenschaft margin-top hinzu, sodass die tabs nach oben wandern. was die breite betrifft, so fügst du die eigenschaft max-width hinzu. heißt also:
Code:
.tabbrowser-tabs {
  /** hinzugefügte eigenschaften **/
  margin-top: -12px !important;
  max-width: 89.2% !important;
  /** originale eigenschaften **/
  -moz-appearance: -moz-win-browsertabbar-toolbox;
  background: -moz-dialog url("chrome://browser/skin/tabbrowser/tabbrowser-tabs-bkgnd.png") repeat-x;
}
margin(-top) beschreibt dabei den abstand des elements von der äußeren (hier oberen) seite zum vorherigen und max-width die maximale breite des elements.

edit: falls du sicher gehen willst und weißt, dass die veränderung nur ein element betrifft (näheres siehe auf css4you.de), dann füg die !important direktive hinter der eigenschaft hinzu. manchmal kommt es nämlich vor, dass durch irgendwas (speziell auf die veränderung von seiten bezogen) die eigenschaft von dir verworfen und durch eine andere ersetzt wird. mit !important allerdings, wird diese eigenschaft nie wieder überschrieben und bleibt, wie du sie gesetzt hast.

bei den werten musst du natürlich ausprobieren, da ich von hier nicht ahnen kann, wo genau das hin muss. so aus dem stehgreif heraus, würde ich aber die oben stehenden werte nehmen (hab mal ein wenig nachgemessen und die prozentuale angabe ausgerechnet).

genaue erklärungen zu den css-eigenschaften, findest du aber auf www.css4you.de.

wie du den knopf dort wegbekommst weiß ich nicht, denn das kommt bestimmt von einem addon, oder? wenn, extrahier ggf. dort auch mal eine (wenn vorhandene) jar und such die die eigenschaften dafür raus. wenn du sie gefunden hast, füg einfach die eigenschaft visible: hidden !important; hinzu. so sollte dieser versteckt werden.

wie gesagt: denk über stylish nach. google und co machen so mitunter auch viel mehr spaß. ;)
 
Zuletzt bearbeitet: (!important-kommentar + direktive zum code hinzugefügt)
AW: Brauche Hilfe - Firefox Userchrome.css Bearbeiten

Erstmal vielen vielen Dank für die Hilfe!
Das hat mir schon sehr viel weitergeholfen.

Ich kann zwar die Tableiste nach belieben verschieben. Aber sobald ich mehr als zwei Pixel nach oben gehe, wird es abgeschnitten. Scheinbar kann man das mit Firefox nicht machen. Dafür scheint Windows verantwortlich zu sein.

Na ja, dann muss ich eben damit leben. Ich hab jetzt die Titelschrift und das Fenstericon wieder eingebendet. Sieht zwar super aus. Aber leider nicht wie bei Chrome.
Man kann halt nicht alles haben...


Jedenfalls hab ich noch die Toolbar so angepasst wie bei Chrome. Damit die Abstände genau stimmen. Das dumme ist, sobald man eine Toolbar verändert, haut es gleich die nächste durcheinander. Und sobald ich das ausgebügelt hatte wurde mir klar, dass die Toolbar von "DownThemAll" von der Höhe der Firefoxtoolbar abhängt. Jetzt musste ich das so hinbekommen, dass die Höhe der Firefoxtoolbar definiert bleibt, aber Down them all die Höhe belibig für "seine" Toolbar bestimmen darf.

War das ne Arbeit. Ich hab ja keine Ahnung von dem CSS zeugs...
Aber nach ewigen ausprobieren. Hab ich es perfekt hinbekommen. Nichts stört sich mehr.
die 2. und 3. Zeile war der Kanackpunkt. :)

Code:
toolbar { 
  height: 38px;
  max-height: 100px !important;
  margin-bottom: -1px !important; 
}

#PersonalToolbar { 
  height: 25px !important;
  padding-bottom: 5px !important;
}

#toolbar-menubar {
  height: 25px !important;
}

Und danke für den Tipp mit Stylish. Das funktioniert viel besser. Man muss nicht andauernd Firefox neustarten, um die Änderungen zu sehen.
 
Re: Brauche Hilfe - Firefox Userchrome.css Bearbeiten

Fatal!ty Str!ke schrieb:
Ich hab jetzt die Titelschrift und das Fenstericon wieder eingebendet. Sieht zwar super aus. Aber leider nicht wie bei Chrome.
kannst du das icon denn nicht auch ändern? wie lautet denn die css definition? vllt bekommst du es mit background umgeändert.
 
Ich versteh nicht ganz, was du meinst.

Das Firefox Icon oben links im Fenster kann man beliebig austauschen, wenn man unter
C:\Programme\Mozilla Firefox\Chrome\icons\default
Ein Icon mit dem namen "main-window.ico" einfügt.

Ich hab da einfach ein 100% Transparentes Icon eingefügt. Und schon ist es weg.
 
achso, ich ging davon aus, dass du das firefox icon drin hast und das chrome icon willst. aber ich seh grad, dass chrome gar keins hat... hat sich dann also erledigt. ;)
 
Brauche auch Hilfe bei der Userchrome.css.

Ich habe da schon einiges gefunden, aber wie ich die Hintergrundfarbe aller Menüs ändere nicht.

Also mit Maus RechtsKlick und alles was sich in der Menuleiste auftut soll schwarz sein. (Lesezeichenliste...)

WIE?


Lösung:
menupopup, popup
{-moz-appearance: none !important; background: #000000 !important;

das macht alles schwarz.

Habs also rausgefunden nach über 1 Stunde rumfummeln
 
Zuletzt bearbeitet:
Zurück
Oben