Using CSS in Dreamweaver

[JoshSpeed]

One of the things I can see that we need to improve is access the Actinic CSS files from DW.

We dont seem to have found the perfect solution, but here is the change we are considering. I'd like some feedback on this please.

Provide facilities to allow you to "pull" copies of the Actinic style sheets locally.

I propose we do this as follows
When you register a page, there will be a tickbox on the dialog that
is on by default.

This will say "Create local copies of Actinic Style Sheets"

This will render actinic.css and generate any files that it uses and copy
them into the local DW directory. It will prompt to "overwrite" if any
files already exist (this dialog can say "dont ask me again")

The files created will be read only.



There will also be a menu entry under the register design entry to
"Copy Actinic Style Sheets" which will also do this, and can be used to
refresh the style sheets manually if the user changes anything in catalog that effects the style sheet.


Files that are included from a Dreamweaver "layout" will be loaded up onto the web automatically but:
The rules for loading up files referenced by layouts in DW are
if the file exists within catalog, then dont load it from the DW space.
only files that dont exist get loaded from the DW space.



So for example
1) if you want to edit the Actinic.css file, do it by editing the layout in DW, you cant do it by editing the local (read only) copy of the CSS file.
2) you can create your own CSS files using DW and they will be loaded to the website automatically - if they are included in DW layout that is used.
3) any .css files that you create in DW will not be loaded up to the site unless you specifically include them into a DW layout that is used, or, you specifically add them to the list of uploaded files.

[RuralWeb]

The files created will be read only.

Why export them if they are going to be read only

do it by editing the layout in DW

Does this mean we can use the css style definition function in DW to format the css?

[jont]

There may be 1001+ reasons ... but why not simply release the one and only actinic.css into the site1 folder? The user updates it from inside Actinic, can be updated using DW and will always get uploaded to the web no matter!

The actinic.css surely has to be one of the most single important files available - especially if looking at bringing non-Actinic users into the fold.

[JoshSpeed]

if you want to edit the Actinic CSS file in DW, you can do this. In the same way as you can edit any page design externally... Create a new CSS file, import all the Actinic styles and classes into it, register it with Actinic and use it as the the Actinic Stylesheet Layout.


ChrisD wrote the steps to do this for me as follows:
1) In Dreamweaver, create a blank file and save it as 'actinic-stylesheet-template.css' or something. Save this file wherever you like – though I suggest saving it in the same folder as your existing external design.
2) Then in Dreamweaver go to 'Actinic | Iport a design from Actinic'
3) Select 'Actinic StyleSheet' from the list and click 'Insert'. This has inserted all the styles from the 'Actinic StyleSheet' layout in Actinic.
4) Save the file.
5) Now go to 'Actinic | Register a Design With Actinic'.
6) Rather than selecting <All Pages> scroll down and just select 'Actinic Stylesheet'.


This file in Dreamweaver is now used as the source code for the Actinic StyleSheet layout in Actinic and you can edit it in Dreamweaver.


The two techniques will work together. Make a change to 'actinic-stylesheet-template.css', save your changes, then switch to your external html design and click the 'Update CSS' button to re-generate the temp actinic.css file.

[JoshSpeed]

In V7, you could edit the Actinic.css "template" and treat it like it was the real CSS file. You can of course get the same behaviour in v8. simply call the CSS file "actinic.css" when you save the "layout" file in dreamweaver

so using Chris's example again
1) In Dreamweaver, create a blank file and save it as 'actinic.css' Save this file in the DW folder with the other external page designs.
2) Then in Dreamweaver go to 'Actinic | Import a design from Actinic'
3) Select 'Actinic StyleSheet' from the list and click 'Insert'. This has inserted all the styles from the 'Actinic StyleSheet' layout in Actinic.
4) Save the file.
5) Now go to 'Actinic | Register a Design With Actinic'.
6) Rather than selecting <All Pages> scroll down and just select 'Actinic Stylesheet'.


DW will then treat the design as the CSS file and include it into the page designs when you are editing them in DW... this is not as good as having the rendered CSS file, but it will mean you dont have to keep maintaining the CSS copies (and it behaves like V7)



my question at this stage is - with this new information:
Is CSS handling as provided in V8 beta good enough, or do we need to enhance this further (either as I suggested above - or in some other way)?

[pinbrook]

I've not looked at this for a while so some of it is going over my head, but to me we also have the issue of the additional css that seems to some as standard in some of the themes

ie inline I've seen in contemporary theme and theme.css

Are you suggesting before we take an exsisting V8 theme to the DW interface we have to gather up all the css put it all in actinic.css and then tell the DW interface about it.

Wouldn't it be better for all themes to have just the one css file (a different one for each theme)

[jont]

I think the main issue here is the attempt in opening up of the way to non Actinicers to start using the product - which is highly commendable. The way the CSS is being used will be fine for this type of operation - create an external design with it's own CSS file and then simply register the details with Actinic for it to insert navigation, products etc. I agree that seeing (the old v7 analagy) NETQUOTEVAR : BKGROUNDEM in the layout instead of seeing the Actinic colour is very off putting.

This would then give the actinic.css edited in Actinic, theme.css and myown.css ... 3 style sheets ... fine if you have created the site but more than complex enough once handed over to the client.

The in-house Actinic code editing tab is a great step-forward but will never realistically function like Dreamweaver - just as DW will never be an e-commerce tool with anywhere near the clout of Actinic. Allowing full, simple control over the CSS has to be better for everyone - casual users, those with some HTML knowledge, designers and newbies used to coding/designing in DW.

In a utopian world there would be 1 actinic.css for the site which works inside of Actinic and then idealy when opened into DW preview linked through to a compiled version for editing inside of DW without the variables etc showing but changes are made to the non-previewed CSS file! This is how a lot of us work by adding in a temporary actinic.css link to say the Act_ProductLine.html for temporary editing.

I have no idea if this is possible. Hopefully I am trying to highlight the workflow of designers and the importance that 1 single file is to the whole of the site.

[pinbrook]

personally I don't use DW to actually edit the css file, I use topstyle.

But i do want the css file to sit in the folder when I can see the effects of changes on the design whilst working in DW

[JoshSpeed]

If you use topstyle to edit the Actinic CSS template file in v7, you could try this

register the CSS file as an external design, then edit that file using Topstyle.

it is the file that is being used as the "design" once it is externalised.

[pinbrook]

Is there going to be a solution re the fact we have 3 css files in the mix, or is the only solution for us to manually add the contents of inline and themes.css to actinic.css to give us the one css

[cdicken]

Is there going to be a solution re the fact we have 3 css files in the mix, or is the only solution for us to manually add the contents of inline and themes.css to actinic.css to give us the one css

In the next build you should see a bare minimum of inline css, but theme.css will still be there. This file is to support the feature that you can mix and match different theme images with different overall page layouts. If you look at theme.css there are only 4 classes:

.logoimage {
	margin: 0px;
}

This just controls whether there is any padding around the logo image or not. This is just because some theme logos look better with a margin - but some don't need it.

.secondbar {
border: none;
}

This just creates the top and bottom border on the navigation bar for the Smart theme.

.sidebar {
width: 160px;
background-image: url("theme_sidebar_background.gif");
background-repeat: repeat;
border: none;
}

This just makes sure the sidebar (if present in the design) is wide enough to support the sidebar background image that is supplied with the theme..

bulk {
	border: none;
}

This just puts a border around the bulk area in the Best Seller theme.

And that's it. If you are doing a custom design, you don't have to use theme.css at all. It's only for supporting the default themes.

[pinbrook]

Excellent, its looking better...