I have just been dabbling with the remove-div-style action but I can’t seem to get it to do what I want. What I would like is to be able to produce html files with no inline CSS, so all the div CSS is in the external CSS file. I have tried the action which seems to strip out some of the inline CSS but even though I click the box to replace in CSS I don’t seem to get anything. Please could anyone tell me what I am doing wrong, or is there an action which makes all the CSS (including positioning etc) be written in a separate CSS file ie. not inline? Perhaps this will be in version 6 - anyone know if a release is close?
Here’s what I used to do, though if you have a large site it gets
tedious fast.
Apply the Remove DIV Style action to an element but leave the
checkbox disabled.
Manually create a new style to replicate all the positioning and
style css using the element’s id or class as necessary. Note: You’ll
be spending a lot of time in the Extended dialog of the Styles editor.
Repeat, repeat, repeat…drink heavily…repeat some more.
This was the only way I found to strip out all the CSS and get down to
a bare-bones html file. There may be an easier way but I’m not aware
of it. Keep in mind that FW will still put the body and html CSS in
the Head tag. If you want that in the stylesheet as well then you’ll
need to use something other than FW at which point the site will no
longer be editable in FW. It depends on how far you want to take this.
The PageDiv style info will remain inline; the action can’t (I think)
be applied to it, so this is as close as you’re going to get
Todd
On Dec 19, 2009, at 8:31 AM, Tara1 wrote:
I have tried the action which seems to strip out some of the inline
CSS but even though I click the box to replace in CSS I don’t seem
to get anything.
So far the only thing that remotely does that is what you’re using. If you use that action it strips out the styles and places them between the ‘head’ tags in the actual HTML page. If you were to ‘View Source’ on your page you’d see that the site’s styles are written in the same place that the other CSS stuff is if you have ‘External Stylesheets’ turned off.
So the short answer is no there’s not an action to put it in a separate sheet and I’d hope it’s on the list of things for FW6 to have.
Hi Tara,
I’ve an action I created a while ago and is very much work in
progress. So far I’ve released it to a few of beta testers who have
done a wonderful job in providing feedback. I’ll try and upload the
action later today. It’s called Externalize and, well, tries to
externalize all JavaScript and CSS on a page.
Here’s a sneak peek at the action palette; http://www.freewayactions.com/test/externalize/externalize.png
Regards,
Tim.
On 19 Dec 2009, at 14:31, Tara1 wrote:
I have just been dabbling with the remove-div-style action but I
can’t seem to get it to do what I want. What I would like is to be
able to produce html files with no inline CSS, so all the div CSS is
in the external CSS file. I have tried the action which seems to
strip out some of the inline CSS but even though I click the box to
replace in CSS I don’t seem to get anything. Please could anyone
tell me what I am doing wrong, or is there an action which makes all
the CSS (including positioning etc) be written in a separate CSS
file ie. not inline? Perhaps this will be in version 6 - anyone know
if a release is close?
However, I can see getting stuck (maybe not) with the action. What I mean is that typically you don’t have individual style sheets on a per page basis but rather one style sheet that can be used on all pages. Now if I remember correctly, Paul Dunning had something like this and it ran into the problem of how to separate styles that had the same ID on different pages but had different CSS rules attached to them. I believe his way involved applying a unique ID or class to the ‘body’ of the HTML on each individual page and then in the external developed CSS sheet it had the:
body.class-name #style-name { rule: 0px; }
I think the most impressive part for me in your Action was the drop down for CSS formatting. I may have smiled a bit at that point and after a rough day today that helped. I’d love to see that kind of formatting control in FW even in the inline styles in between the ‘head’ tags. I know it doesn’t make a difference, but that might be a nice option between ‘compact’ and ‘beauty’ for those who are code nazi’s.
I’ve always been impressed with your Actions and I’ll be interested to see how this one turns out.
Thanks for the feedback Dan. The action is pretty much a quick and
dirty fix at the moment and avoids most of the nightmares associated
with externalizing CSS and JS code. Given enough time to look at this
I hope to write all of this to common CSS and JS files although, as
you say, there are issue with common element names as well as file
references (images in CSS for example).
You would have noticed that you can only compact of beauty external
CSS at the moment although I can easily add this option for head
styles if needed.
Regards,
Tim.
On 21 Dec 2009, at 06:25, Dan J wrote:
Tim this works great.
However, I can see getting stuck (maybe not) with the action.
What I mean is that typically you don’t have individual style sheets
on a per page basis but rather one style sheet that can be used on
all pages. Now if I remember correctly, Paul Dunning had something
like this and it ran into the problem of how to separate styles that
had the same ID on different pages but had different CSS rules
attached to them. I believe his way involved applying a unique ID
or class to the ‘body’ of the HTML on each individual page and then
in the external developed CSS sheet it had the:
body.class-name #style-name { rule: 0px; }
I think the most impressive part for me in your Action was the drop
down for CSS formatting. I may have smiled a bit at that point and
after a rough day today that helped. I’d love to see that kind of
formatting control in FW even in the inline styles in between the
‘head’ tags. I know it doesn’t make a difference, but that might be
a nice option between ‘compact’ and ‘beauty’ for those who are code
nazi’s.
I’ve always been impressed with your Actions and I’ll be interested
to see how this one turns out.
I’ve been using this action for a while now on a large site of mine and aside from a few early things that needed ‘tweeking’ it has been working very effectively.
I have been working with an SEO consultant (appointed by the client), and this action has slotted into that workflow perfectly. I was constantly being asked to externalize both the .js and .css for more effective ranking (rightly or wrongly…).
So far, I have not come across an action that breaks.
So I for am very grateful that Tim has gone to so much work for this. It saved me a major headache.
Nathan Garner
Creative Director
Austin Wells Design Limited
One Elmgate Drive - Littledown - Bournemouth BH7 7EF
t 01202 301271 e email@hidden w http://www.austinwellsdesign.co.uk
Thanks for the feedback Dan. The action is pretty much a quick and
dirty fix at the moment and avoids most of the nightmares associated
with externalizing CSS and JS code. Given enough time to look at this
I hope to write all of this to common CSS and JS files although, as
you say, there are issue with common element names as well as file
references (images in CSS for example).
You would have noticed that you can only compact of beauty external
CSS at the moment although I can easily add this option for head
styles if needed.
Regards,
Tim.
On 21 Dec 2009, at 06:25, Dan J wrote:
Tim this works great.
However, I can see getting stuck (maybe not) with the action.
What I mean is that typically you don’t have individual style sheets
on a per page basis but rather one style sheet that can be used on
all pages. Now if I remember correctly, Paul Dunning had something
like this and it ran into the problem of how to separate styles that
had the same ID on different pages but had different CSS rules
attached to them. I believe his way involved applying a unique ID
or class to the ‘body’ of the HTML on each individual page and then
in the external developed CSS sheet it had the:
body.class-name #style-name { rule: 0px; }
I think the most impressive part for me in your Action was the drop
down for CSS formatting. I may have smiled a bit at that point and
after a rough day today that helped. I’d love to see that kind of
formatting control in FW even in the inline styles in between the
‘head’ tags. I know it doesn’t make a difference, but that might be
a nice option between ‘compact’ and ‘beauty’ for those who are code
nazi’s.
I’ve always been impressed with your Actions and I’ll be interested
to see how this one turns out.