Having come up with a design I think would work in Actinic Online (original article is here if you haven’t seen it) the next job was to get access to the design options in Actinic Online and start playing.
If you are doing a custom design, you can start in one of two places. Either you can start with a ‘SmartSkin’ or you can just pick a static ‘Site Design’.
It is quite good fun to play with Actinic Online’s SmartSkin editor ( go to ‘Site > Site Design > Modify’ then click the ‘Use a Smart Skins Design’ link). This bit of Actinic Online is intuitive and well presented (and therefore has clearly been written by different developers than the rest of the software…) You can use to change the colours and sizes of all the main page components I mentioned in the last article (header area, sidebar, footer) and also change the appearance of all the navigation menu items.
All that’s happening with the SmartSkins editor is Actinic Online is dynamically changing the CSS of the site based on whatever you select, so whatever you can do with SmartSkins, you can do by editing the CSS of a standard Site Design. And because I am a MASSIVE control freak, that’s what I decided to do.
CSS Site Designs
First thing I did was to select a theme that was close to my design idea – i.e. roughly the same colours. The one I went for had the catchy name of #40454. Once I selected that, I had to go to ‘Site > Site Design’ and click the ‘Create and Manage Custom Site Designs’ button. I could then click the ‘Edit Properties’ button and suddenly I had a big load of CSS to play with.
Because my eyes are bad enough already, the first job was I copied and pasted everything into a new file in Dreamweaver.
Then with Dreamweaver open in one window and a preview of the store open in another I got to work.
First job was easy – editing the body tag to stick in a background colour, default text colour and change the default font.To test it you just need to copy and paste everything back into Actinic Online and then refresh the preview.
Next I needed to stick my graphics in. To actually get my graphics online I went to ‘Gallery > Files’ in Actinic Online. You just click the ‘Add’ button to add them in, it’s quite easy.
Then I needed to figure out where to point to my images in the CSS file. Fortunately, the main container classes all have terribly sensible names:
.maincontainer – the wrapper that goes around the whole design
.headercontainer – the wrapper around the header
.bodycontainer – the wrapper around the sidebar and main content area
.footercontainer – the wrapper around the footer
My design has a stripey pattern that went down each side (see design here) so I set the width of ‘maincontainer’ to 1200 (the width of my whole design, including the stripes down each side) and set my stripey image as the background to the div. The tag ended up looking like this:
margin: 0 auto;
background: url(‘/Files/44633/stripes-background.gif’) repeat-y;
Note how when you reference a file you need to start the path with a ‘/’
Then I set the margins of headercontainer, bodycontainer and footercontainer each to:
margin: 0 110px;
Which then meant I had a 110px gap either side of the design so my stripes were visible.
Next, I changed the height of ‘headercontainer’ and placed my wavy line (and logo) as the background to the header:
margin: 0 110px;
It’s not rocket science, I was just playing around and trying things out.
Hopefully that’ll be enough to get you in the CSS, in the next article we will deal with the wonderful world of menus.