Create a User-Defined CSS Website with PHP

PHP as a server side scripting language can be used to customize CSS. This can make your website more readable and useful to your visitors. In this article, you'll learn what you can do to let them adjust your site so it looks good to them. This is the first part of a two-part series.

TABLE OF CONTENTS:

By: Codex-M

Poor Best

Rating:

/ 2

October 01, 2009

print this article

SEARCH DEV SHED

TOOLS YOU CAN USE

Consider this example: you are designing a website with a black font color and white background. It seems very nice on your monitor; the problem is your readers. Some computer monitors may display your web page as extremely sharp because of the white background. Depending on the situation, some readers may be distracted while reading your piece because of it.

This article attempts to create a sample web page where users can modify or customize the two most important CSS elements: background color and font color. To do this in real time, without affecting the page's user experience, AJAX technology will be used in accordance with PHP.

The goal of AJAX is to communicate with the server side (PHP) without the need to reload the page. PHP will be used to receive the POST request from the browser, and then output server side commands with the customized CSS elements to the browser.

A demo web page with these features can be found here: http://www.php-developer.org/cssajax/customcss1.php

The Design and the CSS/Styling Aspects

CSS/Style elements can be found in the <head> section of the web page. These HTML elements are in the format:

<head>

{css elements here}

</style>

</head>

</body>

</html>

Therefore, the PHP script that will be put out by the AJAX should be found in the <head> section for the CSS to work. Below is the style for controlling the background color and the font color of the web page:

body { color: white; background: black; font-family: Verdana; }

</style>

By using PHP we can make the font color (in the above example it is “white” ) and the background color ( in the example it is “black”) be variables in the PHP scripts. Details of these scripts will be discussed later.

Since AJAX will communicate with PHP and output the HTML to the body, the style should be found in the web page (see above) instead of putting the CSS elements into an external file. This will simplify the coding, although it is possible to have the script write to the CSS as a PHP file.

For simplicity we will just put the style in the web page and not use references to external files such as this one:

One of the biggest technical challenges to providing a user-defined/customizable CSS is how the colors will be generated and rendered as an HTML input. A feasible strategy is discussed next.

Next: The Use of Sliders to Customize Colors >>