Dynamic CSS via PHP

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 performed before any other code or you’ll get the error message: Cannot modify header information – headers already sent...

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.

The header

First we create a php file (we call it style.php) and add the header part for css:

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

Now we can add it to the head part of any html file:

<link href="style.php" rel="stylesheet" type="text/css" />

The images

In our php/css file (style.php) 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 to act as an image and not as css any more and only in case we send a $_GET request for an image that we need:

if(isset($_GET['image'])){
    $image = $_GET['image'];

    // the header for image, type: png
    header("Content-type: image/png");

    // get the image you want by name
    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=');
    elseif($image == 'icon2') echo base64_decode('iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAHMSURBVHjapFO/S0JRFP4UIUJIqMWgLQzalAyKIN4TxNXJoZaGIPwHXNMt/A+C1pZabKgQQd9kQ4pS0KBUi4MNNgT+ev54nXPeVTRoqQvfu+ee7zvnnnPvfQ7LsvCf4ZLvSZi/ScIpQScYv+g1QoGQEv15zk4wHo0k2BmJYJzNskB3XuTnkoyPQxKsNLwRnJTEycZwOJRgDAbgmdYF82hfmwSzzb4fGkni4DPoHu5K9sVw2I5wu9HNZKDagXDRKNBuy6Kbywm3ePlgSAUD0zQI+tftLdDrAa0WOIB8BYYEk4851rCWY1Qb1IJpYum6bNCsf97f0xZdoNHAUiwmYJt9zLFGaTFNMOj3ZbF882yQrX9ks0CnA9RqNshmH3OsmY1xqRampz21PR6g2bRtr3dOM6ubq+B9b1Uju7AWjwNvb3YVDLLZxxxrZmPkFurbK9NH4kskgHxeyHqpJLMvGLS3DYVQT6cnt2P4HluY3ILGpy3Bd3dy2i/F4uS0dbbldohjjbod+51wBU+bC5Z1dWZZBzsCXhM05hSviUbxrJU1cdJCZcMlTzng96NSrUqJZM89ZfJLizOaVKA2TEqC8rrjTz/T1quq4D/jW4ABAF7lQOO4C9PnAAAAAElFTkSuQmCC');
    else echo base64_decode('iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAQAAAC1+jfqAAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAABbSURBVCjPzdAxDoAgEERRzsFp95JbGI2ASA2SCOX3Ahtr8tuXTDIO959bCxRfpOitWS5vA+lMJg9JbKCTTmMQ1QS3ThqVQbBBlsbgpXLYE8lHCXrqLptf9km7Dzv+FwGTaznIAAAAAElFTkSuQmCC');
    
    // Exit this script when image has been served
    exit();
}

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:

<?php 
    echo base64_encode(file_get_contents('http://theUrlOfTheImage.com/icon.png')); 
?>

Copy the output code of the new image and add to your list with a specified name for it, the same way as the upper example.

Dynamic colors

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:

$darkColors = array('#000', '#3E4422', '#004F66', '#910003'); // black, green, blue, red 
$liteColos = array('#fff', '#D8DB9B', '#B9E7FF', '#FFD7D8');

There are 2 ways to call these colors:

static: echo $darkColors[2]; // the dark blue color
or dynamically: echo $darkColors[rand(0, 3)]; // the random function will choose any of the listed 4 colors

Including images and colors in CSS

At last we create the styles we need as usual:

body{
  backround-color:<? echo $liteColors[rand(0, 3)]; ?>; 
  color: <? echo $darkColors[rand(0, 3)]; ?>;
}
a{
  background: url(style.php?image=icon1) no-repeat;
  color: <? echo $darkColors[rand(0, 3)]; ?>;
}
a:hover{
  background: url(style.php?image=icon2);
  color: <? echo $liteColors[rand(0, 3)]; ?>;
}

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.

I hope this might be useful for you some how!