Hilfedialog (Anpassungen)

Mira_Belle

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)

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!

Dharkness

Hallo Mira_Belle,

baue Dir mal das ↓ für Dich passend um.

CSS

#updateDeck #checkingForUpdates label {
    border: 1px solid #B2B2B2 !important;
    background-color: #eee8aa !important;
    color: #2B2A33 !important;
}

Mira_Belle

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

Mira_Belle

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!

Mira_Belle

Entweder hat keiner Lust,

oder was wahrscheinlicher scheint,

es geht einfach nicht.

Danke an alle, die nachgeschaut haben, aber auch nicht weiter kamen.

Gruß

Mira.

harff182

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?

harff182

Mira_Belle:

Guck mal, ob Du damit was anfangen kanst:

CSS

/*    Mira_Belle-Ideen*/    
    #updateDeck #checkingForUpdates label {
        color: white !important;
        font-weight: 500 !important;
        font-size: 1.2em !important;
        margin-left: 1px !important;
        margin-top: 10px !important;
        margin-bottom: 5px !important;
    }

    /* Das Gif wird an richtiger Stelle angezeigt.*/
    #icons >.update-throbber{
        fill: transparent !important; 
        background-image: url("../icons/ajax-loader.gif") !important;
        background-repeat: no-repeat !important;   
        padding-top: 10px !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
        padding-bottom: 10px !important;
    }
    
    /*Blendet BEIDE Animationen aus!*/
    #icons > .update-throbber {
        visibility: hidden !important;
    }

    #updateDeck #checkingForUpdates > label {
        appearance: none !important;
        border: 2px solid darkgrey !important;
        border-radius: 10px !important;
        background: lightgreen url('../icons/ajax-loader.gif') no-repeat 10px 6px !important;
        background-size: 16px !important;
        color: black !important;
        font-size: 14px !important;
        min-height: 28px !important;
        margin: 10px 0 0 -40px !important;
        padding: 3px 20px 5px 37px !important;
    }

Alles anzeigen

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

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

Wenn Du das GIF möchtest:

Mira_Belle

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.

CSS

#updateDeck #checkingForUpdates > label {
    appearance: none !important;
    background: #292c2f url("file:///C:/Symbols/2.gif") no-repeat 10px 0px !important;
    background-size: 36px !important;
    color: #eee8aa !important;
    font-weight: 200 !important;
    font-size: 1.2em !important;
    min-height: 28px !important;
    margin-top: 0px !important;
    margin-right: -10px !important;
    margin-bottom: 0px !important;
    margin-left: -40px !important;
    padding-top: 10px !important;
    padding-left: 65px !important;
    padding-right: 10px !important;
    padding-bottom: 0px !important;
}

Alles anzeigen

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

Mira_Belle

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.

CSS

label[data-l10n-id="update-noUpdatesFound"] {
    appearance: none !important;
    color: #ff9600 !important;
    font-weight: 400 !important;
    font-size: 1.5em !important;
    margin-left: 1px !important;
    margin-top: 10px !important;
    margin-bottom: 5px !important;
}

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

#updateDeck #checkingForUpdates > label {
    appearance: none !important;
    background: #292c2f url("file:///C:/Symbols/sample_3.gif") no-repeat 0px 0px !important;
    background-size: 48px !important;
    color: #eee8aa !important;
    font-weight: 200 !important;
    font-size: 1.2em !important;
    min-height: 28px !important;
    margin-top: 0px !important;
    margin-right: -10px !important;
    margin-bottom: 10px !important;
    margin-left: -40px !important;
    padding-top: 15px !important;
    padding-left: 45px !important;
    padding-right: 10px !important;
    padding-bottom: 10px !important;
}

#icons > .update-throbber {
    padding-top: 10px !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
    padding-bottom: 10px !important;    
}

Alles anzeigen

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

harff182

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

Mira_Belle

Zitat von harff182

Mira_Belle :
Gibste mal bitte deinen kompletten Code?

Ei Sischer, is nach nett geputzt!

Da isser:

CSS

