corrupted php variable in css - color issue in WordPress

Here’s what I am trying to do. Depending on the current season, I want a different color being used in my css. Moreover, depending on the current daytime I want the brightness of the color to be changed slightly.
This is what the following code is doing:

<?php
//check http://www.w3schools.com/php/func_date_date.asp for data function.
$month = date("n"); // 'n' requests a numeric representation of the current month without leading zeros
$hour = date("G"); // 'G' requests the hour in a 24 hour format (0-23) without leading zeros

if($month > 11 || $month <= 2) {
    $color = "#920049"; // Winter
} else if ($month > 2 && $month <= 5) {
    $color = "#e05038"; //Spring
} else if ($month > 5 && $month <= 8) {
    $color = "#729f98"; //Summer
} else if ($month > 8 && $month <= 11) {
    $color = "#97743a"; //Autumn
}

$brightness = (abs(12 - $hour))*-0.055;

$currentColor = color_luminance($color, $brightness);

function color_luminance( $hex, $percent ) {

    // validate hex string
    $hex = preg_replace( '/[^0-9a-f]/i', '', $hex );
    $new_hex = '#';

    if ( strlen( $hex ) < 6 ) {
        $hex = $hex[0] + $hex[0] + $hex[1] + $hex[1] + $hex[2] + $hex[2];
    }

    // convert to decimal and change luminosity
    for ($i = 0; $i < 3; $i++) {
        $dec = hexdec( substr( $hex, $i*2, 2 ) );
        $dec = min( max( 0, $dec + $dec * $percent ), 255 ); 
        $new_hex .= str_pad( dechex( $dec ) , 2, 0, STR_PAD_LEFT );
    }
    return $new_hex;
}
?>

I include the php file in two files: style.php and header.php.

style.php:

<?php   
header("Content-type: text/css");

include 'color.php'; // include color.php file to have access to $currentColor
$highlight = $currentColor;
$white = '#fff';
?>

/*
Theme Name: Portfolio
Description: Template for my online portfolio
Author: Markus Lorenz Schilling
Author URI: http://malosch.com
*/



/********** NON-RESPONSIVE **********/

