Download-Fenster (Öffnen mit, Datei speichern) einfärben

heiko

Hallo Forum,
ich würde gern die Farben des Download-Fensters anpassen. Und zwar dieses, wenn man auf einen 'Downloadlink klickt und dann die Auswahl "öffnen mit" und "Datei speichern" erscheint. Perfekt wäre auch, wenn man anschließend das Fenster mit bearbeiten könnte, falls man den Downloadpfad manuell angeben kann.

Ich bin wie immer sehr dankbar für eventuelle Codes.

Beste Grüße

Heiko

2002Andreas

Meinst du das so?

[attachment=0]Zwischenablage01.png[/attachment]

Wenn ja teste bitte mal:

CSS

dialog#unknownContentType{
background:yellow!important;}


 .dialog-button[label="Abbrechen"]{
-moz-appearance: none!important;
color:white!important;
background:red!important;}


 .dialog-button[label="Datei speichern"]{
-moz-appearance: none!important;
color:white!important;
background:green!important;}

Alles anzeigen

Road-Runner

Zitat von heiko

Und zwar dieses, wenn man auf einen 'Downloadlink klickt und dann die Auswahl "öffnen mit" und "Datei speichern" erscheint.

Ich denke es geht um dieses Fenster:

[attachment=0]pdf.png[/attachment]

milupo

Zum Beispiel von Road-Runner hätte ich auch noch eine Bitte.

[attachment=0]dialog_öffnen_speichern.png[/attachment]

Ist es möglich die Schriftfarbe für den Dateityp und die Dateigröße - bei mir hinter kotryž je: - anzupassen? Sollte ebenfalls weiß sein. Die Hintergrundfarbe des Auswahlfelds und dessen Schriftfarbe sollte ebenfalls anpassbar sein. Hintergrund weiß, Schrift bleibt erst einmal schwarz.

Danke.

2002Andreas

Zitat von Road-Runner

Ich denke es geht um dieses Fenster:

Wer lesen kann ist klar im Vorteil, danke für den Hinweis :klasse:

CSS

@-moz-document url(chrome://mozapps/content/downloads/unknownContentType.xul) {


#openHandler{
-moz-appearance: none!important;
min-height:20px!important;
background:lightgreen!important;
}


dialog#unknownContentType{
background:yellow!important;
}


.dialog-button[label="Abbrechen"]{
-moz-appearance: none!important;
color:white!important;
background:red!important;
}


.dialog-button[label="Datei speichern"],
.dialog-button[label="OK"]{
-moz-appearance: none!important;
color:white!important;
background:green!important;
}
}

Alles anzeigen

[attachment=0]Zwischenablage01.png[/attachment]

2002Andreas

Zitat von milupo

bei mir hinter kotryž je: - anzupassen?

Teste bitte:

CSS

@-moz-document url(chrome://mozapps/content/downloads/unknownContentType.xul) {


#type{
	color:white!important;}
}

2002Andreas

Zitat von milupo

Die Hintergrundfarbe des Auswahlfelds und dessen Schriftfarbe sollte ebenfalls anpassbar sein. Hintergrund weiß

Beide Codes zusammen:

CSS

@-moz-document url(chrome://mozapps/content/downloads/unknownContentType.xul) {


#type{
	color:white!important;
}


#openHandler {
    -moz-appearance: none !important;
    background: white!important;}
}

Alles anzeigen

milupo

Wunderbar danke, perfekt. Nur noch eine Kleinigkeit, die ich gerade gesehen habe. Wenn Schrift- und Hintergrundfarbe des Auswahlfeldes geändert werden, wird die Farbe des kleinen Aufklapppfeils nicht geändert, sie bleibt schwarz. Ich habe im Moment blauen Hintergrund und weiße Schrift für das Auswahlfeld. Gelb wäre vielleicht gut für den Aufklapppfeil. Es hebt sich vom Hintergrund als auch von der Schrift ab.

2002Andreas

Für das Icon direkt finde ich keine Möglichkeit :-??

Nur für den Hintergrund davon:

CSS

@-moz-document url(chrome://mozapps/content/downloads/unknownContentType.xul) {


#type{
     color:white!important;
}


.menulist-label-box {
    -moz-appearance: none!important ;
    min-height:20px!important;
    background: white!important;}

.menulist-dropmarker {
    -moz-appearance: none!important ;
    background:yellow!important;
}
}

Alles anzeigen

milupo

Danke, aber das ist nicht das, was ich beabsichtige.

Es könnte sein, dass eine Grafik verwendet wird. Ich habe eine dropmaker.css in der omni.jar gefunden:

Code

/* This Source Code Form is subject to the terms of the Mozilla Public
 * License, v. 2.0. If a copy of the MPL was not distributed with this
 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */


