header-xh-01 header-xh-02 header-xh-03 header-xh-04 header-xh-05 header-xh-06 header-xh-07 header-xh-08 header-xh-09 header-xh-10 header-xh-11 header-xh-12 header-xh-13 header-xh-14
Templates für CMSimple_XH von
KRL Software-Development
private, nicht kommerzielle Website
by Karl Richard Lembach
Sie sind hier: Startseite > Template krl-3col-flex > Dateien des Templates > template.htm > Akzent- & Menüfarbe seitenspezifisch anpassen
Letzte Bearbeitung:

 

Akzent- & Menüfarbe seitenspezifisch anpassen

Die Akzentfarbe oder Template-Hauptfarbe und die drei Menüfarben (normal, aktiv, hover) lassen sich seitenspezifisch einstellen.

Die Überwachung der Grenzwerte für die Farben und die Berechnung der Menüfarben (entweder halbautomatisch auf der Akzentfarbe basierend oder aus der gewählten Menü-Hoverfarbe) erfolgt in der template.htm:

//  Begin der Erzeugung des dynamischen Stylesheet-Codes, der durch die Einstellungen und Zustände der Website spezifiziert on the fly erzeugt werden muß.
//  PHP erzeugt Dezimalbrüche (floating point) mit Komma als Dezimaltrennzeichen. CSS erwartet den Punkt als Dezimaltrennzeichen. Daher müssen PHP-erzeugte Zahlen in CSS-Zahlen umgewandelt werden.
//  Zeichengröße für Main-Content und Footer-Bereich:
$stylecode ='html{font-size: '.str_replace(",",".",$mainfontsize).'rem;}

#footer {font-size: '.str_replace(",",".",$footerfontsize).'em;}
';
//  Dynamische Berechnung der Farben für Maincolor und Menuhintergrundfarben
//  Wenn der Variablen $MainColor2019 ein Wert zugewiesen wurde, wird der Default-Wert der stylesheet.css überschrieben.
if (isset($MainColor2019)) {
    //  umrechnen der Hex-Farbe in RGB-Werte
    if (!isset($maxbrightness)) {$maxbrightness = 221;}                            // max. erlaubter dezimaler Helligkeitswert der RGB-Einzelfarbe
    $color = str_replace("#", "", $MainColor2019);
    $r = 1;
    $g = 2;
    $b = 3;
    if (strlen($color) <> 6) {                      // wenn statt eines 6-stelligen Farbwertes nur ein kürzerer angegeben wurde, wird ein 3-stelliger angenommen und die einzelnen Stellen verdoppelt: a => aa
        $r1 = substr($color, 0, 1);
        $r1 = $r1.$r1;
        $g1 = substr($color, 1, 1);
        $g1 = $g1.$g1;
        $b1 = substr($color, 2, 1);
        $b1 = $b1.$b1;
        $main = array(
            $r => hexdec($r1),
            $g => hexdec($g1),
            $b => hexdec($b1)
        );
    }
    else {                                      //  wenn ein 6-stelliger Farbwert angegeben wurde
        $main = array(
            $r => hexdec(substr($color, 0, 2)),
            $g => hexdec(substr($color, 2, 2)),
            $b => hexdec(substr($color, 4, 2))
            );
    }
    //  Begrenzung der Einzelfarben auf die max. Helligkeit
    if ($main[$r]>$maxbrightness) $main[$r]=$maxbrightness;
    if ($main[$g]>$maxbrightness) $main[$g]=$maxbrightness;
    if ($main[$b]>$maxbrightness) $main[$b]=$maxbrightness;
    $MainColor2019 = '#'.sprintf("%02X%02X%02X", $main[$r], $main[$g], $main[$b]);
    $hexTransluzenz = sprintf("%02X", ($transluzenzwert * 255));
//  generiert Style-Code
$stylecode .=':root {
    --dynakzent: '.$MainColor2019.';
    --dynakzent2: '.$MainColor2019.$hexTransluzenz.';
}'."\n";
}
//  Wenn der Variablen $MenuBGColor2021 ein Wert zugewiesen wurde, wird der Default-Wert von .secmenu li 'background' in der stylesheet.css überschrieben.
//  Berechnung der Hintergrundfarben im Haupt-Navigations-Menü.

