First site attempt

[Quantum]

Lee

Too far into smart theme to change now and will be looking at navigation next.
P

I thought that with my site until I finally bit the bullet and went through the process of a complete rebuild of the design with Lee.

Daily hits are 3 -5 times up on before and rankings are doing well whereas before we were not ranking at all for some products.

Again I liked the Smart Theme and the new design incorporates a similar feel to it.
http://www.quantumelectronics.co.uk

[pinbrook]

when i looked at the site i wanted to know if the prices were US $ or CAN $ it doesn't make it clear - its a canadian site with a com TLD. maybe you could clarify this somewhere.

What i did like though, was this on the front page "We sell premium quality Merino Wool base layer and outdoor travel clothing."

[pgimson]

when i looked at the site i wanted to know if the prices were US $ or CAN $ it doesn't make it clear - its a canadian site with a com TLD. maybe you could clarify this somewhere.

I have Can $ selected in the business settings and use CAD for email. However, the product prices display $ !! I need to change the symbol for CAD$ from "$" to "CAD $" which must be a global setting. Can't find it anywhere. Help would be appreciated

Paul

P.S. thanks for the comment about the home page text

[pgimson]

Fairyglass & Quantum

Thanks for the Smart theme support. I looked at your sites, like them all.

I want to stick with the theme and will keep tinkering with the layout as I gain HTML nowledge. These forums are invaluable for advice.

cheers
Paul

[pgimson]

I have Can $ selected in the business settings and use CAD for email. However, the product prices display $ !! I need to change the symbol for CAD$ from "$" to "CAD $" which must be a global setting. Can't find it anywhere. Help would be appreciated

Figured this one out!!!

Went into access file and changed the currency table. First time I have ventured into that arena. Now have currency labelled as CAD $ not $.

[pgimson]

You can also have the header in 3 parts, left and right static and central area expanding accordingly.

Lee

I throw myself at you mercy and ask for insight on this. So far my attempts are

1. Created 2 new variables by copying BrochureLogoImage and CompanyLogoImage, so now I have 3 for each.

The idea being that I will have 3 seperate parts for the header and will be able to select 3 files using settings/site/options general tab

Worked fine I can easily select files for all six variables.

2. Moved onto the Design tab and started looking at layouts.

From now on I will refer only to CompanyLogo as I suspect the code changes to BrochureLogo are identical.

I select the Smart Header Area layout. Within that there is the Standard Company Logo Image layout. This controls the header variables.

I have tried copying the above code line, but when I make a variable change to my new variable it changes then original too.

3. So I moved back to the Design/Library/Layout

In Company Logo Image I copied Standard Company Logo Image twice with suffixes of Middle and Right. Then in each of these I changed the variables so that they were as created in 1. above.

I am sure I am on the right track. I just cannot make the final input to work so that I have three unique areas on the header.

I have copied and pasted parts of the Smart Area Layout and finished with 3 Standard Company Logo Image layouts in the tree and three identical pictures across the header.

Yet I cannot figure out how to make 3 unique layouts without impacting all 3 through name or variable changes.

I think I need to finish with:

Smart Header Area
- Standard Company Logo Image
- Standard Company Logo Image Middle
- Standard Company Logo Image Right

Then I can edit each so that the variable is the one that I defined in 1. to call in unique picture files for the header.

Once I get all that to work I want to do what Lee suggested and have a expanding Centre logo and static left & right logo's.

How close am I to getting 3 logo's?

Paul

Paul

[leehack]

You are overcomplicating it a little, there is no need for extra variables, you can retain just the facility to define a logo in actinic. As the other areas are static, you can just style those directly into the design. Take example1 attached below, that could be a dummy logo you created.

To have that as an expanding logo, you could slice it up into 3 parts - a, b & c (as attached).

Think of your logo area as one big letterbox, but split into 3 equal parts (for ease of visual imagination) The actual split on the sizes is irrelevant as long as the static parts are big enough to show the graphics on them.

So you have 3 boxes all next to each other on the same line. Box a could be the logo, Box c would be the image used on the right hand side and then box b would be the area that expanded to suit the screen size. You might be looking at image b and thinking why is it so small, the answer to that is that you will have that defined as a background image for that area, so however large or small the area is, the background always repeats to fill that space, so we save it as a small image and just repeat it instead. 20px wide is the recommended width for this.

If you look at example2 you can see a pretend split up of the area, the left and right hand sides are the static images (a & c from below), the yellow area although it is 200 wide on the example image for illustration purposes, the width of that area does not matter as you set in the design to use a repeating background for that area, however large or small it is.

Rough code would be as follows, you will need to apply this to your situation.

<div id="headerArea">
<div id="logo">company logo goes here</div>
<div id="phone">phone number goes here</div>
</div>

Image a would go in 'logo' area
Image b would be a repeating background on the 'headerArea' area
Image c would be an image in the 'phone' area

You will of course need to add styles into your CSS for the various areas, logo area would need to float left, whereas phone needs to float right. There are lots of ways of doing this, the above is one of many ways, just to give you an idea of the concept.

The best way I got my head round this was to think that you were at a theatre, the curtains were closed and you were waiting for them to open. So you have a left and a right curtain and they part in the middle when being opened. Imagine when they started to be opened if behind them was an identical curtain, they would appear (albeit roughly) to not be opening, however they were it was just the background curtain showing through.

In the same vain imagine image b is the curtain behind and image a is the left curtain and image c is the right curtain. Image a will always be far left and image b will always be far right. If any screen is wider that the total width of image a + image c, then image b will always show through and make it look seamless, whilst also providing a 'fluid' area that expands and contracts to all screen sizes.

[pgimson]

Rough code would be as follows, you will need to apply this to your situation.

<div id="headerArea">
<div id="logo">company logo goes here</div>
<div id="phone">phone number goes here</div>
</div>

Image a would go in 'logo' area
Image b would be a repeating background on the 'headerArea' area
Image c would be an image in the 'phone' area

Thanks Lee, very helpful. I have briefly looked into your suggestion and will spend more time on it over the weekend. One quick question. Where exactly would I be looking to post this code?

cheers