Templates & Sprachen » Farbanpassung und Style-Switcher fürs neue V6

Farbanpassung und Style-Switcher fürs neue V6

27.10.2021 19:03 (zuletzt bearbeitet: 27.10.2021 19:04)

Wolfgang
#1 Farbanpassung und Style-Switcher fürs neue V6

Mit dem folgenden Skript ist es möglich das V6 farblich zu verändern.
Habe, um kein Plugin zu erstellen, auf Variablen verzichtet.
Je nachdem, welches Design man hat, wird das passende Skript installiert und die Farbe angepasst!
Von Vorteil ist es, das im V6 meistens nur eine Grundfarbe verwendet wird!
Habe auch ein Style Switcher mit 9 Farben zusammengestellt.

Hier ein Beispiel-Skript fürs Design "Zeitlos Blau":
Wird nach "Admin > Layout > Farben & Einstellungen > Eigenes HMTL/JS > Eigenes Javascript" kopiert!
Durch Freigabe der Zeilen 8-16 können die Farben ausgewählt, aber auch noch genauer angepasst werden!
In Zeile 33-44 werden Scroll-Symbol, die Profil-Seite und die Titelleiste auf die neuen Farben eingestellt

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
 
<script>
window.addEventListener('load', function(){
 
/* Zeitlos Blau */
var Farbe_ändern = '';
 
/* Farben ändern */
var Farbe_ändern = '#005555'; // Dunkelgrün
//var Farbe_ändern = '#004400'; // Grün
//var Farbe_ändern = '#555500'; // Ockergelb
//var Farbe_ändern = '#550000'; // Rot
//var Farbe_ändern = '#000055'; // Dunkelblau
//var Farbe_ändern = '#330033'; // Violett
//var Farbe_ändern = '#777777'; // Grau
//var Farbe_ändern = '#A0A0A0'; // Silber
//var Farbe_ändern = '#111111'; // Schwarz
 
/* Referenzfarbe aus dem Template */
var background = '#3579a1';
 
    var keys = Object.values(window.getComputedStyle($('html').get(0)));
    var filteredKeys = keys.filter(function (key){return key.indexOf('color') > -1});
    var colors = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(background).splice(1,3);
    var rgb = 'rgb(' + colors.map(function (color){return parseInt(color, 16)}).join(', ') + ')';
    $("*").each(function (index, element) {
        filteredKeys.forEach(function(key) {
            if ($(element).css(key) == rgb) {
                $(element).css(key, Farbe_ändern);
            }
        });
    });
 
/* Scroll-Symbol */
$('#scrollUpImg').css({'filter': 'grayscale(100%)','-webkit-filter': 'grayscale(100%)'});
 
/* Profil */
$('.shead,.ava_guest').css({'background':Farbe_ändern,'filter': 'brightness(90%)','color':'#ffffff','border':'1px solid #aaaaaa'}).find('.ava_guest').css({'filter': 'brightness(120%)'});
 
/* Titelleisten */
$('.card-header, .forum_listing th').css({'background': 'linear-gradient(#222222,'+ Farbe_ändern +','+ Farbe_ändern +')'});
$('.tree_controll_links .tree_answer_link').css({'color': '#ffffff'})
 
$('html,body').css('visibility','visible');
});
</script>
 

Wer Interesse hat, kann hier mehr erfahren:

Bis dann
Wolfgang

Forum für Hilfe, Tricks & Tipps / Foren-Nr.: 104774 / Template: Business (V4) / Browser: Edge

Antworten

Beitrag melden

27.10.2021 19:14

Gabriella
#2 RE: Farbanpassung und Style-Switcher fürs neue V6

Gabriella

Danke Wolfgang,

und wieder hast Du etwas Wertvolles geschaffen, wie schon so oft. Wenn das V6 endlich aus der Beta käme, könnte man es auch kopieren, wie die anderen Templates. Erst wenn das möglich ist, werde ich mich vielleicht mit dem V6 anfreunden und es vielleicht benutzen.

Mit freundlichen Grüssen
Gabriella

http://www.musengarten.com/
http://www.garten-der-poesie.de/

Layout: Business