Design


Author Message
Topknotch

Posted: 9/9/2012
Quote message 

Hi all ,
I have been using artisteer 3 for quite a while now and have to say i love it!
However i want to create a site similar to this , i mainly love how the top left logo is shown over the flash video. Is there a way to do that in artisteer 3 ?
http://www.kitchenary.co.uk/
Many thanks in advance

 
richard

Posted: 9/9/2012
Quote message 

The floating logo is done using css thus: z-index: 99;
 
Topknotch

Posted: 9/9/2012
Quote message 

Quote richard:

The floating logo is done using css thus: z-index: 99;

So how would i do that in artisteer?
Sorry for sounding thick
:-@
 
richard

Posted: 9/9/2012
Quote message 

That site layout, which works very well, is going to be hard to produce in Artisteer without getting your hands dirty in some css edits afterwards. However, the overhanging logo can be done with a foreground photo in the header plus a -ve margin on the sheet so it sits above the lower header margin.
 
Topknotch

Posted: 9/10/2012
Quote message 

umm how do i do that ?
Sorry :-X
 
Topknotch

Posted: 9/10/2012
Quote message 

Ive managed to to put a pic in the foreground but its not properly promoted as in if if i change the menu bar , the bar shows above the forground image, also i want to put a video underneath the the foreground image but it wont let me place it in a position that allows me to.
Sorry and thanks for any help

 
Adrianne

Posted: 9/13/2012
Quote message 

I've been trying to get some CSS help with Artisteer as well...it's like it's a closely guarded secret. All you get are vague responses, but no step-by-step details.

I wish someone would put together a video tutorial.
 
richard

Posted: 9/14/2012
Quote message 

The web is full of css tutorials, documentation and examples. I'd recommend googling and trying some of them as they will be a good basis if you want to develop Artisteer themes beyond the limits imposed by the out of the box options.

Regarding the example website. I have tried to replicate the layout in both Artisteer v3 and v4 with limited success. v4 looks promising but to produce the full width white band for the header, the header needs to be set full width. When you do this you cannot use the image slider for some reason. Conversely, if you eschew the full width white band and go for the slider, you can't drop on a foreground image as it becomes a shape on the topmost slide only and needs to be added to each slide. Using a widget for the logo has its own issues to get it positioned.

I've had more success for this particular layout by not using Artisteer, which doesn't lend itself to the design very well, and used a 960 grid template design system. Horses for courses and, in this case, doing it in Artisteer is a hard slog.

You may be able to use a plugin to get widgets in the required areas or to edit the php/css and add some widget areas after finishing it in Aristeer.

 
Easy way

Posted: 9/14/2012
Quote message 

Create a custom html module. Assign it to position 'extra 1'. Then add this to your custom css.

.art-hmenu-extra1
{
position: relative;
margin-top: 160px;
margin-right: -175px;
display: block;
float: right;
width: auto;
height: 53px;
background-position: center;
}

modify margin-top and margin right until the module is positioned where you want it.
 
Easy way

Posted: 9/14/2012
Quote message 

forgot to say...Add your image to your custom module.
 
Easy way

Posted: 9/14/2012
Quote message 

This works with version 3...don't know about ver 4.
 
Topknotch

Posted: 9/18/2012
Quote message 

Cheers Easy Way , that works a treat ! it dosent over ride the menu but i can work round that .
Thanks again! :-)