@-moz-document url-prefix("chrome://browser/content/aboutDialog.xhtml")
{
    /*---------------------------------------------------*/
    /****       Anpassungen an dem About:Dialog       ****/
    /*---------------------------------------------------*/

    #aboutDialog {
        margin-top: 20px !important;
        margin-bottom: 20px !important;
        line-height: 1.5 !important;
}

    #aboutDialog vbox,
    #aboutDialogContainer hbox,
    #clientBox vbox,
    #contributeDesc > label:nth-child(1),
    #contributeDesc > label:nth-child(2),
    #releasenotes,
    #trademark,
    #updateButton,
    label.bottom-link:nth-child(3),
    [href='about:credits'],
    [href='about:license'],
    [href='about:rights'],
    [href='https://www.mozilla.org/?utm_source=firefox-browser&utm_medium=firefox-desktop&utm_campaign=about-dialog'] 
    {
            font-size: 15px !important;
    }

    #rightBox::before {
        content: "Firefox Browser" !important;
        font-size: 40px !important;
        font-weight: 700 !important;
        color: #fff582 !important;
        text-shadow: 4px 4px red !important;
    }

    #rightBox {
        background-image: none !important;
        padding-top: 1px !important;      
        margin-top: 1px !important;
    }

    #aboutDialog,
    #bottomBox,
    #clientBox {
        background-color: #292c2f !important;
    }



    #icons  .icon {
        margin: 10px !important;
    }







label[data-l10n-id="update-noUpdatesFound"] {
    appearance: none !important;
    color: #ff9600 !important;
    font-weight: 400 !important;
    font-size: 1.5em !important;
    margin-left: 1px !important;
    margin-top: 10px !important;
    margin-bottom: 5px !important;
}

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

#updateDeck #checkingForUpdates > label {
    appearance: none !important;
    background: #292c2f url("file:///C:/Symbols/sample_3.gif") no-repeat 0px 0px !important;
    background-size: 48px !important;
    color: #eee8aa !important;
    font-weight: 200 !important;
    font-size: 1.2em !important;
    min-height: 28px !important;
    margin-top: 0px !important;
    margin-right: -10px !important;
    margin-bottom: 10px !important;
    margin-left: -40px !important;
    padding-top: 15px !important;
    padding-left: 45px !important;
    padding-right: 10px !important;
    padding-bottom: 10px !important;
}

#icons > .update-throbber {
    padding-top: 10px !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
    padding-bottom: 10px !important;    
}
    
/*    
#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;
}    */  
    /*    Versionsanzeige        */
    
    #version.update {
        margin-left: 10px !important;
        font-size: 19px !important;
        color: orchid !important;
        padding-top: 5px !important;
        }

    /*     ohne Unterstrich    */

    #releasenotes,                                              /*     Neue Funktionen und Änderungen    */  
    #submit-feedback,                                         /*     Feedback senden    */ 
    [href='https://www.mozilla.org/?utm_source=firefox-browser&utm_medium=firefox-desktop&utm_campaign=about-dialog'],
    [href='about:credits'],                                      /*     globalen Comunity    */  
    #contributeDesc > label:nth-child(1),                      /*     Spenden Sie    */  
    #contributeDesc > label:nth-child(2),                      /*     machen Sie mit!    */  
    [href='about:license'],                                      /*     Information zur Lizensierung    */  
    [href='about:rights'],                                       /*     Endanwenderrechte    */  
    label.bottom-link:nth-child(3)                              /*     Datenschutzbestimmungen    */  
    {
        text-decoration: none !important;
    }
    
    description.text-blurb:nth-child(3) > label:nth-child(1)  {
        text-decoration: none !important;
    }

    /*    Text    */
    
    .text-blurb
    {
        font-size: 15px !important;
        color: #e1e1e1 !important;
        padding-right: 1px !important;
    }

    /*     Neue Funktionen und Änderungen    */
    
    #releasenotes {
        appearance: none !important;
        background: #5b5b66 !important;
        color: #e1e1e1 !important;
        margin-left: 10px !important;
        margin-right: 20px !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
        padding-bottom: 2px !important;
        margin-top: 2px !important;
        border-color: dodgerblue !important;
        border-style: outset !important;
        border-width: 3px !important;
        background-position: 12px 4px !important;
        border-radius: 8px!important;
    }
    #releasenotes:hover {
        background: #e1e1e1 !important;
        background-position: 12px 4px !important;
        color: #292c2f !important;
    }

    /*     Firefox-Hilfe    */
    
    description.text-blurb:nth-child(3) > label:nth-child(1) {
        appearance: none !important;
        background: #5b5b66 !important;
        color: #e1e1e1 !important;
        margin-left: 10px !important;
        margin-top: 35px !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
        padding-bottom: 2px !important;
        border-color: dodgerblue !important;
        border-style: outset !important;
        border-width: 3px !important;
        background-position: 12px 4px !important;
        border-radius: 8px!important;      
    }
    description.text-blurb:nth-child(3) > label:nth-child(1):hover {
        background: #e1e1e1 !important;
        background-position: 12px 4px !important;
        color: #292c2f !important;
    }

    /*     Feedback senden    */
    
    #submit-feedback {
        appearance: none !important;
        background: #5b5b66 !important;
        color: #e1e1e1 !important;
        margin-left: 10px !important;
        margin-top: 35px !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
        padding-bottom: 2px !important;
        border-color: dodgerblue !important;
        border-style: outset !important;
        border-width: 3px !important;
        background-position: 12px 4px !important;
        border-radius: 8px!important;      
    }
    #submit-feedback:hover {
        background: #e1e1e1 !important;
        background-position: 12px 4px !important;
        color: #292c2f !important;
    }

    /*     Mozilla    */
    
    [href='https://www.mozilla.org/?utm_source=firefox-browser&utm_medium=firefox-desktop&utm_campaign=about-dialog'] {
        appearance: none !important;
        background: #5b5b66 !important;
        color: #e1e1e1 !important;
        margin-left: 1px !important;
        margin-right: 1px !important;
        margin-top: 10px !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
        padding-bottom: 1px !important;     
        border-color: dodgerblue !important;
        border-style: outset !important;
        border-width: 3px !important;
        background-position: 12px 4px !important;
        border-radius: 8px!important;          
    }
    [href='https://www.mozilla.org/?utm_source=firefox-browser&utm_medium=firefox-desktop&utm_campaign=about-dialog']:hover {
        background: #e1e1e1 !important;
        background-position: 12px 4px !important;
        color: #292c2f !important;
    }

    /*     globalen Comunity    */
    
    [href='about:credits'] {
        appearance: none !important;
        background: #5b5b66 !important;
        color: #e1e1e1 !important;
        margin-left: 1px !important;
        margin-right: 1px !important;
        margin-top: 10px !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
        padding-bottom: 1px !important;     
        border-color: dodgerblue !important;
        border-style: outset !important;
        border-width: 3px !important;
        background-position: 12px 4px !important;
        border-radius: 8px!important;        
    }
    [href='about:credits']:hover {
        background: #e1e1e1 !important;
        background-position: 12px 4px !important;
        color: #292c2f !important;
    }
