leider stimmt der Code am Anfang nicth
Der stimmt schon, nur du hast nicht genau hingesehen :wink:
ZitatWichtig, die Titelleiste vom Fx muss dabei ausgeblendet sein!
leider stimmt der Code am Anfang nicth
Der stimmt schon, nur du hast nicht genau hingesehen :wink:
ZitatWichtig, die Titelleiste vom Fx muss dabei ausgeblendet sein!
... "Titelleiste ausblenden". Das geht rechts über die 3 Striche > dort auf "Anpassen" > unten links dann den Haken bei "Titelleiste" entfernen.
Habe die Titelleiste wie beschrieben ausgeblendet. Aber nach einem FF-Neustart ist sie wieder da (inkl. Haken). :cry:
Meine Vermutung. Du hast in den ergänzenden CSS einen Befehl, der den Haken wieder in Kraft setzt.
Vermute ich auch, habe aber keinen konkreten Anhaltspunkt. Wie könnte der lauten bzw. welche Variable nimmt da Einfluss?
Update: Problem gelöst. In meiner user.js war die Anweisung user_pref("browser.tabs.drawInTitlebar", false); der Übeltäter.
Alles anzeigen
Hallo @all...vorweg, ich nutze diese Funktion nicht, und bin mir nicht sicher ob sie fehlerfrei bei jedem user funktioniert.
Ich habe mir erlaubt einen CSS Code von Aris (danke dafür) etwas zu verändern.
So sieht das hier mit dem Code dann aus, ohne jegliche weitere Änderung am Firefox:
Bild
Wichtig, die Titelleiste vom Fx muss dabei ausgeblendet sein!
Wer also gerne mal testen möchte...
Danke Andreas!
Erst heute gesehen. Tipptopp und ich bin wieder glücklich.
ich bin wieder glücklich.
Hallo bigpen...das freut mich sehr
Juhuuu .... mit dem Code aus #10 in meiner userChrome.css funktioniert es bei mir am besten, das "alte" Aussehen meiner FF-Oberfläche mit der Tableiste unten wieder herzustellen! Schon einmal Danke an alle, die daran beteiligt waren, diesen Code zu entwickeln!
Einen kleinen Schönheitsfehler gibt es aber noch: Oberhalb meiner Lesezeichen-Symbolleiste befindet sich jetzt eine dünne Linie (siehe Bild). Wie kann ich diese noch wegbekommen?
[attachment=0]Bild10.jpg[/attachment]
mit dem Code aus #10
Hast du mal den aus Beitrag Nr. 1 getestet?
Ja, selbstverständlich :wink:
Es traten damit aber ein paar Darstellungsfehler im Bereich der Menüleiste auf, die mit Code aus #10 dann weg waren. Die störende Linie war aber auch mit dem Code aus #1 vorhanden.
Oberhalb meiner Lesezeichen-Symbolleiste
Also ich kann das hier nicht bestätigen :-??
Darum auf blauen Dunst:
Entweder:
oder auch:
Den Wert wenn dann anpassen.
Das erste hat nicht funktioniert, aber das hier
#PersonalToolbar{
margin-top:-2px!important;
}
war die Lösung: Die Linie ist verschwunden! Daher ein großes DANKE für die Hilfe!!!
Freut mich, war gern geschehen
2002Andreas (und die anderen natürlich)
Vielen Dank für die immer wiederkehrenden Hilfen zum CSS Code.
Jetzt bin ich soweit, dass ich auch mal Hilfe zum Thema "Tabs unten" benötige.
Betreibe den 68 ESR unter Linux Mint und Win7.
Bisher ging das mit der (fast) identischen userchrome.css. und 60 ESR sehr gut.
Aber jetzt ist der Aufwand zur Anpassung doch erheblich, und ich bin da aufgeschmissen.
Problem eins: Dein Code aus dem ersten Beitrag erfordert das Ausblenden der Titelleiste. Das geht unter Mint schief, FF verändert das Aussehen total (Maße und sogar Farben) und stürzt alsdann auch mal ab.
Verwende jetzt einen Code aus dieser Quelle, der eigentlich für Win10 sein soll, der aber auch unter Linux Mint alles perfekt darstellt. Alle Änderungen am GUI werden unterstützt (Menü / Titelleiste ein- / ausblenden ohne Fehler). Hinweis: kleine Anpassungen an den Abständen sind von mir ergänzt.
Der fragliche Code steht in Zeile 50 - 140, die Variablen dazu oben unter :root{}.
Weitere CSS sind nicht im Einsatz, lediglich Extra-Buttons sind per XML / JS eingebunden.
/*
Do not remove the @namespace line -- it's required for correct functioning -- set default namespace to XUL
*/
@namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);
/* verschiedene Variable (Farben, Positionen) */
:root {
/* Farben der Standard-Favicons */
--FolderColor: #df8000;
--WorldColor: #8184ff;
/* --TabBackgroundColor: #6e6e6e;
--TabTopColor: #cccccc;
--TabSelectColor: #2a2a2a;
--tab-line-color: #f9f9f9; */
/* Maße der Toolbars anpassen */
--ToolbarHeightAdjust: 25px;
--ToolbarMargingLeftAdjust: -4px;
--ToolbarMargingBottomAdjust: 1px;
--TabsToolbarTopAdjust: 1px;
--TabsToolbarBottomAdjust: 0px;
--TabsToolbarHeightAdjust: 28px;
--TabsToolbarFaviconLeftAdjust: -2px;
/* Abständer der Lesezeichen anpassen */
--LesezeichenMarginTop: 0px;
--LesezeichenMarginBottom: 0px;
--LesezeichenPopupMarginTop: -1px;
--LesezeichenSidebarHight: 22px;
--LesezeichenSidebarMinHight: 22px;
--LesezeichenPopupHight: 26px;
--LesezeichenPopupMinHight: 26px;
/* OS abhängige Variablen setzen / überschreiben - funktioniert hier nicht, nur außerhalb :root! */
}
/* +++++++++++++++++++ Tabs unten in Firefox 68+ ++++++++++++++++++++ */
/* ################################################################## */
/* TABS on bottom */
#navigator-toolbox toolbar:not(#nav-bar):not(#toolbar-menubar) {-moz-box-ordinal-group:10}
#TabsToolbar {-moz-box-ordinal-group:1000!important}
#TabsToolbar {
position: absolute !important;
bottom: 0 !important;
width: 100vw !important;
}
#tabbrowser-tabs {
width: 100vw !important;
}
#main-window:not([chromehidden*="toolbar"]) #navigator-toolbox {
padding-bottom: var(--tab-min-height) !important;
}
/* TABS height */
:root {
--tab-toolbar-navbar-overlap: 0px !important;
--tab-min-height: var(--TabsToolbarHeightAdjust) !important; /* adjust to suit your needs */
}
:root #tabbrowser-tabs {
--tab-min-height: var(--TabsToolbarHeightAdjust) !important; /* needs to be the same as above under :root */
--tab-min-width: 80px !important;
}
#TabsToolbar {
height: var(--tab-min-height) !important;
margin-top: var(--TabsToolbarTopAdjust) !important;
margin-bottom: var(--TabsToolbarBottomAdjust) !important;
box-shadow: ThreeDShadow 0 -1px inset, -moz-dialog 0 1px !important;
background-color: var(--toolbar-bgcolor) !important;
}
#tabbrowser-tabs,
#tabbrowser-tabs > .tabbrowser-arrowscrollbox,
.tabbrowser-tabs[positionpinnedtabs] > .tabbrowser-tab[pinned] {
min-height: var(--tab-min-height) !important;
max-height: var(--tab-min-height) !important;
}
.tab-icon-image{
margin-left: var(--TabsToolbarFaviconLeftAdjust) !important;
}
/* drag space */
.titlebar-spacer[type="pre-tabs"],
.titlebar-spacer[type="post-tabs"] {
width: 40px;
}
/* Override vertical shifts when moving a tab */
#navigator-toolbox[movingtab] > #titlebar > #TabsToolbar {
padding-bottom: unset !important;
}
#navigator-toolbox[movingtab] #tabbrowser-tabs {
padding-bottom: unset !important;
margin-bottom: unset !important;
}
#navigator-toolbox[movingtab] > #nav-bar {
margin-top: unset !important;
}
/* hide windows-controls */
#TabsToolbar #window-controls {
display:none!important;
}
/* move caption buttons to right of Tab bar */
#main-window[tabsintitlebar]:not([inFullscreen="true"]) #toolbar-menubar[autohide="true"] ~ #TabsToolbar .titlebar-buttonbox-container {
position: fixed !important;
right: 0 !important;
top: calc(6px + var(--tab-min-height)) !important;
display: block !important;
visibility: visible !important;
}
#toolbar-menubar[autohide="true"] ~ #TabsToolbar {
padding-right: 100px !important;
}
/* +++++++++++++++++ Tabs unten in Firefox 68+ End ++++++++++++++++++ */
/* ################################################################## */
/* Bookmarks Toolbar Maßanpassung */
#PersonalToolbar {
height: var(--ToolbarHeightAdjust) !important;
margin-left: var(--ToolbarMargingLeftAdjust) !important;
margin-bottom: var(--ToolbarMargingBottomAdjust) !important;
}
/* +++++++++++++++ Weitere Anpassungen ab Firefox 60 ++++++++++++++++ */
/* #################### diverse Abstände anpassen ################### */
/* Lesezeichen Sidebar Zeilenabstand kleiner */
.sidebar-placesTree treechildren::-moz-tree-row {
margin-top: var(--LesezeichenMarginTop) !important;
margin-bottom: var(--LesezeichenMarginBottom) !important;
height: var(--LesezeichenSidebarHight) !important;
min-height: var(--LesezeichenSidebarMinHight) !important;
}
/* Lesezeichen Popup Links Zeilenabstand kleiner, Popup-Breite größer */
@-moz-document url-prefix(chrome://browser/content/browser.xul){
.menuitem-iconic.bookmark-item.menuitem-with-favicon {
max-width:500px !important;
margin-top: var(--LesezeichenPopupMarginTop) !important;
margin-bottom: 0px !important;
height: var(--LesezeichenPopupHight) !important;
min-height: var(--LesezeichenPopupMinHight) !important;
/* .alingment:top !important;*/
}
}
/* Lesezeichen Popup Ordner Zeilenabstand kleiner, Popup-Breite größer */
@-moz-document url-prefix(chrome://browser/content/browser.xul){
menu[container="true"][class="menu-iconic bookmark-item"]{
max-width:500px !important;
margin-top: var(--LesezeichenPopupMarginTop) !important;
margin-bottom: 0px !important;
height: var(--LesezeichenPopupHight) !important;
min-height: var(--LesezeichenPopupMinHight) !important;
}
}
/* OS abhängige Korrekturen, falls benötigt - getestet mit win7 */
@media (-moz-os-version: windows-win7), (-moz-os-version: windows-win8), (-moz-os-version: windows-win10) {
/* Lesezeichen Sidebar Zeilenabstand kleiner */
.sidebar-placesTree treechildren::-moz-tree-row {
margin-top: 0px !important;
margin-bottom: 0px !important;
height: 22px !important;
min-height: 22px !important;
}
/* Lesezeichen Popup Links Zeilenabstand kleiner, Popup-Breite größer */
@-moz-document url-prefix(chrome://browser/content/browser.xul){
.menuitem-iconic.bookmark-item.menuitem-with-favicon {
max-width:500px !important;
margin-top: 0px !important;
margin-bottom: 0px !important;
height: 18px !important;
min-height: 18px !important;
}
}
/* Lesezeichen Popup Ordner Zeilenabstand kleiner, Popup-Breite größer */
@-moz-document url-prefix(chrome://browser/content/browser.xul){
menu[container="true"][class="menu-iconic bookmark-item"]{
max-width:500px !important;
margin-top: 0px !important;
margin-bottom: 0px !important;
height: 18px !important;
min-height: 18px !important;
}
}
}
/* ##################### FARBE der ICONS ändern ##################### */
/* Lesezeichen Sidebar - Farbe der Standardicons */
@-moz-document url("chrome://browser/content/bookmarks/bookmarksPanel.xul"),
url("chrome://browser/content/history/history-panel.xul"),
url-prefix("chrome://browser/content/places/bookmarksSidebar.xul"){
treechildren::-moz-tree-image(container) {fill:var(--FolderColor) !important;
}
}
/* Lesezeichen verwalten - Farbe der Standardicons */
@-moz-document url-prefix("chrome://browser/content/places/places.xul") {treechildren::-moz-tree-image(container) {
fill:var(--FolderColor) !important;
}
}
/* Lesezeichen verwalten - Farbe der Standardicons */
@-moz-document url-prefix("chrome://browser/content/places/places.xul") {treechildren::-moz-tree-image(container) {
fill:var(--FolderColor) !important;
}
}
/* Lesezeichen - Farbe der Standardicons */
@-moz-document url-prefix("chrome://browser/content/browser.xul") {
.bookmark-item[container="true"] {
fill:var(--FolderColor) !important;
}
}
/* Farbe der Weltkugel */
#cookiesChildren::-moz-tree-image(domainCol, leaf),
.alltabs-item > .menu-iconic-left > .menu-iconic-icon,
#page-proxy-favicon:not([src]),
treechildren::-moz-tree-image(title, leaf),
.bookmark-item:not([container]),
#PlacesToolbarItems > toolbarbutton[class="bookmark-item"][scheme="javascript"]:not([src]),
.sidebar-placesTreechildren::-moz-tree-image(leaf){
fill:var(--WorldColor) !important;
}
/* Icon für RSS Feed - namentlich zugeordnet */
toolbarbutton[class="bookmark-item"][label="News"][type="menu"][container="true"]{
list-style-image: url("./icons/rss.png") !important;}
/* ########################### Spezielles ########################### */
/* Höhenausrichtung für Memory Display, falls aktiv */
#MemoryDisplay{
margin-top:7px !important;
}
/*
für neue verschiebbare Toolbar Buttons, siehe
http://custombuttons.sourceforge.net/forum/viewtopic.php?f=2&t=37575&sid=ff5a2c61450ac6407813abc187956b05#p87139
*/
toolbarbutton#alltabs-button {
-moz-binding: url("userChrome.xml#js");
}
Alles anzeigen
Damit funktioniert es unter Win 7 aber nicht mehr so gut.
Abgesehen von den Abständen, die ich noch justieren muß, ist es auch so, daß
1. sich beim Einblender der Menüleiste die Tabs auf der Tableiste nach oben verschieben und überstehen in die Lesezeichenleiste (das Ausblenden der Titelleiste geht gar nicht gut, noch mehr Verschiebungen)
2. die Farben der aktiven / inaktiven Tabs nicht stimmen
3. bei vielen Tabs die Tableiste rechts "durcheinander" kommt (sie wird nicht vollständig genutzt, die Buttons werden kleiner und verschoben).
Zumindest 1. und 2. sind mir wichtig.
Bin da echt überfordert... Hat jemand einen Rat? DANKE!!
So sieht das hier mit der ESR 68 aus:
Die Titelleiste ist eingeblendet:
Tableiste unten:
#navigator-toolbox toolbar:not(#nav-bar):not(#toolbar-menubar) {
-moz-box-ordinal-group: 10;
}
#TabsToolbar {
-moz-box-ordinal-group: 1000!important;
}
#TabsToolbar {
position: absolute !important;
bottom: 0 !important;
width: 100vw !important;
}
#tabbrowser-tabs {
width: 100vw !important;
}
#main-window:not([chromehidden*="toolbar"]) #navigator-toolbox {
padding-bottom: var(--tab-min-height) !important;
}
:root {
--tab-toolbar-navbar-overlap: 0px !important;
--tab-min-height: 33px !important;
}
:root #tabbrowser-tabs {
--tab-min-height: 33px !important;
--tab-min-width: 150px !important;
--tab-max-width: 150px !important;
}
Alles anzeigen
Tabs farbig:
.tabbrowser-tab:not([selected="true"]) {
opacity: 0.7 !important;
color: blue !important;
background: yellow !important;
font-weight: bold !important;
}
.tabbrowser-tab[selected="true"] {
opacity: 0.5 !important;
color: white !important;
background: red !important;
}
Alles anzeigen
Getestet unter Win 10.
Farben und Werte kannst/musst du dir anpassen.
Bei mir funktioniert der Code leider nicht, denn dann verschiebt sich die Tableiste ganz merkwürdig in die Adressleiste rein und bleibt trotzdem weiterhin OBEN.
Bei mir funktioniert der Code leider nicht
Dann funkt dir ein anderer Code dazwischen.
Hier sieht das mit der aktuellen Version vom Fx so aus:
Danke für den Code.
Unter Linux einwandfrei!
Aber in Win7: wenn ich das Menü einblende, verschieben sich die Tabs aus der Leiste heraus.
Und bei vielen Tabs werden die Pfeil- und der Newtab-Button generell nicht richtig dargestellt:
Noch ein Hinweis: Win7 läuft in der VBox unter Linux, war bisher aber kein Problem in der Darstellung des FF. Es wurde nur von 60esr auf 68esr upgedatet.
Ja, wie im ersten Beitrag von mir genannt.
Und der Fehler muß damit zusammenhängen, denn mit dem Code von Dir allein in der CSS funktioniert es.
Ich muß mir das noch mal genauer ansehen, melde mich dann.
Ergebnis: die Tableistenhöhe darf nicht unter ~ 30px sein.
Und um weitere *.js-Scripte einzubinden wird diese userchrom.xml verwendet:
<?xml version="1.0"?>
<!-- Copyright (c) 2017 Haggai Nuchi
Available for use under the MIT License:
https://opensource.org/licenses/MIT
-->
<!-- Run userChrome.js/userChrome.xul and .uc.js/.uc.xul/.css files -->
<bindings xmlns="http://www.mozilla.org/xbl">
<binding id="js">
<implementation>
<constructor><![CDATA[
if(window.userChromeJsMod) return;
window.userChromeJsMod = true;
var chromeFiles = FileUtils.getDir("UChrm", []).directoryEntries;
var xulFiles = [];
var sss = Cc['@mozilla.org/content/style-sheet-service;1'].getService(Ci.nsIStyleSheetService);
while(chromeFiles.hasMoreElements()) {
var file = chromeFiles.getNext().QueryInterface(Ci.nsIFile);
var fileURI = Services.io.newFileURI(file);
if(file.isFile()) {
type = "none";
if(/(^userChrome|\.uc)\.js$/i.test(file.leafName)) {
type = "userchrome/js";
}
else if(/(^userChrome|\.uc)\.xul$/i.test(file.leafName)) {
type = "userchrome/xul";
}
else if(/\.as\.css$/i.test(file.leafName)) {
type = "agentsheet";
}
else if(/^(?!(userChrome|userContent)\.css$).+\.css$/i.test(file.leafName)) {
type = "usersheet";
}
if(type != "none") {
console.log("----------\\ " + file.leafName + " (" + type + ")");
try {
if(type == "userchrome/js") {
Services.scriptloader.loadSubScriptWithOptions(fileURI.spec, {target: window, ignoreCache: true});
}
else if(type == "userchrome/xul") {
xulFiles.push(fileURI.spec);
}
else if(type == "agentsheet") {
if(!sss.sheetRegistered(fileURI, sss.AGENT_SHEET))
sss.loadAndRegisterSheet(fileURI, sss.AGENT_SHEET);
}
else if(type == "usersheet") {
if(!sss.sheetRegistered(fileURI, sss.USER_SHEET))
sss.loadAndRegisterSheet(fileURI, sss.USER_SHEET);
}
} catch(e) {
console.log("########## ERROR: " + e + " at " + e.lineNumber + ":" + e.columnNumber);
}
console.log("----------/ " + file.leafName);
}
}
}
setTimeout(function loadXUL() {
if(xulFiles.length > 0) {
document.loadOverlay(xulFiles.shift(), null);
setTimeout(loadXUL, 5);
}
}, 0);
]]></constructor>
</implementation>
</binding>
</bindings>
Alles anzeigen
Wenn alleine die mit eingebunden wird, ist die Darstellung unter Win7 generell im Eimer...
Ohne die sind aber die selbst per *.js erstellten Buttons erstmal weg, klar.
Es sieht so aus, als wenn ich das generell umstellen muß, es gibt ja die Variante mit config.js und userChromeJS.js
(Oder kann diese XML angepaßt werden?)
Ich test das morgen.