Link Fix for Internet Explorer

This tutorial springs out of the need for RapidWeaver users to have many options in their themes and still have their pages working nicely in Internet Explorer (from now on referred to as IE). There is one big issue surfacing more and more often as themes get more flexible and also Stacks library items add complexities to pages. Let us explain a bit further...

The Problem

Most of us when we first get RapidWeaver are disappointed at the lack of options available in the included themes, and quickly find out that 3rd party themes are the answer. This flexibility comes at a price. Every option inside a RapidWeaver theme other than colour choices has to be achieved by the inclusion of another link in the header of the document to a stylesheet. This is not a problem at all in browsers like Safari, Firefox or Chrome, but good old IE still has a curved ball left for us! Once links to these stylesheets, to javascript files and areas inside style tags reach a magic number of about 32 THEN IE STOPS LOADING THEM! "My chosen theme doesn't have 30 style options" I hear you say, well there are plenty already in there! Here is a list of a few.

This is hardly an exhaustive list, but you can easily see how these things add up. If we look at Stacks, this gets more complicated as many Stacks library items have links to more external files. Add a few of the more powerful ones into a page, and we really make this more difficult. IE 8 does seem not to count everything in the list that it's older brethren do, but still the vast majority. Yes, we can all shout about why Microsoft should have got rid of this limit in IE 8, but as Microsoft usually do, they stubbornly stick what they do and we have to deal with it. How can we solve this?

The Answer (well, this one anyway!)

This is one answer that we have used on more than one occasion. We will be delving into the chosen theme, and 'hard wiring' your favourite options into the styles.css file. This then allows us to remove the calls for the stylesheets for those choices.

It does however involve going inside your theme, and to that end we suggest that those who haven't done this before read our Theme Editing Basics tutorial first, paying particular attention to the copying of the theme! Use a copy for any project you wish to do this for, so you have the original to use for another project.

Some Initial Explanation

We hope here to explain what is going on for those who haven't initially grasped it or who aren't familiar with quite how RapidWeaver themes work yet.

You initiate a style option for a RapidWeaver theme by adding the options into the theme.plist file. Click the image to the right to get a better look. This dictates what options you have and which css file (if any) is added to the page to make it happen. What we intend to do, is find the option required, copy the CSS code in the chosen file to the end of the styles.css file for the theme, and then change the theme.plist so that when that option is chosen, no file link is added to the page at all. We can then go through this process to remove several links from the header of each page when using the theme with these specific options. The sweet bit about this method is other options will often (not always) still work. As long as the newly selected option uses the same CSS selectos as the cod we added to the styles.css file it will override the option we hard-wired in.

Applications

Here we suggest a few useful apps we like and have used. There are many on the market, and each will have their own favourites, these are just ours!

Espresso by MacRabbit

Text Wrangler by BareBones

TacoHTML by Taco Software

RWMultitool by MultiThemes

Workflow

  1. List some style options you are using on most/all pages.
  2. Make sure chosen theme is a duplicate and then reveal contents.
  3. Find options in the plist file and note the file normally loaded.
  4. Find and copy the contents of the file loaded by the option, and add it to the styles.css file.
  5. Edit the Theme.plist file to stop the link being created.
  6. Preview an appropriate page in RapidWeaver to check the style options are functioning as required.

There are quite a few applications you can use to help you do this job. We prefer Espresso by MacRabbit, as we use this app for many coding jobs. Our favourite free option would be Text Wrangler by BareBones Software. It will do you proud when dealing with both CSS files and Plist files. While you can use Text Edit, do try Text Wrangler as it has a list of the files you are working with on the right, making switching between files and keeping track of files easier.

Once a list of style options has been made, then going through the workflow points from 2-6 for each option will make any troubleshooting much easier. You can choose a page to concentrate on, and take a look beforehand in the Source view in RapidWeaver to see all the stylesheets that are being brought in, and then compare as you go to see the reductions!

1. List Style Options

This will have to be left to you to decide! We picked the page that was adding the most additional file links to look at when choosing the options to 'hard wire'. Open the style options up in the Page Inspector of RapidWeaver and then take a screenshot of them to look at. We have been known to print it out to mark as done as we go.

2. Reveal the Theme Contents

Right-clicking on a theme in the RapidWeaver theme view will give you the option of duplicating or copying the theme. Using a name that is relevant to both the theme name and the project is recommended. Again we say it, make sure you are working with a copy of the theme. Once you are sure that you are working with a copy, then right-click the theme again to choose 'Reveal Theme Contents in Finder'. You'll now see some of the files we are interested in, like 'styles.css', 'Theme.plist' and folders we will delving into for the files related to the options.

3. Look in the Plist File.

In the contents of the theme, find the Theme.plist file, right-click it and choose the appropriate program to open it. It should look like the image further up the page opposite the initial explanation. Looking down that file, you should be able to see options and the files. Using that image as an example, if we are choosing the option

850px • Sidebar Width 235px • Content Width 615px • SidebarHeader below Header (default)
then the link to the file loaded would be
css/width/850px.css

4. Copy and Paste the CSS code.

Taking the link above as the example, you will need to look in the theme contents for the folder calle 'css' and inside that for the folder called 'width' and in there will be the file we need called '850px.css'. Open this file with your choice of application, and copy all the code in the file.

Now open the styles.css file. Scroll to the very bottom of the file and paste in all the code from the option file. Remember to save it too.

5. Edit the Theme.plist File.

Now we go back to the 'Theme.plist' file we looked at earlier. Where we had

css/width/850px.css
in the file we highlight it and delete it leaving nothing inbetween the string tags. RapidWeaver will now no longer create a link in the header. You can see how this looks when we did this for the choice of the Custom Header Image 01. Please note that the 'Type' also has an empty string after it, to stop RapidWeaver from placing an empty link in the heade of the document. We must remove that too. Now save the file.

6. Preview an Appropriate Page In RapidWeaver

We do recommend you check the result in the RapidWeaver preview after each edit. You can also take a look in the source view to check ther is one less link!

Repeat parts 2 to 6 for each stylesheet you want to remove. You should even get a slight speed increase for your pages wit fewer calls in the page.

That's It!

We hope you can make use of this tutorial and it helps make more working pages possible! Until Realmac Software make quite a huge re-write to RapidWeaver then we will have to keep an eye on the number of stylesheets we use in a RapidWeaver project.

WebKarnage.