if (isset($MenuBGColor2021)) {
    // umrechnen der Hex-Farbe in RGB-Werte
    if (!isset($maxbrightness)) {$maxbrightness = 221;}                         //  max. erlaubter dezimaler Helligkeitswert der RGB-Einzelfarbe
    if (!isset($minbrightness)) {$minbrightness = 68;}                          //  min. erlaubter dezimaler Helligkeitswert der RGB-Einzelfarbe
    $color = str_replace("#", "", $MenuBGColor2021);
    if (substr($color, 0, 3) == '---') {                                        //  wenn nur drei --- eingegeben wurden steht das für die Maincolor (Akzentfarbe)
        $color = str_replace("#", "", $MainColor2019);
    }
    $r = 1;
    $g = 2;
    $b = 3;
    if (strlen($color) <> 6) {                          // wenn statt eines 6-stelligen Farbwertes nur ein kürzerer angegeben wurde, wird ein 3-stelliger angenommen und die einzelnen Stellen verdoppelt: a => aa
        $r1 = substr($color, 0, 1);
        $r1 = $r1.$r1;
        $g1 = substr($color, 1, 1);
        $g1 = $g1.$g1;
        $b1 = substr($color, 2, 1);
        $b1 = $b1.$b1;
        $hover = array(
            $r => hexdec($r1),
            $g => hexdec($g1),
            $b => hexdec($b1)
        );
    }
    else {                                          //  wenn ein 6-stelliger Farbwert angegeben wurde
        $hover = array(
            $r => hexdec(substr($color, 0, 2)),
            $g => hexdec(substr($color, 2, 2)),
            $b => hexdec(substr($color, 4, 2))
            );
    }
    //  Begrenzung der Einzelfarben auf die min. Helligkeit
    if ($hover[$r]<$minbrightness) $hover[$r]=$minbrightness;
    if ($hover[$g]<$minbrightness) $hover[$g]=$minbrightness;
    if ($hover[$b]<$minbrightness) $hover[$b]=$minbrightness;
    if ($hover[$r]>$maxbrightness) $hover[$r]=$maxbrightness;
    if ($hover[$g]>$maxbrightness) $hover[$g]=$maxbrightness;
    if ($hover[$b]>$maxbrightness) $hover[$b]=$maxbrightness;
    $MenuBGColor2021 = '#'.sprintf("%02X%02X%02X", $hover[$r], $hover[$g], $hover[$b]);
//  generiert Style-Code

$stylecode .=':root {
    --dynmenuhover: '.$MenuBGColor2021.' ;<
    --dynmenumain: rgb('.($hover[$r]-($minbrightness/2)).','.($hover[$g]-($minbrightness/2)).','.($hover[$b]-($minbrightness/2)).');
    --dynmenuaktiv: rgb('.($hover[$r]-$minbrightness).','.($hover[$g]-$minbrightness).','.($hover[$b]-$minbrightness).');
}'."\n";
//  Ende der Berechnung der Hintergrundfarben im Haupt-Navigations-Menü

//  Dynamische Berechnung der Farben für Maincolor und Menuhintergrundfarben
//  Wenn der Variablen $MainColor2019 ein Wert zugewiesen wurde, wird der Default-Wert der stylesheet.css überschrieben.

if (isset($MainColor2019)) {
    //  umrechnen der Hex-Farbe in RGB-Werte
    if (!sset($maxbrightness)) {$maxbrightness = 221;}                            // max. erlaubter dezimaler Helligkeitswert der RGB-Einzelfarbe
    $color = str_replace("#", "", $MainColor2019); 
    $r = 1; 
    $g = 2; 
    $b = 3;
    if (strlen($color) <> 6) {                      // wenn statt eines 6-stelligen Farbwertes nur ein kürzerer angegeben wurde, wird ein 3-stelliger angenommen und die einzelnen Stellen verdoppelt: a => aa
        $r1 = substr($color, 0, 1);
        $r1 = $r1.$r1;
        $g1 = substr($color, 1, 1);
        $g1 = $g1.$g1;
        $b1 = substr($color, 2, 1);
        $b1 = $b1.$b1;
        $main = array(
            $r => hexdec($r1),
            $g => hexdec($g1),
            $b => hexdec($b1)
        );
    } 
    else {                                      //  wenn ein 6-stelliger Farbwert angegeben wurde<
        $main = array(
            $r => hexdec(substr($color, 0, 2)),
            $g => hexdec(substr($color, 2, 2)),
            $b => hexdec(substr($color, 4, 2))
            );
    }
    //  Begrenzung der Einzelfarben auf die max. Helligkeit
    if ($main[$r]>$maxbrightness) $main[$r]=$maxbrightness;
    if ($main[$g]>$maxbrightness) $main[$g]=$maxbrightness;
    if ($main[$b]>$maxbrightness) $main[$b]=$maxbrightness;
    $MainColor2019 = '#'.sprintf("%02X%02X%02X", $main[$r], $main[$g], $main[$b]);

//  generiert Style-Code
    $stylecode .='.secHeader, #searchform input { background: '.$MainColor2019.' }'."\n";
    $stylecode .='#footer, span.footnote { border-top-color: '.$MainColor2019.' }'."\n";
    $stylecode .='hr, hr.hrdot, #header, div.Headline_Fussnote { border-bottom-color: '.$MainColor2019.' }'."\n";
    $stylecode .='#logoTxt {color: '.$MainColor2019.' }'."\n"; 
    $stylecode .='@media only screen and (min-width : 1920px) {'."\n";
    $stylecode .='body {background-image: linear-gradient( to right, rgba('.$main[$r].','.$main[$g].','.$main[$b].', '.$transluzenzwert.') 0%, '.$MainColor2019.' calc(50% - 960px), '.$MainColor2019.' calc(50% + 960px), rgba('.$main[$r].','.$main[$g].','.$main[$b].', '.$transluzenzwert.') 100%);}'."\n";
    $stylecode .='}'."\n";
}

