Creating PHP Controlled CSS Properties For Your Dynamic Website

Once again, I am up with a tutorial about web design to show you how you can make your web design so much dynamic using CSS. After learning this, you’ll have wide range of ideas and creativity to make your web design much more dynamic. Note that, I am not talking about the dynamic contents; I am talking about the dynamic web design. Yes! You can make your web design and web layout as dynamic as you want.

For instance, you may want to change the width your main page container according to the screen resolution of your visitor. Or you may want to change the background color according to the month or time or day.

You can see one of these features in Blogger’s template designer, where you can change the color, font styling and layout of your blog. However Blogger have many limitations and you may not want to have a blog site design anyways.

If you own a web host then you won’t have any problem creating a dynamic web page.

Let’s collect the things we’ll need to do this.

- A HTML file with a design

- A CSS style sheet file

- A PHP capable server

Let’s say that you’ve created a basic design with proper layout and coloring.

Here goes the sample CSS code for one of the div in style.css file.

div {

background: #fff;

width: 200px;

height: 100px;

text-align:left;

}

Here is the HTML code that goes in your index.html file.

Content goes here

This was the basic part we do for our static web design. Note that we’ve linked style.css file in index.html.

Now let’s head for the dynamic part.

Open notepad and copy the following code:

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

?>

Save it as style.php. The header() PHP function defines the header of the file. That is it says what type of file it is. The above code says that style.php is going to contain CSS codes.

Just below the end of PHP code, copy all the CSS codes in style.css file.

Now we’ll need to tweak the CSS here. First define the variable for each property in PHP and add it just below the header function.

For instance, let’s create a variable for width, height and background color.

$height = "200px";

$width = "300px";

$bgcolor = "#ccc"

Add the above variable pattern as in the image below:

Now we’ve variable data ready. We need to specify these PHP variables in the CSS property. We can use echo() function to print out the variable for specific CSS property.

For example,

will print out #ccc.

Similary we do it for width and height as well.

Now we are going to replace the CSS Property values with these variables in style.php file.

You can see in the image below that we’ve set PHP codes in place of default values.

Note that semicolon ( ; ) symbol, that is necessary after the end PHP code to tell the browser that the CSS Property ends here.

Now we are all done for style.php

You can set style.css as backup as you won’t need it anymore to view your website. We’ll be using style.php instead to style our webdesign.

In index.html, replace the link file with these:

Now on wards, index.html will load style.php as a style sheet.

This is the end of the tutorial.

You can use several PHP codes to create a variable from several dynamic functions using PHP. For example, if you want to change the color of the page in case the day is Friday. Then you can do something like this:

// set the default timezone to use. Available since PHP 5.1

date_default_timezone_set('UTC');

// Prints something like: Monday

$weekday = date("5");

if ($weekday == Friday){

$color= #ff0000;

}

?>

You can also use it in place of conditional comments. You can make your web design customizable by creating a separate control page under administrator’s access using Forms and MYSQL.

Note: It was one of the finding from my research for creating a codeless designable web template for Wordpress. Currently I am applying same technique for saaZine Magazine WordPress Template.