Beiträge von Thomas S.

Thomas S.

Zitat von 2002Andreas

Ich vermute mal dieser.

#54

Eindeutig nein.

Nur dieser komplette Code in der userChrome.css (schon etwas modifiziert wegen der Tests) zeigt dieses Verhalten.

CSS

/*
 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 {

/* Abstände der Lesezeichen anpassen */

    --LesezeichenSidebarHight: 20px;
    --LesezeichenSidebarMinHight: 20px;
    --LesezeichenPopupHight: 20px;
    --LesezeichenPopupMinHight: 20px;
    
}


/* +++++++++++++++ Weitere Anpassungen ab Firefox 60 ++++++++++++++++ */

/* #################### diverse Abstände anpassen ################### */

/* Lesezeichen Sidebar Zeilenabstand kleiner */
 .sidebar-placesTree treechildren::-moz-tree-row {
    margin: center !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: center !important;
        height: var(--LesezeichenPopupHight) !important;
        min-height: var(--LesezeichenPopupMinHight) !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: center !important;
        height: var(--LesezeichenPopupHight) !important;
        min-height: var(--LesezeichenPopupMinHight) !important;
    }
}

Alles anzeigen

Thomas S.

Zitat von 2002Andreas

Er hat sie nachträglich eingesetzt

Richtig. Und korrekt im Edit erwähnt, Zitat: "Einmal editiert, zuletzt von Thomas S. (Vor 17 Minuten) aus folgendem Grund: Code korrigiert".

Und auch bei mir gilt:

Fehler, die ich mache und die andere finden können von denen gerne behalten werden...

Thomas S.

Hallo Andreas.

Codefehler war ein Kopierfehler hier her...

Ich habe mal die Sidebar und das Menü zusammen dargestellt, beides mit Zeilenhöhe 20px, wie es sein soll.

Die Favicons im Menü sind erheblich kleiner (in der Höhe gestaucht) und scheinbar nach oben verschoben.

Kann die Skalierung der Favicons überschrieben / abgestellt werden?

Thomas S.

Hallo, ich habe noch ein kleines "Problem".

Wenn ich den Zeilenabstand in den Lesezeichenmenüs verringere, werden die Favicons mindestens in der Höhe skaliert.

Und die Ausrichtung stimmt nicht mehr, Icon und Text sind nicht mehr auf einer Höhe.

Extrembeispiel mit 18px Zeilenhöhe (so knapp soll das nicht werden, hier nur zur Verdeutlichung):

Bisher gefundenen CSS-Code dazu:

CSS

/* 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;
    }
}

Alles anzeigen

Die Skalierung fängt schon bei relativ großen Zeilenhöhen (ca. 25 px) an.

Wie kann ich den Zeilenabstand verringern, ohne das die Icons skaliert werden?

Schonmal Danke für die Hilfe!

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

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.

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;
}

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.

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.

Thomas S.

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

<?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.

Thomas S.

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.

Thomas S.

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.

CSS

/*
 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!!

Beiträge von Thomas S.

Favicons in Lesezeichenmenüs Größe anpassen

Favicons in Lesezeichenmenüs Größe anpassen

Favicons in Lesezeichenmenüs Größe anpassen

Favicons in Lesezeichenmenüs Größe anpassen

Tabs unten - CSS Code

Tabs unten - CSS Code

Tabs unten - CSS Code

Tabs unten - CSS Code

Tabs unten - CSS Code

Tabs unten - CSS Code

Tabs unten - CSS Code

Tabs unten - CSS Code