Hintergrund dunkel - Schrift hell

  • Hallo zusammen

    :D Na dann fütter ich euren neuen Bereich doch mal mit einem Beitrag

    ;) Ich würde gerne folgende Einstellungen per Button ein-/ausschalten
    ohne den immer den Weg über die Einstellungen gehen zu müssen...

    - Systemfarben verwenden
    - Seiten das verwenden von eigenen statt der oben gewählten Farben erlauben

    Inspiriert wurde ich mehr oder weniger von den beiden Optionen auf dieser Website

    Code
    http://www.blindness.org/


    Da ich an einer Netzhauterkrankung leide,würde mir solch ein Button das
    Lesen und Bedienen von gewissen für mich unvorteilhaft gestalteten Websites
    ungemein erleichtern.

    Viele Danke

    Spiralnebel

  • :mrgreen: YES! Genau das habe ich gesucht :klasse:

    Vielen lieben Dank!

    Wobei mir grad hier auf der Site auffällt,daß bei beiden Methoden
    zwar die Schriftfarbe geswitcht wird,allerdings kann ich dann nicht
    mehr lesen was in den Buttons stehst,da diese ja auch einen hellen
    Hintergrund haben.

    Dafür vielleicht auch noch'nen Tip parat? :)

  • Setz mal das vor die letzte Klammer

    CSS
    button:active,input[type="submit"]:active{font-weight: bold !important;}
    button:hover,input[type="submit"]:hover {opacity: .9 !important; color: #00ff00 !important; font-weight: bold !important; } button,input[type="submit"]
    { -moz-appearance: none !important; color: #fff !important; font-weight: bold !important;
     background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAjCAIAAADaE/fjAAAACXBIWXMAAAsTAAALEwEA
    mpwYAAAAYklEQVR4nAXBSw7CQAxEwfYzn1E4IVsuzwIiViiaBLup0v1huotuYSdVTbcpQ5Won6k2btPHgSTmnHzeT9b1xbZ9ySgyQS7
    cO4ogleDENiVhBRHQOmOJIMnrIE/JGAuXcfsD4hY4dKR+hIoAAAAASUVORK5CYII=") repeat center !important;}

    Andere Farben und Anleitungen zum Selbermachen gibts hier
    https://www.camp-firefox.de/forum/viewtopic.php?f=16&t=73814

    Gruß MK204

    Mozilla/5.0 (Windows NT 5.1; rv:19.0) Gecko/19 Firefox/19.0b2

  • :D Hammer!

    Man man - Echt klasse! :klasse:

    Leider greift es aber noch nicht bei den Buttons
    wenn ich hier eine Antwort schreibe.
    Ausserdem wäre es klasse,wenn auch noch
    sämtliche Eingabefelder grundsätzlich einen
    hellen Rahmen darum haben.
    Hier ist das z.B. nicht der Fall...

    Code
    https://kommunikation.t-online.de/


    Und geht das vielleicht auch,daß die hier
    bläulich hinterlegten einzelnen Postings auch grundsätzlich
    einen hellen Rand darum bekommen? Das die sich halt besser
    abgrenzen? Die Striche an der Signatur werden umgeswitcht,
    aber der Hintergrund ist dann halt generell komplett schwarz

  • 8) Boah,ihr glaubt nicht wie krass es mir die Sache erleichtert - Echt mal...

    :mrgreen: Endlich kann ich wieder gescheit surfen ohne Augenkrebs zu bekommen.
    Für normal sehende bestimmt kaum vorstellbar,aber ihr habt mir mit eurem Einsatz
    echt ein großes großes Stück den Alltag erleichtert! DANKE man!

  • Zitat von Spiralnebel

    Leider greift es aber noch nicht bei den Buttons
    wenn ich hier eine Antwort schreibe.


    für dieses Forum hier dieser Schnipsel

    CSS
    @-moz-document url-prefix(http://www.camp-firefox.de/forum) {
    .button1, .button2{-moz-appearance: none !important;font-weight: bold !important;color: #ff0000 !important; border: none !important;
    background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAeCAIAAABi9+OQAAAACXBIWXMAAAsTAAALEwEAmpwYAAAA
    T0lEQVR4nCXLwRECMQwEwam5S4McyJGcr4ytlXjQ/+b29vX+yBxJLI7VJX1kvpKSaaeX07h7efUyjRCnHgdML+n8H9tUC9uuZUBYklwOQn41gjdSAUtWUwAAAABJRU5ErkJggg==")  !important;}
    
    
    .button1:hover, .button2:hover{-moz-appearance: none !important;font-weight: bold !important;color: #fff !important; border: none !important;
    background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAZCAIAAAB/8tMoAAAACXBIWXMAAAsTAAALEwEAmpwYAAAA
    QElEQVR4nEXLsRHEMAwDwcON+2/O1fyIFBz+5sv7PBa8rUvdiwMecBN/rRM8iYd6wKHe4gancYPb/xvigAtO+QCL3SSum+CNiAAAAABJRU5ErkJggg==")  !important;}}

    und wie gesagt kannst die Farben austauschen...aktuell sind es diese mit diesem Code

    [Blockierte Grafik: http://www.abload.de/img/773nf7.jpg]

    Mit HTML - Farben die gibts hier
    http://tomheller.de/theholycymbal/html-farben.html

    CSS
    .button1, .button2{-moz-appearance: none !important;font-weight: bold !important;color: #ff0000 !important; border: none !important;
    background: #ff0000 !important;}
    
    
    .button1:hover, .button2:hover{-moz-appearance: none !important;font-weight: bold !important;color: #fff !important; border: none !important;
    background: #0000cd !important;}}

    [Blockierte Grafik: http://www.abload.de/img/888ln2s.jpg]

    Zitat von Spiralnebel


    Und geht das vielleicht auch,daß die hier bläulich hinterlegten einzelnen Postings auch grundsätzlich
    einen hellen Rand darum bekommen? Das die sich halt besser abgrenzen? Die Striche an der Signatur werden umgeswitcht,
    aber der Hintergrund ist dann halt generell komplett schwarz

    Kannst ya mal das Teil hier probieren
    http://userstyles.org/styles/19484

    Für den Rand um die Posts

    CSS
    .post.bg2{  border: solid 3px #ff0000 !important;}
    .post.bg1{  border: solid 3px #ff0000 !important;}

    sieht dann so aus
    [Blockierte Grafik: http://www.abload.de/thumb/89037bj.jpg]

    Gruß MK204

    Mozilla/5.0 (Windows NT 5.1; rv:19.0) Gecko/19 Firefox/19.0b2

  • Ersetzt dabei dieser Code hier

    CSS
    .button1, .button2{-moz-appearance: none !important;font-weight: bold !important;color: #ff0000 !important; border: none !important;
    background: #ff0000 !important;}
    
    
    .button1:hover, .button2:hover{-moz-appearance: none !important;font-weight: bold !important;color: #fff !important; border: none !important;
    background: #0000cd !important;}}


    den den Du mir als erstes gepostet hast?

    Kann man nicht generell um jeden andersfarbigen Hintergrund
    zum Haupthintergrund einen Rahmen drum machen,so daß der
    Rahmen für die Postings überall greift? So das quasi auch ein
    Rahmen um den Frage gemacht wird der Posting von Profilframe abgrenzt?

    Ausserdem bräuchte ich noch einen generellen Rahmen um Eingabefelder
    und Pulldown Menüs,wenn möglich

    :)

  • Zitat von Spiralnebel

    Ersetzt dabei dieser Code hier,den den Du mir als erstes gepostet hast?


    Einfach den einen Code durch den anderen ersetzen,
    lies dir das mal durch >>> https://www.camp-firefox.de/forum/viewtopic.php?f=16&t=73814 >>>>> https://www.camp-firefox.de/forum/viewtopi…=581583#p581583

    Zitat von Spiralnebel

    So das quasi auch ein,Rahmen um den Frage gemacht wird der Posting von Profilframe abgrenzt?


    Das ist ein kleines Problem, da nicht jedes Forum, oder Website die gleiche Boardsoftware verwendet und daher die "Begriffe" unterschiedlich benannt werden.

    Zitat von Spiralnebel

    Ausserdem bräuchte ich noch einen generellen Rahmen um Eingabefelder,und Pulldown Menüs,wenn möglich


    teste mal....

    CSS
    .inputbox
    {-moz-appearance: none !important; border: solid 2px #ff0000 !important; background: #0000cd  !important; color: #fff  !important; font-weight: bold !important;}

    [Blockierte Grafik: http://www.abload.de/img/aufzeichnen6xk2.jpg]


    CSS
    OPTION
    {-moz-appearance: none !important; background: #000  !important;color: #fff  !important; font-weight: bold !important; font-size: 9.5pt !important;}

    [Blockierte Grafik: http://www.abload.de/img/aufzeichnen9lf3.jpg]

    SQL
    SELECT{-moz-appearance: none !important; border: solid 2px #ff0000 !important; background: transparent  !important;}


    Select ist das wo der Pfeil dabei ist

    Gruß MK204

    Mozilla/5.0 (Windows NT 5.1; rv:19.0) Gecko/19 Firefox/19.0b2

  • Hallo zusammen,

    ich hätte da noch mal eine Bitte...

    Habe mich die letzten Tage versucht da reinzudenken
    um mein Stylish Template mit dem Code aus diesen Bookmarklets
    zu kombinieren,aber ich werde fast wahnsinnig.

    Folgendes - Hier ist der Code von dem Template,bei dem ich bisher
    nur die Links vom original blau auf gelb geändert habe...

    Da möchte ich nun am liebsten aber noch den Code von dem invert lighness Bookmarklet
    drin haben,weil es halt auch die verschieden farbigen Hintergründe berücksichtigt,so wie es
    ist,aber nach'nem Klick zu lange braucht bis die Seite umgewandelt wird. Ich habe halt
    die Hoffnung,wenn man davon nur den Code verwendet der sich auf den Hintergrund beziegt
    das es mit Stylish schneller geht. Die Links in gelb sowie die Elemente die man überall ändern kann
    wie halt die Buttons,Pulldowns,Checkboxen,Eingabefelder etc und so sollten fest sein,so daß es schneller geht.
    Hier der Code von invert lightness Bookmarklet

    Code
    javascript:(function(){function%20RGBtoHSL(RGBColor){with(Math){var%20R,G,B;var%20cMax,cMin;var%20sum,diff;var%20Rdelta,Gdelta,Bdelta;var%20H,L,S;R=RGBColor[0];G=RGBColor[1];B=RGBColor[2];cMax=max(max(R,G),B);cMin=min(min(R,G),B);sum=cMax+cMin;diff=cMax-cMin;L=sum/2;if(cMax==cMin){S=0;H=0;}else{if(L<=(1/2))S=diff/sum;else%20S=diff/(2-sum);Rdelta=R/6/diff;Gdelta=G/6/diff;Bdelta=B/6/diff;if(R==cMax)H=Gdelta-Bdelta;else%20if(G==cMax)H=(1/3)+Bdelta-Rdelta;else%20H=(2/3)+Rdelta-Gdelta;if(H<0)H+=1;if(H>1)H-=1;}return[H,S,L];}}function%20getRGBColor(node,prop){var%20rgb=getComputedStyle(node,null).getPropertyValue(prop);var%20r,g,b;if(/rgb\((\d+),\s(\d+),\s(\d+)\)/.exec(rgb)){r=parseInt(RegExp.$1,10);g=parseInt(RegExp.$2,10);b=parseInt(RegExp.$3,10);return[r/255,g/255,b/255];}return%20rgb;}function%20hslToCSS(hsl){return%20"hsl("+Math.round(hsl[0]*360)+",%20"+Math.round(hsl[1]*100)+"%,%20"+Math.round(hsl[2]*100)+"%)";}var%20props=["color","background-color","border-left-color","border-right-color","border-top-color","border-bottom-color"];var%20props2=["color","backgroundColor","borderLeftColor","borderRightColor","borderTopColor","borderBottomColor"];if(typeof%20getRGBColor(document.documentElement,"background-color")=="string")document.documentElement.style.backgroundColor="white";revl(document.documentElement);function%20revl(n){var%20i,x,color,hsl;if(n.nodeType==Node.ELEMENT_NODE){for(i=0;x=n.childNodes[i];++i)revl(x);for(i=0;x=props[i];++i){color=getRGBColor(n,x);if(typeof(color)!="string"){hsl=RGBtoHSL(color);hsl[2]=1-hsl[2];n.style[props2[i]]=hslToCSS(hsl);}}}}})()

    Ich habe halt nur bedenken,daß dieser Wechsel der Hintergrundfarben sich auf alle Farben bezieht,
    sprich das es mir auch dunkle Elemente in heller umstellen würde - Das sollte natürlich nicht der
    Fall sein. Falls man da sowas einbasteln kann,daß er den Hintergrund nur bis einem gewissen grad anpackt
    wäre das super.

    :? Ich weiß das ich mit dieser Bitte eigentlich etwas viel verlange,aber würde sich jemand von
    euch ein paar Minuten nehmen und mir das Stylish Template so umbasteln?
    Ihr würdet damit nicht nur mir sondern einer Reihe von Leute sehr viel helfen
    und ich drehe hier total durch das hinzubiegen.

    Liebe Grüße und vielen Dank falls sich jemand meiner Bitte annimmt!

    Spiralnebel

  • Quelle: Spiralnebel

    Zitat von Spiralnebel

    Da möchte ich nun am liebsten aber noch den Code von dem invert lighness Bookmarklet
    drin haben,weil es halt auch die verschieden farbigen Hintergründe berücksichtigt,so wie es
    ist,aber nach'nem Klick zu lange braucht bis die Seite umgewandelt wird. Ich habe halt
    die Hoffnung,wenn man davon nur den Code verwendet der sich auf den Hintergrund beziegt
    das es mit Stylish schneller geht.

    CSS dient nur der Formatierung von Elementen. Im Bookmarklet wird rekursiver JS-Code und bestimmte Berechnungen ausgeführt, das ist damit nicht zu vergleichen und lässt sich auch nicht über CSS realisieren.

  • :) okay - verstehe...

    und wenn man den spieß umdrehen würde...?

    also quasi den code vom Stylish Template ins
    Bookmarklet einbasteln und es irgendwie hinbekommen
    das das Bookmarklet automatisch bei jeder Seite läd?

    Sowohl die Bookmarklets als auch Stylish sind für sich super,
    aber eine einzige perfektionierte Lösung wäre halt klasse.

  • Zitat

    also quasi den code vom Stylish Template ins Bookmarklet einbasteln und es irgendwie hinbekommen das das Bookmarklet automatisch bei jeder Seite läd?

    Das lässt sich mit Erweiterungen wie Greasemonkey, Ubiquity oder JetPack realisieren. Auf Grund der hier spezifizierten Anforderungen würde ich diese auch in der Reihenfolge empfehlen.