Product separators

[RuralWeb]

I am upgrading a site but the product separators have vanished see:
http://www.the-old-smokehouse.co.uk/...ssortment.html

As you can see the products are far too close together, is there a way to put in a separator image or increase the padding?

[jont]

Hi Malcolm,

the offending code is

.dotted_line_blue {
height: 1px;
background-color: #ffffff;
background-image:url('theme_dotted_line.gif');
clear:both;
}

with the colour set to the same as the background!

[RuralWeb]

Thanks jont,
I think Im going to strip out the Actinic CSS and build it up from scratch, once I can get it to paste in from DW. Its causing me all sorts of problems like this.

[pinbrook]

once I can get it to paste in from DW

you can pick up the css file from previewHTML

[RuralWeb]

you can pick up the css file from previewHTML

Thanks jo - does this mean that you are able to edit it in DW and drop it back into the css pane.

Upto now I have been getting it via ftp altering it and ftping it back - of course a refresh wipes the file but I am keeping a copy in the file. But I cannot paste it back into the css pane - it only inserts the first line. If I write some new css in DW and paste it in it works well - I cannot understand why I cannot just cut and paste, I am sure chris said during the beta that we could cut and paste

Thanks again jont it worked but I had to delete the palette variable as editing it did nothing!

[pinbrook]

I think ChrisD needs to clarify what we can and can't do.

There are many options open to us, personally I have adopted both the use external css and adding to the bottoms of "actinicStylesheet"

For me there is a fundamental flaw in both options.

If I use custom.css I can edit using Topstyle (I like WYSIWYG, and auto fill features) but I can't use variables such as palette1, palette2 etc et

If I use ActinicStylesheet i lose the autofill but can use variables

[jont]

I think Im going to strip out the Actinic CSS and build it up from scratch

aye - the use of CSS shorthand (as missing from the above snippet) would also reduce the bloated actinic.css considerably

[pinbrook]

the use of CSS shorthand

that why we need the ability to edit in external css progs, not just hand code into actinic.

I can never remember the order of shorthand, ie padding is it top,left, right, bottom etc etc, borders is it size, postion, type etc etc

[RuralWeb]

I can never remember the order of shorthand, ie padding is it top,left, right, bottom etc etc, borders is it size, postion, type etc etc

Not wrong there jo I am happy using css in DW but having to edit in Actinic is a nightmare eg product separator problem.

Chris can you tell us why the css will not paste from DW back into Actinic

[RuralWeb]

I think ChrisD needs to clarify what we can and can't do

Im on the design course next week so I will ask him.

[cdicken]

There are lots of issues raised in this thread. Sorry I was mostly unavailable all day yesterday, otherwise I might have been able to have given some input sooner. I'll try and deal with the outstanding issues, starting with Malcolm:

As you can see the products are far too close together, is there a way to put in a separator image or increase the padding?

I see you have managed to fix this OK. It looks really good. Can I ask you you did this? Did you edit the product list, or did you edit the CSS layout?

Chris can you tell us why the css will not paste from DW back into Actinic

You really can do this. Honest. I do it all the time. Here is what I do, and maybe you can tell me where it falls apart for you:

1. I go into Dreamweaver, create a temporary CSS file and create a CSS definition that I want to use in my Actinic Stylesheet.
2. I copy this to the clipboard.
3. I go to Actinic and switch to the 'Design' tab.
4. I set the 'Select Page Type' list to be 'Actinic Stylesheet;
5. In the layout code window at the bottom of the tab, I scroll down to the bottom of the file and paste my CSS code into there.
6. I then change section in Actinic to re-generate the CSS file and see the changes.

OK - Jo

I think ChrisD needs to clarify what we can and can't do.

As mentioned on the previous thread, I don't want to write some kind of definitive 'This Is How To Do It' instruction manual as I am not a designer (a fact I'm sure various people on this forum would agree with). I want to know what you want to do, and then tell you how best to achieve it. You guys are used to working with the incredibly rigid framework of v7 - but now v8 gives you options. We need to find what are the most popular options and then make sure they work seamlessly and are well documented.

I have documented elsewhere how to edt the Actinic Stylesheet in whatever application you want. I agree this has the problem of not easily inserting variable names. I would argue, however, that you are trying to create themes that can be coloured by users, whilst most developers will just want to hard-code their own custom colour references in there. In the meantime though, you can create the variable in Actinic and then copy and paste it into TopStyle.

If you use Dreamweaver then you can have the best of both worlds - you can use Dreamweaver to build your CSS and then insert the variables from the advanced 'Insert Actinic Content' list. Here is a reminder of creating a linked external stylesheet:

1. In Dreamweaver go to 'File | New' and create a new basic 'CSS' page.
2. Save this page wherever you want and call it 'actinic-styles.css'.
3. Now go to Actinic and in the 'Design' tab, select 'Actinic Stylesheet' from the 'Select Page Type' list.
4. There should be a layout called 'Actinic Stylesheet' in the layout code window at the bottom. Copy the entire contents of the layout to the clipboard.
5. Now paste this content within your 'actinic-styles.css' file and save your changes.
6. Now in Dreamweaver go to 'Actinic | Register a Design with Actinic'.
7. In the 'Register a Design with Actinic' window that appears, select 'Actinic Stylesheet' - this is about three-quarters of the way down the list.
8. In the 'Name of the new design' field, call it something like 'Actinic Styles'.
9. Click 'Register'.
Actinic will not look any different, but now the 'Actinic Stylesheet' page will be using 'actinic-styles.css' as its source.

[RuralWeb]

I see you have managed to fix this OK. It looks really good. Can I ask you you did this? Did you edit the product list, or did you edit the CSS layout?

I had to edit the css as nothing I did with the product list seemed to work.

[pinbrook]

I think ChrisD needs to clarify what we can and can't do.

sorry that should have been phrased, are the current CSS options working as designed or are we asking for more functionality.

I'm still unsure if editting css using an external prog will allow me to use actinic variables? in my case topstyle - this can be any css prog that is WYSIWYG - I don't use DW for editting css

As I have already reported if you use variables in a custom.css they do not work ie they are ignored.

The only way I can get them to work is to add all my code to "actinicstylesheet" which is far from ideal. I think the above tells me how to bring "actinicstylesheet" in to DW, but again that isn't what I want either.

[cdicken]

I'm still unsure if editting css using an external prog will allow me to use actinic variables? in my case topstyle - this can be any css prog that is WYSIWYG - I don't use DW for editting css

As I have already reported if you use variables in a custom.css they do not work ie they are ignored.

This does work on my machine. Here is what I did:

1. Copied the entire contents of the Actinic Stylesheet layout to a file in my SIte1 folder called 'styles.css'
2. Changed the 'Actinic Stylesheet' layout to read @import url("styles.css");

To test this, I searched for 'h3.product' in styles.css. This is the default formatting for the product names. This found the following code:

	h3.product	{
		font-size: <actinic:variable name="LargerFontSize" />;
		font-weight: 900;
		margin: 0px;
		padding: 0px 0px 6px 0px;
		color: <actinic:variable name="Palette2" />;
		}

I changed the 'color' reference to 'Palette3' and saved the file.

The changed the colour of my product names to my Palette3 colour. It works in preview and online.

[pinbrook]

I've got this to work now, I had to reregister the design, SW allowed me to re register with the same name.

So I'm a happy bunny --- til the next time!

Still need to work on the colouriser ! Stand by Chris