Convert FrontPage 2003 webbot shared borders, link bars, and themes to include pages, HTML link bars, and CSS - Part 3
- Part 1 - Removing Shared Borders
- Part 2 - Converting webbot link bars to HTML link bars
- Part 3 - Converting a FrontPage theme to CSS
- Part 4 - Converting a Table of Contents web component (Outline webbot) to HTML
- Part 5 - Converting FrontPage forms to use the NMS FormMail handler script
Introduction
The reasons these conversions can be worth doing are given in the Introduction for this series of articles, which is in Part 1 (see above).
Converting a FrontPage Theme to CSS
When you enable or modify a FrontPage Theme, the theme is stored in a set of CSS files, so a site based on a FrontPage theme is already implemented as CSS, and there is no real conversion to do. However, FrontPage considers itself to be completely in charge of the "theme" (CSS) files, and it will modify or delete any of those files anytime it thinks it's necessary. If you modify the files manually to tweak the theme, FrontPage might overwrite your manual changes at any time without warning.
The benefit of leaving FrontPage in control of your CSS theme is that FrontPage makes it easy for you to switch to a different theme or to modify your current one using FrontPage methods. When you change the theme, in addition to updating ordinary style definitions in the CSS files, FrontPage also automatically generates numerous .gif images with foreground and background colors, text fonts, and shapes appropriate to that theme. When you turn off FrontPage theme management, you'll still have the .gifs that you already have, but if you subsequently want a new look for the images, you'll have to create them yourself. (However, there is an easier alternative: make a copy of your entire website, and re-enable themes in it. Choose the theme you want, let FrontPage create all the images, and then copy them manually from the copied site into your real website.)
The downside of leaving FrontPage in control of your theme is that FrontPage takes considerable liberties with the aspects of your site that it thinks it owns, such as your theme stored in the _themes folder.
All you need to do to take control of your theme is copy its .css and related files to your own folders, convert all your pages so that they use your CSS rather than the FrontPage theme, and finally turn off the use of the FrontPage theme. The steps are similar to ones you've already seen in the previous articles:
1) Create a new folder in your site.
You could call it themes. Do not prefix it, or any folder you create, with an _underscore.
2) Copy all the files from \_themes to \themes.
These
files
DO contain relative hyperlinks, so you must copy the files as follows to ensure the hyperlinks are NOT
adjusted while being copied. The reason is explained in more detail in a
previous article:
- Go outside FrontPage, to Windows Explorer,
- Navigate to your website's old \_themes folder.
- Copy all its files to a folder that is outside your website, like \My Documents.
- Go back to FrontPage.
- Click on your new \themes folder so it is highlighted in the Folder List pane.
- Click File > Import...,
- Add File.
- In the popup dialog, navigate to the folder that you copied the files to, select them, click Open, and in the next dialog box click OK to import them.
When you turn off Theme support, FrontPage will delete the files in \_themes, but you'll still have them, in \themes.
3) Revise all your pages to use your CSS, not the FrontPage theme
In the <head> section of your pages you will find a line similar to this, which tells FrontPage the theme to apply to the page:
<meta name="Microsoft Theme" content="myjournal1 1011, default">
If you open the same page in Notepad, you'll find this line, which I have broken into three for readability:
<!--mstheme-->
<link rel="stylesheet" type="text/css" href="_themes/myjournal1/myjo1011.css">
<meta name="Microsoft Theme" content="myjournal1 1011, default">
The middle line, which FrontPage inserted when the file was saved, is the standard method for basing a page on a CSS stylesheet.
- Copy this line while in Notepad,
- Paste it somewhere else,
- Change the reference to the _themes folder to a reference to your themes folder,
- Copy the line again,
- Close the file in Notepad without modifying it.
The next step will be to insert that line into the <head></head> section of each of your website pages.
I did this inefficiently, but will describe it in case you must resort to
it.
Try not to do it this way. Skip to step 3a)
I worked my way down through the website folders, opened all the HTML files in each folder, and did a Find and Replace, as shown below. If desired, you can add extra line breaks into the Replace box by typing Shift+Enter.
Find:
<meta name="Microsoft Theme" content="myjournal1 1011, default">
Replace with:
<link rel="stylesheet" type="text/css"
href="themes/myjournal1/myjo1011.css">
<meta name="Microsoft Theme" content="myjournal1 1011, default">
For each folder, you must adjust the "themes/" reference to be either
themes/,
../themes, or
../../themes, etc.
depending on how deep the folder is in the directory structure.
The net effect of this is to insert the CSS reference before each reference to the Microsoft Theme. The next step is to remove the theme. It might have been ok to just replace the theme line with the CSS reference line in one step, but I didn't want FrontPage to become confused when I removed the theme, if it found no lines referring to the theme. FrontPage becoming confused by anything is not a good thing.
3a) Insert the CSS stylesheet reference line into the <head> section of each of your website pages
- Click Format > Style Sheet Links...
- Select "All Pages" (or, if you want to test a single page, "Selected page(s)")
- Click "Add"
- In the dialog box, navigate to the folder where your new css file is (in \themes), and select the css file that matches the name of the file you copied from Notepad.
- Click OK.
- Click OK again to apply the css file to all pages. Most likely, FrontPage will adjust all the relative links for you, so this will be a lot simpler than the way I did it.
4) The moment of truth: turning off the site Theme
- Finally, click Format > Theme.
- In the Theme task pane that opens, scroll down to the "No theme" theme.
- Click its little blue menu bar at the right, and
- Click Apply As Default Theme.
This will remove all references to the previous theme, and also delete all the files from the /_themes folder.
You now should have the exact same theme you had before, but with FrontPage no longer thinking it owns it.
Note:
- There is one drawback to implementing your theme this way, which perhaps I should have mentioned earlier. If you want to revise your theme, you must now learn CSS so you can edit the styles directly. Yes, that's on my to do list now, also.
Update 2/22/2008 - Removing excess Microsoft CSS code
I finally got around to inspecting and weeding out the .css stylesheet and the related files copied from the _themes folder. The result was amazing. My CSS file, which was 34KB when first copied (6 seconds download time on dial-up), is now 2KB. The 40 related files are now reduced to only 3 custom bullet images for marking unordered list items. With the non-standard Microsoft styles removed, the CSS now validates easily at W3C, and the functionality of the site remains exactly the same. All the things I removed were not being used anyway.
The key concept is that in addition to the style definitions that the site actually uses, FrontPage stores in the _themes folder all the styles and graphic images it might ever need to use internally to construct or modify theme elements such as banners, buttons, link bars, and Web Components, plus additional information needed if your site uses SharePoint Services. That's a lot of information, and much of it may be unused.
The following is not quite a "how to" because you might not be able to delete as much as I did, and it might not be as easy as it was for me. I no longer use any FrontPage-specific features that use graphic images, and I never used Microsoft-defined styles (the ones starting with ".ms"), so it was easy to know what to delete: almost everything except the most basic style definitions, and the 3 images referenced by them. Since I'm certain I never want to revert to a FrontPage theme, it's ok if the changes make it impossible to go back.
The .css file
There were 7 .css files previously, but only one of them, named after the theme, is the stylesheet actually used by the site, and at any given moment it contains a composite of the information from the other stylesheets, so they're redundant. I deleted:
- color0.css, color1.css (normal and vivid color schemes)
- graph0.css, graph1.css (styles for "Active Graphics" navigation buttons and links)
- theme.css (style definitions for SharePoint services)
- myjo1011-28591.css. Possibly a modification of the theme made at some point. It actually had a later timestamp than the myjo1011.css file, but fc.exe says there are no differences between the two files.
The one I kept and modified was myjo1011.css.
- Searched to verify that the site uses no styles starting with .ms or .User.
- Deleted all such styles from the .css, being careful not to delete the few other needed styles that were mixed in among the ones being deleted.
- The CSS file was now mostly gutted.
- Some of the remaining selectors (such as body) had multiple style definitions created by FP's automated methods. For example, one style definition for body might define the color characteristics, another the font characteristics. For each selector, I combined all its definitions into a single block.
- The resulting CSS code is below. Instead of being an undecipherable mess, it's now something I can understand and build on.
Related files
Visual inspection of thumbnails in Windows Explorer (and some guessing) showed that the following files are only templates for constructing banners, buttons, and other graphic elements that I'll never use, so I deleted them:
|
|
Also deleted this:
- myjournal1.utf8 (Text file with metadata about the theme, presumably.)
That left only these files, which I know are needed because styles defined in myjo1011.css refer to them:
- bull1_journal.gif (The dots being used for items in this list.)
- bull2_journal.gif (A smaller dot for nested lists.)
- bull3_journal.gif (A dash used for level 3.)
I also kept themes.inf because it looks like some sort of font lookup table, although I suspect it isn't used.
I think the only other change I had to make for the CSS to validate was revise a FrontPage-generated font-style:bold; line to font-weight:bold;.
The resulting CSS is simple, valid, and ready for use by Expression Web, Dreamweaver, or any other design program:
/* These must be defined in this order: a:link, a:visited, a:hover, a:active */
a:link{
color: rgb(0, 0, 255);
}
a:visited{
color: rgb(136, 0, 153);
}
a:hover{
}
a:active{
color: rgb(255, 0, 0);
}
body{
background-color: rgb(255, 255, 255);
color: rgb(0, 0, 0);
font-family:'Verdana Ref',Verdana,Arial,Helvetica,sans-serif;
font-weight:normal;
font-style:normal;
}
table{
border-color: rgb(102, 102, 102);
}
th{
border-color: rgb(102, 102, 102);
font-family:Verdana,Arial,Helvetica,sans-serif;
font-weight:bold;
}
td{
border-color: rgb(102, 102, 102);
}
h1{
font-family:Verdana,Arial,Helvetica,sans-serif;
font-weight:bold;
}
h2{
font-family:Verdana,Arial,Helvetica,sans-serif;
font-weight:normal;
font-style:normal;
}
h3{
font-family:Verdana,Arial,Helvetica,sans-serif;
font-weight:normal;
font-style:normal;
}
h4{
font-family:Verdana,Arial,Helvetica,sans-serif;
font-weight:normal;
font-style:normal;
}
h5{
font-family:Verdana,Arial,Helvetica,sans-serif;
font-weight:normal;
font-style:normal;
}
h6{
font-family:Verdana,Arial,Helvetica,sans-serif;
font-weight:normal;
font-style:normal;
}
hr{
color:rgb(154, 154, 154);
background-color:rgb(154, 154, 154);
border:0px solid rgb(154, 154, 154);
height:2px;
}
button{
background-color: rgb(236,233,216);
color: rgb(0,0,0);
border-style:solid;
border-width:1pt;
font-family:Verdana,Arial,Helvetica,sans-serif;
font-style:normal;
}
label{
color: rgb(0, 0, 0);
font-family:Verdana,Arial,Helvetica,sans-serif;
font-style:normal;
}
ul{
list-style-image: url(bull1_journal.gif);
}
ul ul{
list-style-image: url(bull2_journal.gif);
}
ul ul ul{
list-style-image: url(bull3_journal.gif);
}
textarea{
color: rgb(0, 0, 0);
font-family:Verdana,Arial,Helvetica,sans-serif;
font-style:normal;
}
fieldset{
color: rgb(0, 0, 0);
border-style:solid;
border-width:1pt;
font-family:Verdana,Arial,Helvetica,sans-serif;
font-style:normal;
}
legend{
color: rgb(0, 0, 0);
font-family:Verdana,Arial,Helvetica,sans-serif;
font-style:normal;
}
select{
color: rgb(0, 0, 0);
border-style:solid;
font-family:Verdana,Arial,Helvetica,sans-serif;
font-style:normal;
}
caption{
color: rgb(0, 0, 0);
font-family:Verdana,Arial,Helvetica,sans-serif;
font-style:normal;
}
You can ask questions in the discussion forum.
