Statusleiste

Zitat von graubaer

Wird der Code in eine solche Datei eingefügt

Nein.

Zitat von graubaer

Das Script von hier #15 muss ich wo einbinden?

Dazu bedarf es einiger Vorbereitung, lies das bitte mal dazu:

Funktionelle Änderungen am Firefox durch Scripte

Such dir einen der Links davon aus, sie erklären alles das gleiche.

Zitat

Dazu bedarf es einiger Vorbereitung, lies das bitte mal dazu:

Das habe ich schon nach dieser Anleitung Firefox Anpassungen : die Basis erledigt und inzwischen auch die Tableiste verschoben und die Tabs verändert.

Achso, umso besser :klasse:

Dann erstell dir bitte im Ordner chrome eine neue Textdatei.

In diese kopierst du das Script aus Beitrag Nr. 15

(function() {


  if (location != 'chrome://browser/content/browser.xul')
    return;

  var tb = document.createElement('toolbar');
  tb.id = 'new-toolbar';
  tb.setAttribute('customizable', true);
  tb.setAttribute('mode', 'icons');


  var vbox = document.createElement('vbox');
  document.getElementById('navigator-toolbox').parentNode.insertBefore(
    vbox, document.getElementById('browser-bottombox'));
  vbox.appendChild(tb);


  CustomizableUI.registerArea('new-toolbar', {legacy: true});


})();

Danach benennst du diese Textdatei bitte um in z.B.

new-toolbar.uc.js

Danach den Fx bitte neu starten.

PS:
Das ändern der Tabs etc. hat nichts mit den Scripten zu tun

Dabei geht es nämlich um css Dateien die etwas ganz anderes sind.

Ich habe jetzt diese Datei im Ordner "Chrome" installiert, aber von einer Statusbar sehe ich noch nichts nach Neustart.

Endlich habe ich auch eine Statuszeile hin bekommen. Mit der CSS-Anweisung: "direction:rtl" richtet man die darin befindlichen Buttons rechtsbündig aus. Das mit den vielen variablen Zwischenräumen auf der linken Seite war mir zu komisch.

Meine CSS-Anweisung ist jetzt erstmal so:

/**********************************************************
 ********** Neue Toolbar unten mit Statusleiste ***********
 **********************************************************/


/* Die neue Toolbar/Statusleiste ist mit einem JS-Script eingebunden
 * und hat die ID: #new-toolbar.
 */


/* Neue Toolbar Hintergrund, Höhe, und Ausrichtung (Buttons rechts)
 */


#new-toolbar {
  background: var(--bar-hgf) !important;
  height: 34px !important;
  direction:rtl !important;
}


/* Statusleiste Position festlegen (über der neuen Toolbar)
 */
statuspanel {
  height: 30px !important;
  bottom: 28px !important;
}


/* Statusleiste Anzeigefeld Schriftfarbe
 */
.statuspanel-label{
  background-color: transparent !important;
  color: #fff !important;
}

background: natürlich anpassen, ist bei mir eine Variable...

Gruß Harry

Zitat von HT-Frogger

Endlich habe ich auch eine Statuszeile hin bekommen. Mit der CSS-Anweisung: "direction:rtl" richtet man die darin befindlichen Buttons rechtsbündig aus. Das mit den vielen variablen Zwischenräumen auf der linken Seite war mir zu komisch.

Solange kein Text drin steht. :wink:
direction:rtl bestimmt nämlich eigentlich die Schreibrichtung. In diesem Fall also "right to left".

Text ist da ja nicht drin (zumindest nicht direkt). Die Statuszeile wird ja einfach darüber geblendet. "text-align: right" hat nicht den gewünschten Erfolg gebracht.

Gruß Harry

Du könntest auch einfach einen flexiblen Leeraum links von den Icons platzieren.

Ja, aber da braucht man dann 10 flexible Leerräume, die werden ja nicht mehr (wie früher mal) beliebig breit, sondern nur ca. 2-3 cm... das war mal anders...

Gruß Harry

Dann mach' sie doch so flexibel wie du willst...

toolbarspring {
    -moz-box-flex: 1;
    min-width: 5px;
    max-width: none !important;
}

Ohhh ja, danke!

Gruß Harry

Büdde.

Zitat von graubaer

Ich habe jetzt diese Datei im Ordner "Chrome" installiert, aber von einer Statusbar sehe ich noch nichts nach Neustart.

Ich nehme alles zurück.
Mir ist die Leiste unten nicht aufgefallen, da sie schwarz ist. :roll:
Gibt es eine Möglichkeit, eine andere Farbe einzusetzen?

Edit: Ich habe das Theme "Pastel Gradient" gewählt, bei dem die Statusleiste diese Farbe annimmt.

Ja, über die Eigenschaft background.

