Stylehack

PHP Variant Exercise

1. Open the existing stylesheet in a Text Editor.
    
2. Go through your stylesheet and write down all the colors used and what they are used for, as in this example:
   

   header bar, navigation text links = #df5946
   body text = #333
   H1 = #a3c040

   (Who picked that color combination?? eek! hahaha)

3. Use Save As to rename your stylesheet by giving it an extension of ‘.php’ instead of ‘.css’.
    
4. Add a couple of empty lines at the very top of the file so there is room to add the PHP declarations.
    
5. On line 1, add the statement that tells the server to begin PHP parsing:
    
   

   <?php

   
    
6. The first variable declaration will be on Line 2.
    
   [php]$headerNavColor=”#df5946″;

   This line of PHP script is setting a variable named “headerNavColor” to the color we are using (note that a $ always preceeds the variable name being declared and that ther are no spaces between the $ and the variable name), where “headerNavColor” is a name I made up that means something to me and the value is set to the first color from the list created in Step 2 above.

   Please make sure that the line ends with a semi-colon (;), as in the example above; a semi-colon indicates the end of a statement.

   TIP:  This line is a bit of scripting shorthand — instead of first declaring a variable (var = ) and then assigning a value to it, this line does it all at once. You can do it either way, but this is preferred.

7. Write the variable name on your color list (from Step 2)   ~ e x a c t l y ~   as you typed it in your variable declaration… variables are case sensitive and must have the $ at the beginning of the name!
    
8. That wasn’t so bad! Repeat Steps 6 & 7 using the second color on your list and a new variable name for that color.
    
9. Repeat Steps 6 & 7 for each remaining color on your list.
    
10. Don’t forget to save your file periodically as you work.
     
11. Add the statement that tells the server to end PHP parsing after the line containing your last variable declaration:
     
    

    ?>

    
     
12. Your stylesheet should now have something like this at the top:
     
    

    <?php
    $headerNavColor="#df5946";
    $h1Color="#a3c040";
    $textColor="#333";
    ?>

    
     
13. Next we’ll replace each instance of the color in the stylesheet by calling the variables you defined in Steps 6 - 12. Find the first reference to the first color on your list and replace it with a variable call, as in this example:
     
    

    .headerbox { background-color: #df5946; }

    becomes….

    .headerbox { background-color: <?php echo $headerNavColor; ?>; }

    TIP:  Spacing must be   ~ e x a c t l y ~   as shown, with no spaces between the ? and php, nor between the ? and the >

    This bit of PHP will place (echo) the value assigned to the variable “$headerNavColor” to this line of your stylesheet. When the stylesheet is called by your web page the server will execute the PHP scripting and serve up a stylesheet that looks like this:

    .headerbox { background-color: #df5946; }

    
     
14. Ok, go through the stylesheet and replace each instance of a color that you set up as a variable declaration in Steps 6 - 12. For example:
     
    

    a .navlink { color: <?php echo $headerNavColor; ?>; }
    h1 {color: <?php echo $h1Color; ?>; }
    body {color: <?php echo $textColor; ?>; }

    
     
15. Save this stylesheet file and close it.
     
16. Still working with your Text Editor, open a web page (HTML or SHTML only) that uses the original stylesheet and change the stylesheet link in the head so that it calls the new ‘.php’ version of your stylesheet:
     
    

    <link rel="stylesheet" href="mystyles.css" type="text/css" media="screen">

    becomes…

    <link rel="stylesheet" href="mystyles.php" type="text/css" media="screen">

    
     
17. Save this web page file exactly as it is named, with its original extension of ‘.shtml’ or ‘.html’.
     
18. Next, save a copy of this file (Save As) and give it the opposite extension, i.e. if the original is ‘.html’ Save [it] As ‘.shtml’, or vice versa.
     
19. Upload all 3 files to your server.
    

    Unless you are running a web service or Apache & PHP on your local computer you cannot test files locally using PHP scripting.

20. Use a web browser to load the web page with the ‘.shtml’ extension. It should look exactly like it did when it used the plain old ‘.css’ file!
    

    TIP:  If you get an error, you probably have a mistake in your PHP scripting — for instance, you may have left off a semi-colon (;) at the end of a statement (refer to Steps 5, 6, and 12-14 for more info). Check the stylesheet you created in this exercise, fix any problems you find and upload it again. Reload the page in your browser by pressing F5 or CTRL+F5 to force a reload from the server.

21. What a deal! Now load the page with the ‘.html’ extension in your browser.
     
22. Cool beans! As long as the stylesheet is given the ‘.php’ extension (so that the server parses it before serving it), you don’t have to use ‘.shtml’ (or even ‘.php’) as the extension for the actual web page unless you need to do so!
     
23. Open the stylesheet with the ‘.php’ extension on your local computer and change one of the colors declared in the variables at the top of the file. Upload the changed file to your server and refresh either page in your web browser. Voila! The old color is instantly changed to the new color throughout the page, as applicable!
     
24. If you want to use this for the entire site, don’t forget to change the stylesheet link in each file that is used on your web site (refer to step 16).
     

<?php 
/* Don't remove this line */
require('cssvariables.php');
?>

…where “cssvariables.php” is the name of a file you create that contains the variable declarations (Steps 2 - 12). Notice that the variables file must also have an extension of ‘.php’ or the variables will not be parsed by the server and will therefore not exist when that file is included via the call in the stylesheet.