dropmarker {
  -moz-appearance: menulist-button;
  width: 16px;
  height: 16px;
  -moz-box-align: center;
  -moz-box-pack: center;
  padding: 1px;
  list-style-image: url("chrome://global/skin/arrow/arrow-dn.gif");
  -moz-image-region: auto;
}


dropmarker:hover:active:not([disabled="true"]) {
  padding-top: 2px;
  padding-bottom: 0px;
  padding-inline-start: 2px;
  padding-inline-end: 0px;
}


dropmarker[disabled="true"] {
  list-style-image: url("chrome://global/skin/arrow/arrow-dn-dis.gif");
}

Alles anzeigen

Wie es aussieht, wird die Datei arrow-dn.gif verwendet. In der unknownContentType.css ist dazu nichts festgelegt.

2002Andreas

Dann musst du das Icon austauschen.

Ich habe kein passendes, aber zwecks Test reicht es erstmal :wink:

CSS

dropmarker > icon {
 display:none!important;
}


dropmarker {
-moz-appearance:none!important;
background:  url("data:image/gif;base64,R0lGODlhDwAPALMAAP/qAEVFRQAAAP/OAP/JAP/9E/6dAP+0AP/+k///x//lAP//6wAAAAAAAAAAAAAAACH5BAEAAAAALAAAAAAPAA8AAwRXkEkZap2Y1VEQShcWDANgFh04jaXpdktADYop3KcaHIR7C6/YrmfD5So8APCnNCGQvZ/UWTEQalKgaSAbEZlbmcYwuDa3BvG4TGgTBulM9UBPq+WWOyMCADs=") no-repeat !important;
height:22px!important;
padding-left:25px!important;
background-position:5px 4px!important;
}

Alles anzeigen

[attachment=0]Zwischenablage01.png[/attachment]

milupo

Zitat von 2002Andreas

Dann musst du das Icon austauschen.
Ich habe kein passendes, aber zwecks Test reicht es erstmal :wink:

Wusste ich's doch: Wo du bist, gibt es auch eine Lösung. :klasse:

Danke nochmals.

2002Andreas

Naja...auch nicht immer. :wink:

Ich finde nur keinen reinen gelben Pfeil im Net :oops:

Zitronella

Zitat von 2002Andreas

Ich finde nur keinen reinen gelben Pfeil im Net :oops:

Code

data:image/x-icon;base64,AAABAAEAEBAAAAEAIABoBAAAFgAAACgAAAAQAAAAIAAAAAEAIAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACe/wAAlv8bAKn/yACh/8gAif8bAIv/AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACh/wAApf8XALz/vQDo//8A4v//AK3/vQCS/xcAjv8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACq/wAAqP8bAML/vQDt//4A2///AM3//wDg//4AsP+9AJT/GwCV/wAAAAAAAAAAAAAAAAAAAAAAAAAAAACu/wAAsf8XAcf/vQPv//8E5P//BM///wO5//8D0P//AeT//wC0/70AnP8XAJn/AAAAAAAAAAAAAAAAAAC1/wAAs/8bAcv/vRXx//4l6v//KN///ybX//8ewP//Hr///xbW//8E5v/+ALn/vQCf/xsAov8AAAAAAAC2/wAAuv8XAM7/vQ7y//8m8P//Len//y7r//8q5P//Hcz//xvK//8by///Ed7//wHp//8Avv+9AKn/FwCn/wAAuP8bAND/vQD0//4N9f//GfH//xz1//8d+P//GfD//wTZ//8C2P//Atj//wLZ//8A5///AO3//gDE/70ArP8bAMv/yADx//8A+///APn//wL9//8C/v//AP///wD8//8A6v//AOj//wDq//8A8v//APL//wD4//8A7P//AML/yADA/64Ay/+uANH/rgDa/7QY8f/5GP///wD///8A////APn//wD5//8A+v//AOn/+QDC/7QAvv+uAL3/rgC2/64Avv8BAMX/AQDL/wEAvv8TKdf/7Sf///8A////AP///wD///8A////AP///wDW/+0Avf8TALT/AQC0/wEAtP8BAAAAAAAAAAAAAAAAAML/Ei7Z/+0s////AP///wD///8A////AP///wD///8A2f/tAML/EgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADJ/xIx3f/tL////wD///8A////AP///wD///8H////CN3/7QDJ/xIAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAzv8SNOD/7TL///8A////AP///wD///8A////Ef///xLg/+0Azv8SAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAANL/Ejbj/+00////AP///wD///8A////AP///xj///8Z4//tANL/EgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADY/xI45v/tSv///z3///83////I////yL///8r////IOb/7QDY/xIAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA2/8SIOD/7Tvo//896P//N+j//yPo//8i6P//Iuj//xDg/+0A2/8SAAAAAAAAAAAAAAAA/D8AAPgfAADwDwAA4AcAAMADAACAAQAAAAAAAAAAAAAAAAAAAAAAAOAHAADgBwAA4AcAAOAHAADgBwAA4AcAAA==