/* General structure */
* { margin: 0; padding: 0; color: #333; }
html, body { font-family: 'bariol_regular'; font-size: 18px; background-color: #efefef; overflow-x: hidden; }
.clear { clear: both; }
.header { height: auto; } /* header including the colored line + respsonsive menu button + hex color code */
#headerLine { height: 1px; width: 100%; background-color:<?=$highlight?>; } /* colored line on top of page */
.main { float: left; max-width: 926px; }
#footer p { margin: 16px 0 32px; color: #999; float:left; }

/* Headings */
h1 { font-family: 'bariol_bold'; font-size: 21px; margin: 16px 0 32px; }
h2 { font-family: 'bariol_regular'; font-size: 21px; margin-bottom: 32px; }
h3 { font-family: 'bariol_light'; font-size: 21px; margin: 32px 0 24px 0; color: <?=$highlight?>; border-style: solid; border-width: 1px 0 0 0; padding: 8px 0 0 0; } /* color needed for h3 on publication page */

/* Navigation panel */
.pushy { background: <?=$highlight?>; } /* pushy (mobile navigation) background */
ul { list-style-type: none; }

/* Links */
a { font-family: 'bariol_bold_italic'; text-decoration:underline; }
a:hover { color:<?=$highlight?>; }
a:visited { font-family: 'bariol_bold_italic'; text-decoration:underline; }

/* Colors */
.highlightColor { color:<?=$highlight?>; }
.white { color: <?=$white?>; }

/* Project links */
.featureImg { width:100%; height: 176px; overflow:hidden; position:relative; margin: 0 0 8px 0; display: inline-block; }
.featureImg img { width: 100%; position: absolute; margin: auto; top: 0; left: 0; right: 0; bottom: 0; }
.featureImgBackup { width: 100%; height: 176px; background: <?=$highlight?>; }
.mask { background-color:<?=$highlight?>; display: table; width: calc(100% - 32px); height: 144px; padding:16px; float: left; position: absolute; left: 0px; top: 0px; opacity: 0; text-align: center; transition: opacity .5s ease-in-out; -moz-transition: opacity .25s ease-in-out; -webkit-transition: opacity .25s ease-in-out; }
.mask:hover { opacity: 1; }
.mask span { color: #fff; font-size: 21px; text-decoration: underline; display: table-cell; vertical-align: middle; }
.excerpt { padding-right: 16px; }

/* Project page */
.project_description { max-width: 100%; margin: 0 0 16px 0; float: left; }
.project_quote { text-align: center; float: left; width: 100%; border: 1px; border-color: <?=$highlight?>; color: <?=$highlight?>; margin: 16px 0 32px 0; border-style: solid none; padding: 16px; font-size: 24px; font-family: 'bariol_bold_italic'; }
.date { width: 298px; float: left; margin: 0 0 16px 0; }

/* Images */
img { vertical-align: top; max-width: 100%; height: auto; margin: 0 0 16px 0; float: left; } /* scale images to width of content but never larger than their actual size */
#contact img { margin: 0; }
.size-full { margin: 0 0 16px 0; max-width: 100%; }

/* 404 */
#DouglasAdams { text-align: center; }
.reload { cursor: pointer; }

/* About */
#contact { width:298px; float:left; margin: 0 0 32px 0; }
#profilePic { max-width: 926px; height: 320px; margin: 0 0 32px 0; background-image: url("assets/profilePic/profilePic.jpg"); background-position: center center; }
#bio { width: 100%; margin: 0 0 48px 0; }
#contact { width: 100%; margin: 0 0 32px 0; }

/* Videos */
iframe { margin-bottom: 16px; }

/* Publications */
.csl-bib-body { padding-left: 0 !important; text-indent: 0 !important; line-height: normal !important; }



/********** RESPONSIVE **********/

/* Basic responsive settings */
ul a { font-family: 'bariol_light'; font-size: 29px; line-height: 35px; text-decoration: none; text-transform: lowercase; } /* Links in navigation panel*/
ul a:hover { font-family: 'bariol_regular'; text-decoration: none; }
ul a:visited { text-decoration: none; }
.current_page_item a { font-family: 'bariol_regular'; }
.menu-btn { background-color:<?=$highlight?>; cursor: pointer; padding: 3px 8px 5px; color: #fff; margin: 24px 0 32px; }
.featureProject { margin: 0 0 32px 0; float: left; }
#sidebar_menu { width: 298px; padding: 0 16px 0 0; float: left; }
#container { margin: 0 auto; text-align: left; overflow: hidden; } /* need overflow: hidden; to avoid Google Chrome bug. See - http://stackoverflow.com/questions/15550205/strange-rendering-issue-in-chrome-with-floats-in-a-div-with-margin-top */
#currentColor { float: right; }

/* Mobile */
ul a { color: <?=$white?>; }
ul a:hover { color: <?=$white?>; }
ul a:visited { color: <?=$white?>; }
.current_page_item a { color:<?=$white?>; }
.current_page_item a:hover { color:<?=$white?>; }
.current_page_item a:visited { color:<?=$white?>; }
.menu-btn { display: inline-block; }
.featureProject { width: 100%; }
#sidebar_menu { display: none; }
#container { max-width: 926px; padding: 0 16px; }
#currentColor { margin-top: 27px; }

/* tablets - portrait */
@media screen and (min-width: 644px) {
.featureProject { width: 50%; }
}

/* tablets - landscape */
@media screen and (min-width: 958px) { 
.featureProject { width: 33.3%; }
}

/* desktops*/
@media screen and (min-width: 1272px) {
/* Navigation panel */
ul a { color: <?=$highlight?>; }
ul a:hover { color:<?=$highlight?>; }
ul a:visited { color: <?=$highlight?>; }
.current_page_item a { color:<?=$highlight?>; }
.current_page_item a:hover { color:<?=$highlight?>; }
.current_page_item a:visited { color:<?=$highlight?>; }
.menu-btn { display: none; }
.featureProject { width: 33.3%; }
#sidebar_menu { display: inline; }
#container { width: 1240px; max-width: initial; padding: 0; }
#currentColor { margin-top: 16px; }
}

/* @font-face shannanigens */
@font-face {
    font-family: 'bariol_bold';
    src: url('assets/fonts/bariol_bold-webfont.eot');
    src: url('assets/fonts/bariol_bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('assets/fonts/bariol_bold-webfont.woff2') format('woff2'),
         url('assets/fonts/bariol_bold-webfont.woff') format('woff'),
         url('assets/fonts/bariol_bold-webfont.ttf') format('truetype'),
         url('assets/fonts/bariol_bold-webfont.svg#bariol_boldbold') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'bariol_light';
    src: url('assets/fonts/bariol_light-webfont.eot');
    src: url('assets/fonts/bariol_light-webfont.eot?#iefix') format('embedded-opentype'),
         url('assets/fonts/bariol_light-webfont.woff2') format('woff2'),
         url('assets/fonts/bariol_light-webfont.woff') format('woff'),
         url('assets/fonts/bariol_light-webfont.ttf') format('truetype'),
         url('assets/fonts/bariol_light-webfont.svg#bariol_lightlight') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'bariol_regular';
    src: url('assets/fonts/bariol_regular-webfont.eot');
    src: url('assets/fonts/bariol_regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('assets/fonts/bariol_regular-webfont.woff2') format('woff2'),
         url('assets/fonts/bariol_regular-webfont.woff') format('woff'),
         url('assets/fonts/bariol_regular-webfont.ttf') format('truetype'),
         url('assets/fonts/bariol_regular-webfont.svg#bariol_regularregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'bariol_thin';
    src: url('assets/fonts/bariol_thin-webfont.eot');
    src: url('assets/fonts/bariol_thin-webfont.eot?#iefix') format('embedded-opentype'),
         url('assets/fonts/bariol_thin-webfont.woff2') format('woff2'),
         url('assets/fonts/bariol_thin-webfont.woff') format('woff'),
         url('assets/fonts/bariol_thin-webfont.ttf') format('truetype'),
         url('assets/fonts/bariol_thin-webfont.svg#bariolthin') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'bariol_bold_italic';
    src: url('assets/fonts/bariol_bold_italic-webfont.eot');
    src: url('assets/fonts/bariol_bold_italic-webfont.eot?#iefix') format('embedded-opentype'),
         url('assets/fonts/bariol_bold_italic-webfont.woff2') format('woff2'),
         url('assets/fonts/bariol_bold_italic-webfont.woff') format('woff'),
         url('assets/fonts/bariol_bold_italic-webfont.ttf') format('truetype'),
         url('assets/fonts/bariol_bold_italic-webfont.svg#bariol_boldbold_italic') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'bariol_regular_italic';
    src: url('assets/fonts/bariol_regular_italic-webfont.eot');
    src: url('assets/fonts/bariol_regular_italic-webfont.eot?#iefix') format('embedded-opentype'),
         url('assets/fonts/bariol_regular_italic-webfont.woff2') format('woff2'),
         url('assets/fonts/bariol_regular_italic-webfont.woff') format('woff'),
         url('assets/fonts/bariol_regular_italic-webfont.ttf') format('truetype'),
         url('assets/fonts/bariol_regular_italic-webfont.svg#bariolregular_italic') format('svg');
    font-weight: normal;
    font-style: normal;

}

header.php

<html>
    <head>
        <meta name="viewport" content="width=device-width" />

        <title><?php wp_title(); ?> - <?php bloginfo('name'); ?></title> <!-- Text displayed in tab -->

         <link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>/style.php" type="text/css" media="screen" /> <!-- Link to theme css -->
        <link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>/pushy.css" type="text/css" media="screen" /> <!-- Link to pushy css -->
        <link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>/hover.css" rel="stylesheet" media="all"> <!-- Link to hover css -->
        <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet" media="all">
        <link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" /> <!-- Pingback -->

        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> <!-- jQuery -->

        <?php wp_head(); ?> <!-- Necessary wp header hook -->
    </head>
    <body>

        <nav class="pushy pushy-left"> <!-- Pushy Menu -->
            <h1><span class="white" id="pushyGreeting">Hello!</span></h1>
            <ul>
                <?php wp_list_pages('sort_column=menu_order&title_li='); ?> <!-- List all WP pages in a list -->
            </ul>
        </nav>

        <div class="site-overlay"></div> <!-- Site overlay when responsive menu is open -->

        <div id="headerLine"></div> <!-- Colored line at top of window -->

        <div id="container"> <!-- Container aka "wrapper" (needs to be named '#container' for pushy menu to work -->
            <div class="header">
                <div class="menu-btn">☰ Menu</div> <!-- Menu Button -->
                <p class="highlightColor" id="currentColor"><?php include 'color.php'; echo $currentColor; ?></p> <!-- Include color.php file in header.php to have access to the current color value -->
                <br class="clear">
            </div><!-- header -->

Within the style sheet I use the color as my highlight color (hover effects, highlighting, etc). Within the header.php I simply display the value to let people know, what highlight color is being used on my site at this moment.

Here’s a screenshot of what the top part of my site looks like:

Now here is my issue:
As you can see the top right displays the color (#890044) BUT the highlight color being used is a different one (#610030). The Inspect tool confirms that two different values are being used.

Interestingly enough the css file isn’t even using the starting colors from my php: #920049 or #e05038 or #729f98 or #97743a. It started processing the color but it doesn’t seem to be finished. But again, the header.php is displaying the color correctly.

Does this mean that the css file is able to grab the value from the php file before its function is finished? And if so how can I prevent that from happening?
Note: To make it even more confusing , my local WordPress installation – with the exact same files – is working just fine. No color issues at all.

Any help with this issue is greatly appreciated – thanks!

Edit:
I tested the following suggestions but so far I had no luck.
– Checked if I accidentally included color.php more than once in a file (which isn’t the case)
– Changed variable name which didn’t do anything
–

Anyone who can help? I can’t really think of anything I can try to fix this since I am not really fit with php…

Post Views: 2

3 comments

Anonymous says:

June 14, 2023 at 9:15 am

Check if you are calling colors.php more than one time, i have tested the code here and works fine.

Edit the post and put the full code for more deep analysis.
Anonymous says:

June 14, 2023 at 9:15 am
After some testing I figured out that the $hour variable is causing the color difference. As soon as I change $hour with any number from 0-23 within
```
$brightness = (abs(12 - $hour))*-0.055;
```
both HTML and CSS show the same color code. For some reason my code doesn’t like when I calculate the current hour through the date function.
```
$hour = date("G"); // 'G' requests the hour in a 24 hour format (0-23) without leading zeros
```
But it doesn’t throw me a syntax error. It runs but HTML and CSS use two different color codes.

Does anybody have an idea why?

Okay, I found the answer.
I had to set a default timezone before I use the date function. Something like date_default_timezone_set("America/Chicago");

Now my color.php code looks like this

<?php
date_default_timezone_set("America/Vancouver");
//check http://www.w3schools.com/php/func_date_date.asp for data function.
$month = date('n'); // 'n' requests a numeric representation of the current month without leading zeros
$hour = date('G'); // 'G' requests the hour in a 24 hour format (0-23) without leading zeros
$base = 12;
$multiplier = -0.055;

if($month > 11 || $month <= 2) {
    $color = "#920049"; // Winter
} else if ($month > 2 && $month <= 5) {
    $color = "#e05038"; //Spring
} else if ($month > 5 && $month <= 8) {
    $color = "#729f98"; //Summer
} else if ($month > 8 && $month <= 11) {
    $color = "#97743a"; //Autumn
}

$brightness = $base - $hour;
$brightness = abs($brightness);
$brightness = $brightness * $multiplier;

$currentColor = color_luminance($color, $brightness); // if I change $brightness with a number (e.g 0.5) everything works
//$currentColor = $color;

function color_luminance( $hex, $percent ) {

    // validate hex string
    $hex = preg_replace( '/[^0-9a-f]/i', '', $hex );
    $new_hex = '#';

    if ( strlen( $hex ) < 6 ) {
        $hex = $hex[0] + $hex[0] + $hex[1] + $hex[1] + $hex[2] + $hex[2];
    }

    // convert to decimal and change luminosity
    for ($i = 0; $i < 3; $i++) {
        $dec = hexdec( substr( $hex, $i*2, 2 ) );
        $dec = min( max( 0, $dec + $dec * $percent ), 255 ); 
        $new_hex .= str_pad( dechex( $dec ) , 2, 0, STR_PAD_LEFT );
    }

    return $new_hex;
}
?>

More info can be found here
PHP date() produces different results with same timestamp and here
http://php.net/manual/en/function.date-default-timezone-set.php

Comments are closed.

corrupted php variable in css – color issue

3 comments

Social Network

Related posts

3 comments

Social Network