Selective CSS with Templates!

You are using CSS with your template, but you would like to use a different style sheet on one or more child pages. How would you do that?

There are actually 2 methods to achieve the desired effect and both work wonderfully with Templates and Child pages. There are differences between them though so make sure you choose the one that best fits your needs.

Method 1 (Editable Tag Attribute):

You can add an editable tag attribute to the link tag in the head block of your template. Making the href attribute of this link tag the editable tag region allows you to specify a different css file for specific pages.

The advantage: You can specify any css file (already existing in the site at time of template creation or newly created css file that you make a month down the road).

The disadvantage: There is no browse option available for the template properties dialog that will allow you to browse to the new CSS file, so you have to manually enter the file's pathname, which could lead to pathing issues.

The Procedure:

Open the template and add an external CSS file link if one does not exist.
In Code View, position your cursor in the link tag and select Modify > Templates > Make Attribute Editable...
In the Editable Tag Attribute dialog box, make the following selections:
Attribute: HREF
Make Attribute Editable: Checked
Label: MyCSS
Type: URL
Default: *Should pick up existing link href value*
Click the dialog's OK button to affect the changes
Save the template and update the pages.

The code in the template page should now look like this:

The code in child pages should now look like this:

Changing the CSS reference in the child page:

Open a child page based on the aforementioned template.
Choose Modify > Template Properties...
Select the parameter named MyCSS and change the value.
Click the dialog's OK button and save changes to the page.

The new CSS file should be referenced in the child page. If the CSS file is not being referenced properly, then perhaps the path to the CSS file is incorrect. Please verify the path to the CSS file, save changes and test until the desired CSS file is active.

Method 2 (MultipleIf Conditional):

You can insert a multipleIf conditional region in the head of the document and use a parameter to select predetermined css files to use on the child page.

The advantage: This method allows you to predefine the CSS files that can be used on a given child page of the template.

The disadvantage: This method does not allow you the flexibility of creating and using a new custom CSS file in the child page without modification of the template multipleIf conditional region. A second issue is that if the person modifying the child page uses a non-specified value then no CSS will be used (we can work around this one easily!)

The procedure:

Open the template.
If the template has a link to an external css file already, highlight it and press CTRL-X (CMD-X), this will cut it from the page and save it in the clipboard.
Position your cursor immediately before the closing head tag </head>. Using our Template Snippets extension, open the snippets panel, select the Templates > If folder. Select M_Block Text and click the Insert button on the Snippets panel (lower left of the interface).

You should now have this on the template page:

 Insert Output 1 
 Insert Output 2 
 Insert Output 3 
 Insert Output 4 
 Insert Output 5 

</head>
With your cursor positioned immediately before the closing head tag </head>, insert the snippet in the Templates > Parameters folder labeled Number.

Your template head should now look like this:

 Insert Output 1 
 Insert Output 2 
 Insert Output 3 
 Insert Output 4 
 Insert Output 5 


</head>
Still using Code view, you see that there are 5 multipleIf statements. Delete the ones that you don't want available (3, 4 and 5 for this example). It should now look like this:

 Insert Output 1 
 Insert Output 2 


</head>
Notice that the template parameter has no name value. Position your cursor in between the double quotes and type IfMyCSS.
Select the content that reads Insert Output 1 and press CTRL-V (CMD-V) which will paste the clipboard contents (your originally linked CSS reference) overtop of the selection. Repeat for Insert Output 2. What you should see now is:


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


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



</head>
You see that there is no condition being met for the two multipleIf choices, the lines are blank. So, we want to modify the top conditional statement to read:
Modify the second conditional statement to read:


The code now should look like this:


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


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



</head>
Next is specifying a different css file to use. Change the ../YourCSS.css reference in the second if statement to the second style sheet, for this example: ../YourCSS2.css.

The code should now look like this:


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


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



</head>
Save the template and update the child pages. That sure was alot of work, but trust me, it will be worth it. There are still some items left for us to do to guard against invalid input, which we will cover next. If you do not wish to perform this part of the exercise, then please jump to the section entitled Changing the CSS reference in the child page below.

Error Correction:

As we discussed above and in our book, if your value is not a 1 or a 2 then there will be no CSS file referenced and the page will not look the way you intended it to. Not to worry, we will take corrective action below. Please note that there are multiple ways of doing this error correction. The method we have chosen is to use an expression in the template to determine if a value of 1 or 2 is used for the parameter named IfMyCSS. If it is not in that range, it will be reset to the default value of 1.

Adding the error correction:

Open the template if it is closed.
Immediately preceding the closing multipleif conditional region markup (), add another clause using the snippet in the Templates > If folder named M_Line Text. The addition should change the code to look like the following:


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


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


Insert Output 1



</head>
Change the Insert Output 1 content to the first css reference such as this:


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


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


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



</head>
Now, change the condition from a null to: (IfMyCSS < 1 || IfMyCSS > 2) like you see below:


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


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


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



</head>
Save the template, update the child pages and proceed to the next section entitled Changing the CSS reference in the child page.

What this does is check if the parameter IfMyCSS has a value of 1 or 2. If it does not, then a default CSS file will be used as we specified in the if clause that we just added.

Changing the CSS reference in the child page:

Open a child page based on the aforementioned template.
Choose Modify > Template Properties...
Select the parameter named IfMyCSS and change the value.
Click the dialog's OK button and save changes to the page.
Just for the fun of it, try changing the value to -1 or 5 and see what happens.

The new CSS file should be referenced in the child page. If the CSS file is not being referenced properly, then perhaps the path to the CSS file is incorrect, please check the path to the CSS, save changes and test until the desired CSS file is active.