Hilfedialog (Anpassungen)

    Firefox-Version
    95.0.2 (64-Bit)
    Betriebssystem
    Windows 10 Version 21H2 (Build 19044.1415)

    Es geht um Grafiken!

    Ich habe es nach langem ausprobieren nun endlich geschafft das Häkchen mit einem Icon auszutauschen.

    Das ursprüngliche "Symbol" war wohl etwas zu groß. (1500px*1154px) :D

    Nun ist es 32px*32px, aber um es anzeigen zu können musste ich dennoch den Code anpassen!

    CSS
    #icons > .noUpdatesFound {
        fill: transparent !important; 
        background-image: url("file:///C:/Symbols/tick_2.png") !important;
        background-repeat: no-repeat !important;   
        padding-top: 10px !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
        padding-bottom: 10px !important;
}

    Damit nun aber auch der Schriftzug mittig dazu passte, auch hier eine kleine Anpassung.

    CSS
    label[data-l10n-id="update-noUpdatesFound"] {

    color: #ff9600 !important;
    font-weight: 400 !important;
    font-size: 1.5em !important;
    margin-left: 1px !important;
    margin-top: 10px !important;
    margin-bottom: 5px !important;
}

    Und das Resultat schaut wie folgt aus.

    So weit, so gut!

    Was passiert aber ganz zu Anfang, wenn man den "About:Dialog" öffnet?

    Ich habe einen Screenshot gemacht!

    Seht Ihr?

    Da ist eine kleine Animation

    und

    der Schriftzug "Nach Updates suchen ..."

    Das passt so gar nicht!

    Nun habe ich versucht den Schiftzug zu finden und "Anzupassen".

    Alles was ich finden konnte war

    CSS
    #checkForUpdatesButton > hbox:nth-child(1) > label:nth-child(2)

    Damit geht es aber nicht!

    Auch wollte ich die interne Grafik mit einem GIF ersetzen,

    aber auch da laufe ich vor die Wand.

    Mein vergeblicher Ansatz:

    CSS
    #icons > .checkForUpdates {
        fill: transparent !important; 
        background-image: url("file:///C:/Symbols/reload.gif") !important;
        background-repeat: no-repeat !important;   
        padding-top: 10px !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
        padding-bottom: 10px !important;
}

    Ich erbitte daher Hilfe.

    Gruß

    Mira

    PS: Bin gespannt, was passiert, wenn es ein Update gibt!

    Mit <3lichem Gruß

    Mira

    Einmal editiert, zuletzt von Mira_Belle (4. Januar 2022 um 16:14)

    Vielen Dank Dharkness

    Habe daraus das gemacht:

    CSS
    #updateDeck #checkingForUpdates label {
    color: #eee8aa !important;
    font-weight: 200 !important;
    font-size: 1.2em !important;
    margin-left: 1px !important;
    margin-top: 10px !important;
    margin-bottom: 5px !important;
}

    Und so sieht jetzt aus:

    Jetzt ist nur noch das "Gif" dran.

    Gruß

    Mira

    Mit <3lichem Gruß

    Mira

    Einmal editiert, zuletzt von Mira_Belle (4. Januar 2022 um 16:36)

    Und das Gif.

    Habe es geschafft, dass es angezeigt wird,

    ABER

    der Code

    CSS
    #icons > .update-throbber {
        fill: transparent !important; 

}

    blendet das "fest verdrahtete" chrome://global/skin/icons/loading.png leider nicht aus.

    Somit habe ich zwei sich überlagernden Animationen.

    Das ist nicht wie gewollt.

    Hier mal den ganzen Code.

    CSS
    #icons > .update-throbber {
        fill: transparent !important; 
        background-image: url("file:///C:/Symbols/2.gif") !important;
        background-repeat: no-repeat !important;   
        padding-top: 10px !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
        padding-bottom: 10px !important;
}

    Das Gif wird an richtiger Stelle angezeigt.

    CSS
    #icons > .update-throbber {
    visibility: hidden !important;
}

    Blendet BEIDE Animationen aus!

    Mit <3lichem Gruß

    Mira

    Einmal editiert, zuletzt von Mira_Belle (4. Januar 2022 um 23:09)

    Zitat von Mira_Belle

    Entweder hat keiner Lust,

    Lust hab ich schon, denn das wäre die vorletzte Baustelle in meinem Dialog.

    Ich will aber erst meinen Code noch aufräumen.

    Haste mal versucht, das icon zu löschen und Dein Gif mit ::bevor vor Deinem Text einzufügen?

    W11 Home 64bit - FF120.x

    Mira_Belle:

    Guck mal, ob Du damit was anfangen kanst:

    Ich bin damit recht weit gekommen, muß aber jetzt Bubu machen :sleeping:

    Pfad zum Icon und einige Werte wirst Du anpassen müssen ;)

    Wenn Du das GIF möchtest:

    W11 Home 64bit - FF120.x

    Ich "kämpfe" hier wie eine Besessene. ||

    Muss nun aber auch Schluss machen.

    Mit folgendem Code komme ich schon ganz gut hin.

    Aber nur fast :!:

    Das Problem ist, dass einige Zeilen und "Links", ich würde schätzen 5px bis 10px,

    nach der Updatesuche nach rechts hüpfen.



    Das heißt, sie stehen etwas zu weit links.

    Und zwar:

    95.0.2 (64-Bit) und der dahinterstehende Link Neue Funktionen und Änderungen

    sowie die kompletten Links ganz unten :!:

    Die da wären Information zur Lizenzierung, Endanwenderrechte sowie Datenschutzbestimmungen

    In diesem Zusammenhang könnte noch Folgendes ganz wichtig sein!

    Das Fenster verbreitert sich genau um dies 5px bis 10px.

    Allen eine gute Nacht

    Gruß

    Mira

    Mit <3lichem Gruß

    Mira

    Einmal editiert, zuletzt von Mira_Belle (6. Januar 2022 um 00:44)

    Ich bekomme es einfach nicht besser hin.

    Zwar konnte ich das "Springen" der Zeilen und der Links beheben,
    aber die Positionen der Grafiken stimmen nicht über ein.

    Ich bin fertig, fix & fertig :!:

    So schaut es z.Z. aus.

    &

    Ich habe es mit nachfolgendem Code hinbekommen.

    Des Weiteren musste ich den Abstand zwischen

    Nach Updates suchen ... bzw. Firefox ist aktuell

    und

    95.0.2 (64-Bit) Neue Funktionen und Änderungen

    um 5px vergrößern.

    Nur für den Fall, dass jemand eine Idee hat,

    wie ich die beiden "Grafiken" deckungsgleich bekomme,

    ohne dass es mir alles wieder total zerhaut,

    immer her mit den Ideen.

    Es grüßt eine platte.

    Mira

    Mit <3lichem Gruß

    Mira

    Mira_Belle :

    :/ Gibste mal bitte deinen kompletten Code?

    Und eventuell benutzte GFX für Haken und animiertes GIF ^^

    Wenn ich meinen Zappelphilip, den ich im Thread nebenan angeprangert hab, gebändigt bekomme, tausch ich meinen Dialog mal gegen Deinen und bastel damit weiter ;)

    W11 Home 64bit - FF120.x

    Zitat von harff182

    Mira_Belle :

    :/ Gibste mal bitte deinen kompletten Code?

    Ei Sischer, is nach nett geputzt!

    Da isser:

    Un die Grafiken ach:

    Mit <3lichem Gruß

    Mira

    Nur damit ich Deine Vorstellung richtig verstehe:

    "Nach Updates suchen" und "Firefox ist aktuell" in gleichem Font unf Fontgröße in einer Flucht zur darunterliegenden Version.

    Und die Icons jeweils in gleicher/ähnlicher Größe und Abstand links davor.

    Aber erwarte keine Wunder, im Gegensatz zu 2002Andreas bin ich kein Houngan :D

    W11 Home 64bit - FF120.x

    Zitat von harff182

    Mira_Belle :

    Sorry, ich geb auf :(

    Ich komm mit dem "Update-Check" nicht weiter, da Dein Code sich von meinem doch sehr stak unterscheidet.

    Tut mir leid, hab ich mich wohl übernommen ;(

    Ich geb' nicht so schnell auf!

    Es wurmt mich.

    Eventuell hilft mir ja auch Andreas oder Ralf?


    Ach, ich fand das Fuchsköpfchen so schön und habe eine Vorlage davon in den unendlichen Weiten

    des Internetzes gefunden, bearbeitet und nach endlos erscheinenden Versuchen

    zu guter Letzt doch noch einbinden können.

    Ich hoffe, Du hast da nix dagegen?


    Gruß

    Mira


    Ach, geputzt habe ich auch :!:

    Anpassungen der Adressleiste, des Hamburgermenüs, der Tabs, der Lesezeichen sowie der About-Page

    habe ich in eigene CSS ausgelagert und per @import eingebunden.


    Was mir nicht so recht gelingen will, ist dass das Fuchsköpfchen aus einem Unterordner

    C:\Users\M**\AppData\Roaming\Mozilla\Firefox\Profiles\*.default-release\chrome\content\

    geladen wird.

    Z.Z. sieht der Code noch so aus =>

    CSS
    #leftBox {
    appearance: none !important;
    background: transparent url("file:///C:/Symbols/index.png") !important;
    background-repeat: no-repeat! important;
    background-position: center 40% !important;
    min-width: 210px !important;
    margin-top: 20px !important;
    }


    Gute Nacht wünscht ...

    Mira

    Mit <3lichem Gruß

    Mira

    Zitat von Mira_Belle

    dass das Fuchsköpfchen aus einem Unterordner

    Da du mich direkt angesprochen hast.

    Was genau meinst du denn damit?

    Ich nutze u.a. einen Ordner Icons im Ordner chrome.

    Der Pfad ist dann:

    url("..//Icons/Hilfe6.png") !important;

    So habe ich es für ein anderes Profil:

    file:///C:/Users/Andi/Icons/Firefox/4.jpg

    Das ist ein eigener Ordner auf C:..Benutzer...Andi..Icons

    Und so muss der Pfad lauten, wenn du die ShadowCSS benutzt:

    file:///C:/Users/Andi/AppData/Roaming/Mozilla/Firefox/Profiles/http://52yvvqfz.Neu/chrome/Icons/Hilfe8.png

    Also der genau Pfad zum Profil.

    Zu deiner Frage zum Throbber.

    Ich könnte dir nur eine andere Farbe für den vorhandenen anbieten:

    Z.B. grün

    oder auch rot:

    Ein eigenes Icon ist nicht das Problem, sondern(zumindest für mich)das vorhandene blaue zu entfernen, oder zumindest unsichtbar zu machen.

    Danke @Andreas.

    Das mit den Pfadangaben habe ich noch immer nicht so richtig gerafft!

    Habe nun unter "C:/Users/M*/" einen neuen Ordner angelegt und dann darauf "verlinkt.

    Sieht so aus: background: transparent url("file:///C:/Users/M*/image/index.png") !important;

    Nur so klappt es! (Mit außnahme dem direkten Link auf C:/Symbols/index.png

    Mit background: transparent url("..//image/index.png") !important; klappt es nicht,

    egal ob mit zwei Punkten oder nur mit einem.

    Die userChrome.css liegt direkt im Ordner chrome

    Zu meiner Frage zum Throbber.

    Da ging es darum, dass die Grafiken nicht deckungsgleich sind!

    Mein Gif steht näher am Schriftzug als mein Png.

    Eventuell weißt Du ja Rat.

    Gruß

    Mira

    PS: Interessanterweise ist das GIF großer als das PNG

    Mit <3lichem Gruß

    Mira