Home arrow AJAX & Prototype arrow Create a User-Defined CSS Website with PHP

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.

  1. Create a User-Defined CSS Website with PHP
  2. The Use of Sliders to Customize Colors
  3. Implementation of the Slider
  4. The AJAX HTML Form (Hidden)
By: Codex-M
Rating: starstarstarstarstar / 2
October 01, 2009

print this article



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:



<style type="text/css">

{css elements here}





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:

<style type="text/css">

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


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:

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

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.

>>> More AJAX & Prototype Articles          >>> More By Codex-M

blog comments powered by Disqus
escort Bursa Bursa escort Antalya eskort


- Best AJAX Tutorials for Forms
- The Best AJAX Tutorials
- 8 Great Ajax Tutorials
- Using Ajax and jQuery
- Using Ajax and jQuery with HTML Forms
- Ajax.org Offers Cloud9 IDE for JavaScript
- Java Technologies Provider ICEsoft Releases ...
- Using Recaptcha in AJAX Prototype Framework ...
- Google's Closure Compiler Service API: Addit...
- Installing Google Web Toolkit: Introducing t...
- Google's Closure Compiler Service API: Displ...
- Google's Closure Compiler Service API: Deliv...
- Google's Closure Compiler Service API: the A...
- Google's Closure Compiler Service API: the S...
- Google's Closure Compiler Service API: Optim...

Developer Shed Affiliates


Dev Shed Tutorial Topics: