«sad.ark.tutorials.remove.tags»

Removing Font Tags for Style Sheets

The request:
"I would love to see a CSS retrofit tutorial using GoLive 6! ( Along the lines of "delete these tags, then do blah blah.) Thanks a lot."

Let me make note that I learned this recently on the Adobe GL User Forum from some adroit people willing to share their arcane knowledge. To them, I salute.

Let's say you have an existing site created in the pre-CSS-enlightenment era (different for everyone depending on point of illumination). Even if you make a style sheet to gain control of the site, it has legacy tags built into each page that will prevent your style sheet from controlling your layout. Doesn't make sense? Stick with us, you'll see what I'm talking about in a sec.

Step One - Admitting Your Guilt

Ok, the dilemma: I want the text on all my pages to be a dark olive-green, in a sans-serif font and 12px. This would be so easy to do for an entire site with a style sheet. However, in my existing page or pages, I have unfortunately designated text properties using the bold & italic buttons and I colored and sized some text using these tools in GL. To add insult to injury, I also used the type menu to assign the font face.

Since this is now code in the page, it will always take precedence over my style sheet. I've set up an example HERE. The example page has a style sheet applied to it with the attributes I mentioned above but notice that none of the text is olive-green and none is sans-serif except the header, and the sizes are all messed up. Unless you start from scratch, it will be hard to weed out all the code that prevents your style sheet from controlling your page. Me, I hate messing with code. Well, there is a fairly powerful and easy way to 'out with the old and in with the new'. Next step for that.

Step Two - Beware Irreparible Destruction!

Myself, I've always been a little scared of this feature. It's easy to get into trouble. A bit like opening res-edit on a Mac and messing with your system configurations. Anyway, what we need is to exercise some caution. Before you 'out with the old', you need to back-up your site, just in case things go awry. So, assuming you've allready backed up your site, let's proceed.

Step Three - Search and Destroy

With your site open, in the menu select Edit > Find. This will open the Find feature in GoLive. With this open, select the Element tab. Then, follow the red numbers below. 1) If it is not allready selected, in the pop-up menu, select Name is. 2) In the empty field next to it, type Font. It is the Font tags that contain most of the code that overides our style sheets. By simply removing this tag, we will take care of most our problems! 3) Next we need to select Replace Element by its Content in the pop-up menu below. 4) In the Files From pop-up, you should find your site name. Select it and you have just given GoLive the GoAhead to zap all files in your site for the font tag. This is hugely powerful and far reaching. Reminds me of the time in a philosopy class that I argued that truth is as terrible and destructive as it is liberating and beautiful. Same kinda thing here. That's ok, we have a backup! Hit start and say good-bye to all the old formatting that is preventing you from experiencing the liberation of CSS!

Now, lets look at what this did to our example page. By applying the above step, look at how many of our problems were solved! HERE is our page post-op. Notice that the fonts are now all the same size, they are all the same color, and they are all the same font! BUT, we still have some bold and italicized text to take care of. First, let's quickly look at what this did. In the following table, I have 'Problem Text' formatted with a font tag. Below the problem text, I show the code that makes it problem text. Notice the <font... and everything in it. Size, Color and Font Face. All these things are controlled by the font tag. Also notice that the and are their own tags. So, by removing the font tag, we took care of a lot of it but now we have to deal with the Bold and Italics. Not sure if this helped. Hmm. Ok, next.

Problem Text
Problem Text

Now, back to our find panel. To get rid of the bold and the italics, simply change the Name is field to 'b', (pictured below) hit start and BAM! All the bold tags are gone. To rid ourselves of the italics, simply type 'i' in the Name is field and repeat. There we go! We have now stripped our entire site of some of the most common tags that prevent our style sheet from cascading to our layout!

Go on, have a look at our page now!
FINAL EXAMPLE

Like to do this for only a few pages in your site? Like to practice on a page before you unleash the power? Check step Four.

Step Four - Surgical Strikes

First, I think that this is actually the largest screenshot in any tutorial I have made. Couldn't get this window smaller. So, if you want to only remove tags from specific pages, not an entire site, or you want to practice on a page, this is what we do.

In the step number four above, we use the pop-up to select the entire site. Instead of doing this, leave it as custom and hit the Add Files button just to the right. GoLive is going to pop open this huge menu. Nice icon! You'll need to browse to the page or pages you want to modify. 1) For the examples on this page, I used the page shown in the window below by selecting it. Then, I was tempted to just hit open below. Don't fall for it! First, you have to hit the Add button. Do this again for any other pages. Finally, hit open and you're off!

If you want, feel free to download the test page I used and try it out! Download it HERE.
Open it up in GoLive and try this tutorial on it. Then you can do it for real when you feel confident about what is happening. Thanks for stopping by!