Stylehack

SHTML 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 ‘.shtml’ instead of ‘.css’.
    
   

   mystyles.css ---> mystyles.shtml

   
    
4. Add a couple of empty lines at the very top of the file so there is room to add the X/SSI declarations.
    
5. Optional: On line 1, add a comment reminding yourself what the next section is designed to do:
    
   

   <!-- This is where I declare my colors as variables -->

   Why is this optional? Because when the stylesheet is parsed by the server all the X/SSI statements will be removed from the file and empty lines left in their place. However, any comment lines you added will remain in the file and will be visible to anyone who looks at the stylesheet. I don’t want anyone looking to see comment lines there, so I won’t add it to my stylesheet. But what you do with yours is up to you!

6. Let’s set up the first variable declaration, either on Line 1 or on Line 2 as applicable to your file.
   

   TIP:   You must type the declaration   ~ e x a c t l y ~   as shown below in terms of formatting… do not add spaces between the -- (two dashes) and #, nor between # and the s in ’set’.

   <!--#set var="headerNavColor" value="#df5946" -->

   This line of X/SSI sets (#set) the variable (var) named “headerNavColor” to the color we are using (value=), 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 I created in Step 2 above.

7. Write the variable name on your color list (from Step 2)   ~ e x a c t l y ~   as you typed it in the variable declaration in Step 6 — variables are case sensitive!
    
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. Next we’ll replace each instance of the color in the stylesheet with a call to the variables you defined in Steps 6 - 9. 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: <!--#echo var="headerNavColor" -->; }

    
    

    TIP:  Don’t forget that spacing must be exactly as shown! See Step 6 for more info.

    This piece of SSI will place (#echo) the value assigned to the variable “headerNavColor” in this line of your stylesheet when it is parsed by the server, resulting in a line that looks exactly like it did in the original stylesheet:

    .headerbox { background-color: #df5946; }

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

    a .navlink { color: <!--#echo var="headerNavColor" -->; }
    h1 {color: <!--#echo var="h1Color" -->; }
    body {color: <!--#echo var="textColor" -->; }

    
     
13. Save this stylesheet file and close it.
     
14. Still working with your Text Editor, open a web page that uses the original CSS stylesheet and change the stylesheet link in the head so that it calls the new ‘.shtml’ version of your stylesheet:
     
    

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

    becomes…

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

    
     
15. Save this web page file exactly as it is named, with its original extension of ‘.shtml’ or ‘.html’.
     
16. 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.
     
17. Upload all 3 files to your server.
    

    Unless you are running a web service on your local computer, you cannot test files locally using X/SSI. Yes, I know that Dreamweaver et al will process SSI in some cases; ’some cases’ being standard SSI includes. It will not work here.

18. 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 extra spaces in your X/SSI statements (refer to Steps 6 and 9). 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.

19. What a deal! Now load the version of this page with the ‘.html’ extension in your browser.
     
20. Cool beans! As long as the stylesheet file is given the ‘.shtml’ extension (so that the server parses it before serving it), you don’t have to use ‘.shtml’ as the extension for the actual web page unless you need to do so!
     
21. Open stylesheet with the ‘.shtml’ 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!
     
22. If you want to use this for the entire site, don’t forget to change the stylesheet link in each file that is used in your web site (refer to Step 14).
     

<!--#include file="cssvariables.shtml" -->

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