X-Cart forums

[bumperbyrnes]

Hey
I'm a newbie with v. little design knowledge and just need help with two changes more changes to my storefront look.

http://www.coolwestfoods.com.au/xcart

I want the Advanced Search link to be just to the right of the magnifying glass link
I want the blue shading that is immediately to the right of the Contact Us link to go accross the length of the page. ie. to be the same height and go through the Home, shopping cart and search box links.

Also, My contact Us link isn't working.. how do you set it up so that it emails you the info?

[gizmo]

Hi
Welcome, the first thing you really need to do, with my best intentions at hand is to remove your BMP format logo, it's over 200kb in size!!! (That's really heavy to say the least for just one logo) you need to optimise it for the web, using a good graphics programme, or an online image optimiser..

The two changes you require are very simple with some given Know how, can I ask where this skin is from, is it a paid skin, or has it been modified?

To receive e-mails, make sure you have filled > General Options > Company options

When there fill in the e-mail fields as per your company needs..

[MikeBrum]

If you haven't done so already:

Download FireBug (for Firefox)
Download Web Developer Toolbar (for Firefox)

Both of these will help immensely when editing your website.

If you haven't read up on CSS, then read up on CSS at http://www.w3schools.com.

For the Blue Background area, that is currently an image file located here:
http://www.coolwestfoods.com.au/xcart/skin1/images/vivid_dreams/head-right.jpg

Dimensions of this JPG are: 47x33

You'll need to open this file in Photoshop, then crop the file to a 1px wide x 33px heigh file. Make sure you crop it to whatever color you want in the background and that it is only 1px wide. You want the light blue, so make sure you crop the far left side of this existing JPG image. Now save this as a NEW FILE and name it whatever you feel (perhaps line2bg.jpg), using the FILE > SAVE-FOR-WEB feature in Photoshop. Also make sure you store this file inside the /vivid_dreams/ folder. Then upload. Next, you'll need to edit the corresponding DIV within the MAIN.CSS. Look for the following line of code in your MAIN.CSS file.


---------BEGIN EXISTING CODE----------


#header .line2 {
border:0 none;
color:#451300;
height:32px;
margin-top:245px;
position:relative;
width:100%;
}


---------END EXISTING CODE----------

Add this line of code:

background: url(images/vivid_dreams/line2bg.jpg) repeat-x;

[gizmo]

Also your product Image sizes are huge as well, I clicked on one product and the image displayed is over 300kb.

I hope you don't take my advise to heart but you really need to get your images optimized for web viewing IE (Smaller and best file size for viewing)

Here to help..

[gizmo]

The default usually for the background that you mention is something like this

skin1/main.css

#header .line2 {
background:url("images/abeez_added/head_linebg.gif") repeat-x scroll center top transparent;
border-color:#CDC6C6 -moz-use-text-color;
border-left:medium none;
border-right:medium none;
border-style:solid none;
border-width:1px medium;
color:#451300;
height:39px;
position:relative;
width:100%;


}

Highlighted in red should be your background image, and colour if needed.
At a guess I think someones done some edits already..

As to your search swapping around that's a little more complex but it can be done too...

[bumperbyrnes]

Well it was just the skin that came with x cart. If you have a look here it was the Vivid Dreams - Aquamarine skin
http://www.x-cart.com/news/free-skin-templates-for-online-stores.html
I don't really understand what happened. as you can see from the original skin, the blue shaded part is on the skin, but I did something wierd and it disappeared! so now I'm just trying to get it back

I'm guessing that the length, height and other dimensions etc. are still in my code somewhere, or maybe I've overwritten them?

Thanks for the info re image file size, I'm guessing thats bad for download times and stuff if the images are too big? Any suggestions for a good online image optimiser? Will get to that v. soon.

Now that I look at the skin again, I could probably just have the search box, mag glass and Advanced Search a little lower down and keep it in the dark blue box to the left. Anyone tell me how to move it down a little?

Re CSS changes. thanks so much for the link, i will have a good read of it for homework tonight. I have downloaded the Google bugger thing and I can sort of work out that it shows you the templates and highlights what parts of the page and how they are represented in code. That link will be a great help. Thanks.

[bumperbyrnes]

One other thing re the contact us button. I have got the correct email addresses in the company details section, they all have the same email address, but I'm not getting any of the emails. Anything else I might have neglected to do?

[Shamun]

Bumperbyrnes,

If you have some extra money, you may wish to look at http://marketplace.x-cart.com/skins-templates/aheadworks/ for some themes that may better suit you.

If not, you may wish to have someone do the changes from the start. I was able to produce this in just ~10 minutes with only changing some css and removing a table or two.

http://img687.imageshack.us/img687/3137/xcart1.jpg
http://img5.imageshack.us/img5/829/xcart2.jpg

[gizmo]

bumperbyrnes

I do feel for you.
Listen the changes you require to blend correctly with your site, so that it looks visually pleasing within all areas would take a developer maybe 2/3 hours allowing for any hiccups along the way.

I would suggest you maybe ask for this. (Would like to offer my time but am really busy)

As to online image optimiser there are so many.
http://tools.dynamicdrive.com/imageoptimizer/
http://www.imageoptimizer.net/Pages/Home.aspx

This link gives bout 10 and some good reading.
http://www.webdesignbooth.com/12-really-useful-image-optimization-tools-for-web-designers/

I use Adobe Photoshop always, so also here's some good reading about what you should achieve an have.

http://www.webdesignbooth.com/12-really-useful-image-optimization-tools-for-web-designers/

Good Luck

[bumperbyrnes]

Okay. hoping someone can help with this. I restored the file to the original skin and now the blue shaded line is back. (yay).. the reason it disappeared before I think is because I put this in
For backgorund you need to change the background to #fff in
#header .head-bg
when I changed it to white, it changed the whole lot including the blue shaded line.

So my question now is - how do I make the blue shading to the right of the logo, all white, without losing that blue shaded line?