Forcing Freeway to publish CSS styles in the order you want them to be in
Ok this tutorial is a sneaky way for people who know how to write a bit of CSS or if you have used one of those online css button creators, and are trying to figure out ways of circumnavigating Freeways inability to order styles in its external style sheet.
I hope this sneaky system will be a something that will not be needed for very much longer but at the moment, there are occasions when I need to force Freeway to write styles in a specific order.
There are other ways in which to link a new style sheet, for example: referencing one in the head tag and then creating a new style sheet by hand, placing it via ftp in the css folder etc. etc., but if you are like me… I tend to lose or forget where these extra style sheets are when I return to the job months later.
the other method is to use the two part action thats avaialble to generate a style sheet from a normal freeway page but just like this system this too has its disadvantages
So to recap this method is for those occasions when you want special styles to be published by freeway in the normal CSS style sheet and then if needed adjusted within freeway.
Take the following example:
I need to publish these styles (These are aimed specifically at the WebYep menu) but it could be for anything.
I need them to be published as they are.This should ideally be with all the descriptive elements in place, in the order they are written and with break returns. This is so I can read it easily and to help me know what each one does for future reference. I also want to be able to adjust the styles and see the effect straight away via the cmd shift N route and having one window set to preview and the other set to artwork
*(if you don’t know how to do this I have added it at the bottom
So below is the example and yes what hell of a lot of style to get into freeway:
.MyMenu {
font-family: Verdana, Geneva, sans-serif;
float: left;
margin-right: 40px;
}
/* Normal items */
.MyMenu li.WebYepMenuItem {
font-weight: normal;
}
/* The tree titles */
.MyMenu li.WebYepMenuTitle {
font-weight: bold;
margin-bottom: 5px;
}
/* All items */
.MyMenu li {
list-style-position: inside;
list-style-type: none;
font-size: 1em;
margin: 0 0 5px 0;
padding: 0;
}
/* All trees */
.MyMenu ul {
padding: 0;
margin: 0 0 10px 0;
}
/* Second level trees */
.MyMenu ul ul {
padding: 0 0 0 20px;
font-size: 0.9em;
}
/* Trees of third level and below */
.MyMenu ul ul ul {
font-size: 0.8em;
}
/* The first item in each submenu */
.MyMenu li li.WebYepMenuFirstItem {
margin-top: 0;
padding-top: 10px;
}
/* The actual links */
.MyMenu a:link, .MyMenu a:visited, .MyMenu a:active {
text-decoration: none;
color: #a20066;
}
/* The actual links when hovering */
.MyMenu a:hover {
color: #d32d95;
}
/* The actual link of the currently selected item */
.MyMenu .WebYepMenuCurrentItem a:link, .MyMenu .WebYepMenuCurrentItem a:visited, .MyMenu ..WebYepMenuCurrentItem a:active {
text-decoration: none;
color: #271b91;
}
/* The actual link of the currently selected item when hovering */
.MyMenu .WebYepMenuCurrentItem a:hover {
color: #452eff;
}
Now to import this lot conventionally within freeway will take a blooming age and wont actually be successful because of the aforementioned limitations.
So this is how I sometimes do it… first before we start, copy this full list shown above into a text editor. I tend to use text mate but it can be anything.
- copy the first selector which in this case is…
MyMenu please note you dont need the dot and you dont need the { - click on edit styles and click on the + button to add a new style then in the name field paste the name and hit tab to confirm
- go back to your list of special styles you have in your text editor
- now copy the first item which in this case is font-family you dont need the : as freeway will add this automatically.
- return to your style and click the extended button… the pop-up extended window should have appeared, click on the new button and then click inside the name field inside the Edit Name/Value window. You should now see the words font-family
- go back to the text editor and copy everything from the word Verdana which is on the second line down all the way down to #452eff; do not copy the final } as this is placed in by freeway
- paste this into the empty Value area of the Edit Name/Value window
- then hit ok three times to close down the windows
- draw an html box click on the edge and apply the .MyMenu style to it
- now publish
The result is freeway has published the complete set of styles in the the correct order.
The one thing that really is annoying though is not being able to use the return key to generate a new line you have to use a copied space to create a new line but apart from that its not a bad sneaky way to do this sort of thing.
I hope this helps people who have been struggling to do this and if others have any comments on how to push the CSS styling system further then please let me know.
*How to make a live preview while you are adjusting the styles
Have your artwork open and then press CMD SHIFT N.
This should make a duplicate window in exactly the same position on the screen.
Move this new window and arrange both so you can see them at the same time and set this new window to preview.
Now when you adjust the style in the artwork, you should see the result of this adjustment in the live preview window. In the case of rollovers you will need to click on the preview window to activate the rollover functions.
all the best max
tutorials mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