#ID-deiner-Statusleiste {
	background: green !important;
}

Für die ganze Leiste im Abschnitt:

#new-toolbar {
  background: green !important;
}

Gruß Harry

Und wo setze ich einen dieser Codes ein? :-??

In die Datei userChrome.css einfügen

Zitat von aborix

Nimm dieses leicht veränderte Skript:
[…]

Das sollte in die Skriptliste aufgenommen werden! Wie wäre es mit „statusbar.uc.js“? Ich würde allerdings geänderte ID vorschlagen und zu Beginn per Kommentar auf die Möglichkeit der Beeinflussung per CSS hinweisen.

Als ID könnte man zum Beispiel das hier nehmen mit dem inzwischen etablierten (denke ich doch) Kürzel ucjs:

tb.id = 'ucjs-statusbar';
  vbox.id = 'ucjs-statusbar-vbox';

oder von mir aus auch weiterhin mit toolbar statt statusbar.

Zitat von EffPeh

Dann mach' sie doch so flexibel wie du willst...

Code

toolbarspring {
/* Deklarationen */}

Die ist sicherlich allgemein gut, aber für die Statusbar reichte mir diese Regel völlig:

#new-toolbar > toolbarspring {
	max-width: 100% !important;
}

Wer wie ich ein Light Theme nutzt, kann übrigens folgendes tun:
(Update: Siehe auch am Ende - und die Punkte 1–3 sind gar nicht notwendig, siehe dazu Beitrag #103 von HT-Frogger.)

• Im chrome-Verzeichnis wahlweise einen Unterordner anlegen – als Beispiel statusbar – oder später einen bereits vorhandenen nutzen.
• Im aktiven Profil nach den Dateien lightweighttheme-footer und lightweighttheme-header suchen (Dateien ohne Dateierweiterung).
• Für diese zwei Dateien einen symbolischen Link – keine Verknüpfung! – in einem der Unterordner aus Punkt 1 erzeugen (direkt im chrome-Ordner ginge auch, aber das wird irgendwann unübersichtlich). Ich habe den Namen der Dateien beibehalten, aber man könnte den Link auch umbenennen.
• In die userChrome.css Folgendes schreiben – ich habe hier die von Aborix vergebene ID und den Ordner statusbar verwendet (auch hier eine Änderung in einem 2. Update):
  
  
  Code

  #new-toolbar-vbox {
  	background-image: url("./statusbar/lightweighttheme-footer");
  }

  
  Bei mir reicht das aus, weil die getesteten Themes deutlich größere Bilder anbieten als mein Bildschirm Pixel hat. Bei größeren Auflösungen kann man aber auch zwischen Semikolon und schließender geschweifter Klammer das hier ergänzen (aus optischen Gründen am besten in einer eigenen Zeile):

  Code

  background-size:cover;

Ob die endungslose Datei auch in Linux und MacOS funktioniert, weiß ich nicht, sonst den Link als JPG-Datei benennen (alle mir bekannten Themebilder sind JPGs, aber ich kann nicht ausschließen, dass auch PNG-Bilder vorkommen). Wer einen anderen Dateinamen gewählt hat, muss natürlich den eintragen. Eine Hintergrundfarbe zu definieren ist nicht nötig, da die vom Light Theme vorgegebene automatisch verwendet wird.

Schon allein vom Namen her ist die Footer-Datei zu bevorzugen, aber man kann auch testweise einmal den Header einbinden (und deshalb überhaupt der Link); vielleicht sieht das bei einigen Themes besser aus.

Wenn man das Theme ändert, wird anders als das Light Theme selbst das Bild erst bei einem Browserneustart aktualisiert.

[b]Update:[/b]
Das Skript wurde nun unter dem schon bekannten Namen RevertAddonbarStatusbar veröffentlicht. Mit den geänderten ID und dem Hinweis von HT-Frogger (Update 2:) und den browsereigenen Variablen(Ende Update 2) muss es dann so aussehen (solange die Datei mit diesem Stil sich direkt im Verzeichnis chrome befindet):

#bottom-toolbar-vbox {
  background-repeat: no-repeat;
  background-position: bottom left;
  background-color: var(--lwt-accent-color);
  background-image: var(--lwt-footer-image);
}

Wer das Hintergrundbild für den Kopf verwenden will, muss stattdessen

background-image: var(--lwt-header-image);

nehmen; background-size:cover; kann bei sehr breiten Bildschirmen zusätzlich ergänzt werden.

Zitat

Die ist sicherlich allgemein gut, aber für die Statusbar reichte mir diese Regel völlig

Ja, klar, das kann man variieren, wie man es braucht.
Ich habe da auch verschiedene, u.a. den von oben mit der Mindestbreite.
In einem anderen thread habe ich auch schon gezeigt, wie man daraus Trennlinien basteln kann.