//  Wenn der Variablen $MenuBGColor2021 ein Wert zugewiesen wurde, wird der Default-Wert von .secmenu li 'background' in der stylesheet.css überschrieben.

//  Berechnung der Hintergrundfarben im Haupt-Navigations-Menü.

if (isset($MenuBGColor2021)) {
    // umrechnen der Hex-Farbe in RGB-Werte
    if (!isset($maxbrightness)) {$maxbrightness = 221;}                         //  max. erlaubter dezimaler Helligkeitswert der RGB-Einzelfarbe
    if (!isset($minbrightness)) {$minbrightness = 68;}                          //  min. erlaubter dezimaler Helligkeitswert der RGB-Einzelfarbe
    $color = str_replace("#", "", $MenuBGColor2021);
    if (substr($color, 0, 3) == '---') {                                        //  wenn nur drei --- eingegeben wurden steht das für die Maincolor (Akzentfarbe)

        $color = str_replace("#", "", $MainColor2019); 
    }
    $r = 1; 
    $g = 2; 
    $b = 3;
    if (strlen($color) <> 6) {                          // wenn statt eines 6-stelligen Farbwertes nur ein kürzerer angegeben wurde, wird ein 3-stelliger angenommen und die einzelnen Stellen verdoppelt: a => aa
        $r1 = substr($color, 0, 1);
        $r1 = $r1.$r1;
        $g1 = substr($color, 1, 1);
        $g1 = $g1.$g1;
        $b1 = substr($color, 2, 1);
        $b1 = $b1.$b1;
        $hover = array(
            $r => hexdec($r1),
            $g => hexdec($g1),
            $b => hexdec($b1)
        );
    } 
    else {                                          //  wenn ein 6-stelliger Farbwert angegeben wurde
        $hover = array(
            $r => hexdec(substr($color, 0, 2)),
            $g => hexdec(substr($color, 2, 2)),
            $b => hexdec(substr($color, 4, 2))
            );
    }
    //  Begrenzung der Einzelfarben auf die min. Helligkeit
    if ($hover[$r]<$minbrightness) $hover[$r]=$minbrightness;
    if ($hover[$g]<$minbrightness) $hover[$g]=$minbrightness;
    if ($hover[$b]<$minbrightness) $hover[$b]=$minbrightness;
    if ($hover[$r]>$maxbrightness) $hover[$r]=$maxbrightness;
    if ($hover[$g]>$maxbrightness) $hover[$g]=$maxbrightness;
    if ($hover[$b]>$maxbrightness) $hover[$b]=$maxbrightness;
    $MenuBGColor2021 = '#'.sprintf("%02X%02X%02X", $hover[$r], $hover[$g], $hover[$b]);

//  generiert Style-Code
    $stylecode .='.secmenu li a:hover { background: '.$MenuBGColor2021.'; }'."\n";
    $stylecode .='.secmenu li a { background: rgb('.($hover[$r]-($minbrightness/2)).','.($hover[$g]-($minbrightness/2)).','.($hover[$b]-($minbrightness/2)).'); }'."\n";
    $stylecode .='.secmenu li span { background: rgb('.($hover[$r]-$minbrightness).','.($hover[$g]-$minbrightness).','.($hover[$b]-$minbrightness).'); }'."\n";
}

//  Ende der Berechnung der Hintergrundfarben im Haupt-Navigations-Menü


| Seitenanfang |