Not a problem, Roger.
Custom CSS code can be added in Freeway through the Edit Styles interface (Style Palette, toggle open Edit Styles). Freeway normally creates the page code for you, automatically adding CSS styles to the structures that you decorate like text and boxes. However, there is a limit to Freeway’s automatic abilities and this is when the knowledge and intelligence of an actual human being comes in handy.
You could, of course, open the html documents in a text editor and add the code you desired manually… but then you’d have to do the same every time you re-published the file from Freeway. Or you could do as many others have done – trick Freeway into publishing your customizations for you.
Freeway creates HTML structures and CSS styles based on the elements that it recognizes in your document. If you know what it will or won’t recognize and how it will express that item in the published code, then you can use Freeway to work around its own shortcomings.
For example, Helveticus created the list structure his menu is based on quite easily in FWY5 via the new List pane in the Inspector palette. When it is published it has all the structural elements of an unordered list – the ul container and the list item (li) tags. Freeway even applies some styling to the ul element as the class stlye “.navlist”. However, Freeway cannot directly affect the list element (except through inheritance from the list container). This is where a user with a little CSS knowledge comes in.
Freeway mostly styles elements as class styles, which it attaches to objects that you “touch” in its work environment. However, it does natively support some “tag” styles – these are styles that affect HTML structural elements, such as header text. This is how I exploit Freeway to apply my custom style not only to the list items, but specifically the list items in that one list which are links.
In the Edit Styles window I create a new style, and in the Tag field (not the Name Field) I enter this: .navlist li a
This is CSS shorthand for "Links that are in List Items in containers with the class style “navlist” applied to them. Browsers will only apply this style if all these conditions are met. And since I know how Freeway will write the code for the list/menu, I know it will be recognized.
Freeway will insist on applying a name in the Name field, but that would screw up our plan, so delete it then tab out of that field so Freeway will accept the Tag name. There are other reasons for using the Tag field for our name – styles named with only the Name field are published ONLY IF THEY ARE APPLIED PHYSICALLY TO AN OBJECT IN THE PAGE VIEW WINDOW. Sorry about the caps, but it’s an important point. Also the name field IS INCAPABLE OF SUPPORTING SPACES, DASHES, OR ANY OTHER CSS LEGAL CHARACTER short of letters and numbers.
Freeway still limits the type of style attributes that can be applied natively in the Edit Styles window, so now we resort to the Extended Styles sub-window where we create the new attribute “width” with a value of “166px”. The reason we choose this value is to define the list element width the same as the list container. Essentially this was previously done using the attribute display:block, but IE6 just doesn’t get it. So we spell it out with the width attribute.
When we’re finished, our new style will not be recognized or applied within Freeway’s Page view, but it will be recognized by browsers and in Freeway’s Preview window.
Sorry that this is was long and a bit primer-ish, but I didn’t want new-ish folk scratching their heads. For some, CSS coding in Freeway is a bit of a left turn… I am sincerely hoping that Softpress will steer (at least the pro application) Freeway in the direction of greater CSS control.
Roger Burton wrote:
Again - forgive me jumping in here - how do you get to the code to make these adjustments please ? (I’ll worry about how you establish where, in the code, the problem is later). Roger
Ernie Simpson – Freeway 5 Pro User – http://www.thebigerns.com/freeway/