2002Andreas

Hallo Zitronella..

ganz herzlichen Dank dafür :klasse:

CSS

@-moz-document url(chrome://mozapps/content/downloads/unknownContentType.xul) {


#type{
	color:white!important;
}


#openHandler {
    -moz-appearance: none !important;
	color:white!important;
    background: darkblue!important;}


dropmarker > icon {
 display:none!important;
}


dropmarker {
-moz-appearance:none!important;
background:  url("data:image/x-icon;base64,AAABAAEAEBAAAAEAIABoBAAAFgAAACgAAAAQAAAAIAAAAAEAIAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACe/wAAlv8bAKn/yACh/8gAif8bAIv/AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACh/wAApf8XALz/vQDo//8A4v//AK3/vQCS/xcAjv8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACq/wAAqP8bAML/vQDt//4A2///AM3//wDg//4AsP+9AJT/GwCV/wAAAAAAAAAAAAAAAAAAAAAAAAAAAACu/wAAsf8XAcf/vQPv//8E5P//BM///wO5//8D0P//AeT//wC0/70AnP8XAJn/AAAAAAAAAAAAAAAAAAC1/wAAs/8bAcv/vRXx//4l6v//KN///ybX//8ewP//Hr///xbW//8E5v/+ALn/vQCf/xsAov8AAAAAAAC2/wAAuv8XAM7/vQ7y//8m8P//Len//y7r//8q5P//Hcz//xvK//8by///Ed7//wHp//8Avv+9AKn/FwCn/wAAuP8bAND/vQD0//4N9f//GfH//xz1//8d+P//GfD//wTZ//8C2P//Atj//wLZ//8A5///AO3//gDE/70ArP8bAMv/yADx//8A+///APn//wL9//8C/v//AP///wD8//8A6v//AOj//wDq//8A8v//APL//wD4//8A7P//AML/yADA/64Ay/+uANH/rgDa/7QY8f/5GP///wD///8A////APn//wD5//8A+v//AOn/+QDC/7QAvv+uAL3/rgC2/64Avv8BAMX/AQDL/wEAvv8TKdf/7Sf///8A////AP///wD///8A////AP///wDW/+0Avf8TALT/AQC0/wEAtP8BAAAAAAAAAAAAAAAAAML/Ei7Z/+0s////AP///wD///8A////AP///wD///8A2f/tAML/EgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADJ/xIx3f/tL////wD///8A////AP///wD///8H////CN3/7QDJ/xIAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAzv8SNOD/7TL///8A////AP///wD///8A////Ef///xLg/+0Azv8SAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAANL/Ejbj/+00////AP///wD///8A////AP///xj///8Z4//tANL/EgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADY/xI45v/tSv///z3///83////I////yL///8r////IOb/7QDY/xIAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA2/8SIOD/7Tvo//896P//N+j//yPo//8i6P//Iuj//xDg/+0A2/8SAAAAAAAAAAAAAAAA/D8AAPgfAADwDwAA4AcAAMADAACAAQAAAAAAAAAAAAAAAAAAAAAAAOAHAADgBwAA4AcAAOAHAADgBwAA4AcAAA==") no-repeat !important;
height:22px!important;
padding-left:25px!important;
background-position:5px 4px!important;}
}

Alles anzeigen

[attachment=0]Zwischenablage01.png[/attachment]

milupo

Auch dir vielen Dank Zitronella. So sieht jetzt mein Endergebnis aus:

[attachment=0]dialog_öffnen_speichern.png[/attachment]

Wo bekommt man den im Internet kostenlose Vektorgrafiken her? Habt ihr da einen bestimmten Anlaufpunkt?

2002Andreas

Z.B. von hier, da kannst du das selber erstellen, zumindest ein eigenes Icon.

https://www.ionos.de/tools/favicon-generator

milupo

Zitat von 2002Andreas

Z.B. von hier, da kannst du das selber erstellen, zumindest ein eigenes Icon.

Danke, werde ich mir anschauen. Ich hatte versucht, das arrow-dn.gif anzupassen, farblich war das kein Problem. Aber die Bildgröße ist derart klein, beim Vergrößern hat es mir das Bild verzerrt.

2002Andreas

Evtl. erzählt uns Zitronella ja auch noch, wie bzw. woher sie des Icon hat :wink:

Zitronella

Ist von hier https://findicons.com/icon/217454/down (gesucht hatte ich unter arrow down https://findicons.com/search/arrow-down )
Ich hab dann mit Gimp noch die Farbe bissel geändert und die Größe auf 16x16 und dann dort http://freeonlinetools24.com/base64-image hochgeladen um den 64bit Code zu erhalten