{"id":116,"date":"2012-11-06T17:28:12","date_gmt":"2012-11-06T22:28:12","guid":{"rendered":"https:\/\/havalite.com\/?p=116"},"modified":"2022-11-22T17:30:55","modified_gmt":"2022-11-22T22:30:55","slug":"dynamic-css-via-php","status":"publish","type":"post","link":"https:\/\/havalite.com\/?p=116","title":{"rendered":"Dynamic CSS via PHP"},"content":{"rendered":"

With php you can do more than handling informations from databases or manipulating them but also you can let php act as another type of files such as xml, image or css file etc. by adding a header information at the begin of your code. (See header Manual<\/a>) Again: beware, the header informations must be performed before any other code or you’ll get the error message: Cannot modify header information \u2013 headers already sent.<\/strong>..<\/p>\n

In this tutorial we want to create a php file that acts sometimes as a css file and other time as a image file including some icons inside it. Therefore we need no more any external images.<\/p>\n

The header<\/h2>\n

First we create a php file (we call it style.php<\/span>) and add the header part for css:<\/p>\n

<?php\r\nheader(\"Content-type: text\/css\");\r\n?><\/pre>\n
Now we can add it to the head part of any html file:<\/p>\n
<link href=\"style.php\" rel=\"stylesheet\" type=\"text\/css\" \/><\/pre>\n
The images<\/h2>\n
In our php\/css file (style.php<\/span>) we want to create small icons which can be used for list-style or <a> elements etc. and for that we have to use the base64 encode\/decode technics. The next code will change the header of style.php<\/span> to act as an image and not as css any more and only in case we send a $_GET<\/span> request for an image that we need:<\/p>\n
if(isset($_GET['image'])){\r\n    $image = $_GET['image'];\r\n\r\n    \/\/ the header for image, type: png\r\n    header(\"Content-type: image\/png\");\r\n\r\n    \/\/ get the image you want by name\r\n    if($image == 'icon1') echo base64_decode('iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8\/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAk1JREFUeNqMU01oE0EU\/mY2u22qMSE2UaFKiwdLD0WE+nPx6MFDQfGmBw9evSmKeBE8C\/XixZvowR+QXlQQb14KaiAnY9OKjU0Q11hSN012Z8b3JrtJWhBc+JidN+\/75nvv7YrKggQ\/QuAiLYfwf883Y\/CYX1ImjlBgcvLC\/bvd5hrC1g+4mSK87ASt+yGkM6A6DioPz91Otiml+0fS230A7tg+GGgSqWPLX8Vm9T1yM\/PkUPScui6II\/skFoghtYqgux2Ybgh3tIDM5Cm021uoN36h+bsFe07g3IQ37MAxSoFhS7J9EWi1\/mAsDLFJyKRdSIoRp19TKtohwDf07UmJIOhgJArtXtFqSIA4DvWM+0YCaiCgVWiTBgoCId2sYlF7RjHisIOjJFCS7CBGStOJjqIhKBKglUQSGNrP3YxuUP4ltdOBiZtkL6dxtfwGCXBZSQldGqnARruduNgmQA7olrgErr\/07hnGD58kYgTPc2wJkr6JZhCwQMrmfVoFb2yAbasY\/B5ycCRjRXO7XLsawpWVvTafefL6I42PJNKJhNebcxgjQsQ90VEPcXlaK\/h+YPOZx19U+tYTnd8IsIfnomnIOv4eNDXJdbxtkBC49ir7\/HUJL4iX5jpGCfkPK2gU374sH5k9fjCbL+YEidW+fvlZKt8rc63jGXSSZi030HjwRlWYywJNxud1c\/VYdWm+vrx0JleYmJ6anpsiM9U7T9Xl0zPSP39C9AUod9D54X+ULC\/SfBfXv9dma2u1s1qjQGGf0PnXf\/1XgAEADr97lE6is6IAAAAASUVORK5CYII=');\r\n    elseif($image == 'icon2') echo base64_decode('iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8\/9hAAAABGdBTUEAAK\/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAHMSURBVHjapFO\/S0JRFP4UIUJIqMWgLQzalAyKIN4TxNXJoZaGIPwHXNMt\/A+C1pZabKgQQd9kQ4pS0KBUi4MNNgT+ev54nXPeVTRoqQvfu+ee7zvnnnPvfQ7LsvCf4ZLvSZi\/ScIpQScYv+g1QoGQEv15zk4wHo0k2BmJYJzNskB3XuTnkoyPQxKsNLwRnJTEycZwOJRgDAbgmdYF82hfmwSzzb4fGkni4DPoHu5K9sVw2I5wu9HNZKDagXDRKNBuy6Kbywm3ePlgSAUD0zQI+tftLdDrAa0WOIB8BYYEk4851rCWY1Qb1IJpYum6bNCsf97f0xZdoNHAUiwmYJt9zLFGaTFNMOj3ZbF882yQrX9ks0CnA9RqNshmH3OsmY1xqRampz21PR6g2bRtr3dOM6ubq+B9b1Uju7AWjwNvb3YVDLLZxxxrZmPkFurbK9NH4kskgHxeyHqpJLMvGLS3DYVQT6cnt2P4HluY3ILGpy3Bd3dy2i\/F4uS0dbbldohjjbod+51wBU+bC5Z1dWZZBzsCXhM05hSviUbxrJU1cdJCZcMlTzng96NSrUqJZM89ZfJLizOaVKA2TEqC8rrjTz\/T1quq4D\/jW4ABAF7lQOO4C9PnAAAAAElFTkSuQmCC');\r\n    else echo base64_decode('iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAQAAAC1+jfqAAAABGdBTUEAAK\/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAABbSURBVCjPzdAxDoAgEERRzsFp95JbGI2ASA2SCOX3Ahtr8tuXTDIO959bCxRfpOitWS5vA+lMJg9JbKCTTmMQ1QS3ThqVQbBBlsbgpXLYE8lHCXrqLptf9km7Dzv+FwGTaznIAAAAAElFTkSuQmCC');\r\n    \r\n    \/\/ Exit this script when image has been served\r\n    exit();\r\n}<\/pre>\n
The code string you see here is created from real images by using the base64_encode() function. To create such a code for other images, use the following methode in a new php file:<\/p>\n
<?php \r\n    echo base64_encode(file_get_contents('http:\/\/theUrlOfTheImage.com\/icon.png')); \r\n?><\/pre>\n
Copy the output code of the new image and add to your list with a specified name for it,\u00a0 the same way as the upper example.<\/p>\n
Dynamic colors<\/h2>\n
We are now finished with the images and we need to define some variables for e.g. colors that might dynamically changed by a random function:<\/p>\n
$darkColors = array('#000', '#3E4422', '#004F66', '#910003'); \/\/ black, green, blue, red \r\n$liteColos = array('#fff', '#D8DB9B', '#B9E7FF', '#FFD7D8');<\/pre>\n
There are 2 ways to call these colors:<\/p>\n
    \n
  1. static: echo $darkColors[2];<\/tt> \/\/ the dark blue color<\/li>\n
  2. or dynamically: echo $darkColors[rand(0, 3)];<\/tt> \/\/ the random function will choose any of the listed 4 colors<\/li>\n<\/ol>\n
    Including images and colors in CSS<\/h2>\n
    At last we create the styles we need as usual:<\/p>\n
    body{\r\n  backround-color:<? echo $liteColors[rand(0, 3)]; ?>; \r\n  color: <? echo $darkColors[rand(0, 3)]; ?>;\r\n}\r\na{\r\n  background: url(style.php?image=icon1) no-repeat;\r\n  color: <? echo $darkColors[rand(0, 3)]; ?>;\r\n}\r\na:hover{\r\n  background: url(style.php?image=icon2);\r\n  color: <? echo $liteColors[rand(0, 3)]; ?>;\r\n}<\/pre>\n
    I’m not going to overload the examples here. Most important is to understand the basics of this idea and try to improve it by your self.<\/p>\n
    I hope this might be useful for you some how!<\/p>\n","protected":false},"excerpt":{"rendered":"
    With php you can do more than handling informations from databases or manipulating them but also you can let php act as another type of files such as xml, image or css file etc. by adding a header information at the begin of your code. (See header Manual) Again: beware, the header informations must be […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[60],"tags":[],"class_list":["post-116","post","type-post","status-publish","format-standard","hentry","category-tutorials"],"_links":{"self":[{"href":"https:\/\/havalite.com\/index.php?rest_route=\/wp\/v2\/posts\/116","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/havalite.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/havalite.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/havalite.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/havalite.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=116"}],"version-history":[{"count":1,"href":"https:\/\/havalite.com\/index.php?rest_route=\/wp\/v2\/posts\/116\/revisions"}],"predecessor-version":[{"id":117,"href":"https:\/\/havalite.com\/index.php?rest_route=\/wp\/v2\/posts\/116\/revisions\/117"}],"wp:attachment":[{"href":"https:\/\/havalite.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=116"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/havalite.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=116"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/havalite.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=116"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}