A repost from 1/25/06



From: "LWD" <NO**SPAM!!***lucdix**@**jamDOTrrDOTcom>
Subject: Fusion CSS overview
Date: Wednesday, January 25, 2006 10:50 AM

Hi, Sheila,

Fusion has a very strange way of dealing with CSS, and I haven't completely
investigated how it's been changed in 9, but here's my guess - that it's
about the way it deals with CSS in earlier versions except that you can
modify the 'site.css' file (see below for an explanation of what this is)
within Fusion. (Well, actually, you've been able to modify the 'site.css'
file for some time, but Fusion 9 lets you modify it more places than you
used to be able to.)

When you add a style to your site via the normal process within Fusion, it
pulls it from the Styles folder - which contains graphics (banners, etc.)
and a CSS file called 'style.css'. If you open up a garden variety Fusion
'style.css' file with TopStyle, you'll see there's not much in it.

Many, in fact, have just a few definitions, like these:

/* CSS definition file containing sitestyle stylesheets */
BODY { font-family: Verdana,Tahoma,Arial,Helvetica,Sans-serif,sans-serif;
background-color: rgb(255,255,255); background-image:
url("Images/background.gif");}
A:active { color: rgb(255,0,0);}
A:link { color: rgb(0,51,204);}
A:visited { color: rgb(153,0,153);}
.TextNavBar { font-size: xx-small;}
A:hover { color: rgb(255,0,0);}

or even fewer, perhaps just something like this:

BODY { font-size: 10px;}

If I were going to be following Michael's suggestion using Fusion (which I
don't use any longer), I'd add his html definition to the original
'style.css' -after making a backup, of course - for each style I would be
using. I'll explain how below.

You'll see, by the way, that there's a 'style.ssx' file in those Style
folders - that has to do with your navbars.

This gets confusing, so from this point on, I'll call the 'style.css' file
in your Styles folder' the 'original_style.css' file' - different from what
Fusion later gives the exact same name - 'style.css' - in your local publish
folder (or on your server if you publish directly). I'll call the one in
the Local Publish folder the 'publish_style.css' file.

(Note: don't actually change either of these names - I'm just giving them
these names for the sake of this explanation.)

Copy an entire original Style folder you like and want to use. Call the
copied folder, SheilaStyle. Again...

***Please don't change the style name - leave it named 'style.css'.***

You can complete ignore 'display.css' if your site shows it, by the way -
this is a temporary file Fusion creates.

If you want to change the * internal name* your style *shows* in Fusion when
you work with it, change it within 'style.ssx' - it's the first entry. It's
a read only text, so uncheck that to change it. Again, don't change the name
of the actual file.

Start a new site in Fusion, pull in 'SheilaStyle', build your site - a very
simple page - let's say just one text box with one sentence. Make no other
changes.

Do a local publish.

Right-click 'View Source' for the published page and you'll see these 2
statements in the code:

<LINK REL=STYLESHEET TYPE="text/css" HREF="./style.css">
<LINK REL=STYLESHEET TYPE="text/css" HREF="./site.css">

So what's the 'site.css' file? You'll see below.

Open your 'local publish' folder and you'll see that, lo and behold, you
have a 'style.css' file and a 'site.css' file - which Fusion has just
created. It was not in your original Styles folder.

Optional: open both in TopStyle (or Notepad) to take a look.

The 'style.css' file (hereinafter called 'publish_style.css' will contain
this comment:
/* CSS definition file containing sitestyle stylesheets */
and contain the style definitions from the 'original_style.css' file.

The 'site.css' file should contain this comment:
/* CSS definition file containing site wide stylesheets */
and nothing else (yet).

The reason some 'original_style.css' files contain more or fewer definitions
is that all browsers have default definitions for h1,h2, list and link
definitions.

Close down Fusion.

Open up the 'original_style.css' for 'SheilaStyle; in TopStyle (or Notepad).
(It will be 'read only' so you'll have to right-click to uncheck that
property so that you can edit it.)

Add: html { min-height: 100%; margin-bottom: 1px; } right below the 'body'
definition.

It will look something like this:

/* CSS definition file containing sitestyle stylesheets */
BODY { font-size: 14px;}
html { margin-bottom: 1px; min-height: 100%;}

Save it with no name change.

Open up Fusion. Open up the site you're working on (if you haven't already
set it to do that in Site Options.)

Go to the Styles tab.

'Pull in' (**again**) the changed 'SheilaStyle' style from your 'Local
Styles' folder - just double-click it.

You'll get a warning which says that your active styles already contains a
style named 'SheilaStyle' - do you want to overwrite it? You do.

Click on 'Overwrite' and check 'Apply to All'

Do another Local Publish.

Using Windows Explorer, look at the 'publish_style.css' (which will be
called 'style.css') in your Local Publish folder with TopStyle (or Notepad).
You'll see that the added 'html' definition is in it.

'Site.css' will not have changed.

So what is 'site.css'?

It contains any CSS changes you've made within Fusion - and those settings,
when published, override whatever's in the 'Publish_style.css' file because
of this code in your index.html file:

<LINK REL=STYLESHEET TYPE="text/css" HREF="./style.css">
<LINK REL=STYLESHEET TYPE="text/css" HREF="./site.css">

That's why the order is important. 'Site.css' comes after 'style.css'
because 'site.css' overrides 'style.css' if there's anything in it. If
there's not, nothing will happen.

I think that covers it. It should get your started. One of the many
reasons I switched to DW is that this is all much simpler to handle (and to
explain!)

Hopefully Fusion will let you use an external CSS file soon.

If it does, presumably the way it will work is that it will become
'site.css' after Fusion's internal transformation and, as you see in the
page definition, those definitions will override whatever is in your
'original_style.css' file.

HTH,

Lucian