/*    Hinter dem Komma einen Zeilenumbruch erzwingen    */

    #detailsBox > description#communityDesc {
        max-width: 570px !important;
    }

    /*     Spenden Sie    */
    
    #contributeDesc > label:nth-child(1) {
        appearance: none !important;
        background: #5b5b66 !important;
        color: #e1e1e1 !important;
        margin-left: 1px !important;
        margin-right: 1px !important;
        margin-top: 2px !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
        padding-bottom: 2px !important;     
        border-color: dodgerblue !important;
        border-style: outset !important;
        border-width: 3px !important;
        background-position: 12px 4px !important;
        border-radius: 8px!important;        
    }
    #contributeDesc > label:nth-child(1):hover {
        background: #e1e1e1 !important;
        background-position: 12px 4px !important;
        color: #292c2f !important;
    }

    /*     machen Sie mit!    */
    
    #contributeDesc > label:nth-child(2) { 
        appearance: none !important;
        background: #5b5b66 !important;
        color: #e1e1e1 !important;
        margin-left: 1px !important;
        margin-right: 1px !important;
        margin-top: 2px !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
        padding-bottom: 2px !important;     
        border-color: dodgerblue !important;
        border-style: outset !important;
        border-width: 3px !important;
        background-position: 12px 4px !important;
        border-radius: 8px!important;        
    }
    #contributeDesc > label:nth-child(2):hover {
        background: #e1e1e1 !important;
        background-position: 12px 4px !important;
        color: #292c2f !important;
    }

    /*     Information zur Lizensierung    */
    
    [href='about:license'] {
        appearance: none !important;
        background: #5b5b66 !important;
        color: #e1e1e1 !important;
        margin-left: 10px !important;
        margin-right: 10px !important;
        margin-top: 1px !important;
        margin-bottom: 20px !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
        padding-bottom: 2px !important;     
        border-color: dodgerblue !important;
        border-style: outset !important;
        border-width: 3px !important;
        background-position: 12px 4px !important;
        border-radius: 8px!important;             
    }
    [href='about:license']:hover {
        background: #e1e1e1 !important;
        background-position: 12px 4px !important;
        color: #292c2f !important;
    }

    /*     Endanwenderrechte    */
    
    [href='about:rights'] {
        appearance: none !important;
        background: #5b5b66 !important;
        color: #e1e1e1 !important;
        margin-left: 10px !important;
        margin-right: 10px !important;
        margin-top: 1px !important;
        margin-bottom: 20px !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
        padding-bottom: 2px !important;     
        border-color: dodgerblue !important;
        border-style: outset !important;
        border-width: 3px !important;
        background-position: 12px 4px !important;
        border-radius: 8px!important;        
    }
    [href='about:rights']:hover {
        background: #e1e1e1 !important;
        background-position: 12px 4px !important;
        color: #292c2f !important;
    }

    /*     Datenschutzbestimmungen    */
    
    label.bottom-link:nth-child(3) {
        appearance: none !important;
        background: #5b5b66 !important;
        color: #e1e1e1 !important;
        margin-left: 10px !important;
        margin-right: 10px !important;
        margin-top: 1px !important;
        margin-bottom: 20px !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
        padding-bottom: 2px !important;     
        border-color: dodgerblue !important;
        border-style: outset !important;
        border-width: 3px !important;
        background-position: 12px 4px !important;
        border-radius: 8px!important;        
    }
    label.bottom-link:nth-child(3):hover {
        background: #e1e1e1 !important;
        background-position: 12px 4px !important;
        color: #292c2f !important;
    }
/*    Text ganz unten, Logo und Warenzeichen    */
    
    #trademark {
        padding-top: 10px !important;
        text-align: center !important;
        color: #e1e1e1 !important;
        margin-block: 15px !important;
        font-size: 13px !important;    
        font-weight: 700 !important;  
        
    }

}

Alles anzeigen

Un die Grafiken ach:

harff182

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

2002Andreas

Zitat von harff182

im Gegensatz zu 2002Andreas

Ich bin auch nur ein kleiner Bastler, der hin und wieder Glück hat mit einem CSS Code.

Mira_Belle

Zitat von 2002Andreas

Ich bin auch nur ein kleiner Bastler, der hin und wieder Glück hat mit einem CSS Code.

Tiefstapler, Du.

harff182

Nix Da - Du bist unser CSS-Voodoo-Priester

grisu2099

Zitat von 2002Andreas

der hin und wieder Glück hat

Das ist ja wohl die Untertreibung des Jahres...

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

Mira_Belle

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

2002Andreas

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.

Mira_Belle

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.

CSS

label[data-l10n-id="update-noUpdatesFound"] {
    appearance: none !important;
    color: #ff9600 !important;
    font-weight: 400 !important;
    font-size: 1.5em !important;
    margin-left: 1px !important;
    margin-top: 10px !important;
    margin-bottom: 5px !important;
}
#icons > .noUpdatesFound {
        fill: transparent !important;
        background-image: url("./image/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;
}
#updateDeck #checkingForUpdates > label {
    appearance: none !important;
    background: #292c2f url("./image/sample_3.gif") no-repeat 0px 0px !important;
    background-size: 48px !important;
    color: #eee8aa !important;
    font-weight: 200 !important;
    font-size: 1.2em !important;
    min-height: 28px !important;
    margin-top: 0px !important;
    margin-right: -10px !important;
    margin-bottom: 10px !important;
    margin-left: -40px !important;
    padding-top: 15px !important;
    padding-left: 45px !important;
    padding-right: 10px !important;
    padding-bottom: 10px !important;
}
#icons > .update-throbber {
    padding-top: 10px !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
    padding-bottom: 10px !important;    
}

Alles anzeigen

Eventuell weißt Du ja Rat.

Gruß

Mira

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