The Crystal Wizard. Please review!

[Crystal Wizard]

HI

Looking for feedback on my site.

 

www.thecrystalwizard.co.uk/shop

 

I am in the process of acquiring Artists to showcase, and will be adding their products as I get them. Also, Crystals, Incense, DreamCatchers etc.

 

Looking for design critique, as well as any errors/problems!

 

Thanks in advance

The Crystal Wizard

Edited July 12, 2013 by Crystal Wizard (see edit history)

[PrestaHeroes USA]

real quick....lot's of work...these things are a labor of love.

 

the logo (firefox) overlays the menu bar

 

http://screencast.com/t/NmjQtbFqjYX

 

Honestly? I'd lose the background image, it contrasts with your white background images....you could try to border the site with the background i.e. left and right...the other issue with that background is when I click to another page, the site at first has white background then a couple seconds later the crystal background appears...made me dizzy (note: I am old so more old school )

 

nice going with the ccTLDof .uk, this will help your natural seo for the uk. If you want visitors outside of the UK, say German for example then you can obtain a .de ccTLD and use multishop to point to your existing shop.

 

I'd also suggest the top menu contain your category/sub-categories, this makes for easier navigation....if you configure that you may consider losing the left category navigation....

 

building a site takes lots of patience and I can see you know your products, and wish you all the best building your business.

[Crystal Wizard]

Thanks for the tips.

Yes, the logo is not quite right yet.

 

I think the background is a LARGE image, hence the delay in it loading - I may well remove it, as you advise. I have struggled to get the text to show in a colour that contrasts well*, so it will be easier to remove the background than re-colour the text!

Column background image? Not sure how to do this.

I've not finalised the categories yet, and there may be too many for a top-bar (unless I sub-categorise them). Still a work in progress.

 

Thanks again for comments.

 

*I have dabbled with CSS, but really, I'm still a novice!

[JANDSCLOTHINGCO]

I agree with El Patron about the background at it is definately hindering parts of the site. Mainly where there is wording that is hard to read due to it basically blending into it.

[vekia]

very bad background I cannot read any product title / description

 

just take a look:

 

 

in my opinion you should change it

[Crystal Wizard]

I have made the background a lot lighter. Do you think it helps?

 

I would like to incorporate the Amethyst design, and also have some kind of background. I find a plain white background to be stark/boring.

Is there a way I can change the colour of the Heading bars, from White Text on Black, to Black Text on Pink/Purple/Amethyst?

[vekia]

now it's much better, definitely

 

and answer to your question:

yes, you can change the colors of the bars

 

you're looking for somethig like this?

 

if so, please change the global.css located in your theme directory

 

change the value of background to: background: #9966CC; in:

.block .title_block, .block h4 {
padding: 6px 11px;
font-size: 12px;
color: #fff;
text-shadow: 0 1px 0 #000;
text-transform: uppercase;
background: #9966CC;
text-align: left;
font-weight: bold;
}

[Crystal Wizard]

Something very much like that! Thanks!

 

OK, now to do something about the logo, and I'll be a lot happier! Will it move up slightly, or do I need to shrink it? I could remove the "Mad Dwarf Production", but rather keep it if possible.

[vekia]

hello

 

i tried to modify the logo a bit, what you thing about something like this:

 

i can give it for you, for free of course

just let me know i will prepare a logo file (.png) for you

[Crystal Wizard]

ooh! Now that I like!

 

If you want to email it, I am at:

[email protected]

 

I'm off out for the rest of today, but will return with an updated site!

Thanks for all the help and advice, especially vekia!

[vekia]

i attached it here:

url: http://i.imgur.com/XmN5Ki7.png

 

its a png file, so in this case you have to change the image type in preferences > images tab in your back office. select second option:

 

and save changes. after that you will be able to upload .png files as logo

 

if you will upload it just let me know, i want to see how it looks in the production

[Crystal Wizard]

OK, new logo added, colour scheme tweaked.

I've got some new products in the pipeline, and I'm not sure what to do with the ImageSlider. Just place-holder pics in it for now.

[vekia]

you can also center the logo:

#header_logo {
position: absolute;
top: 5px;
z-index: 1;
}

 

i changed top:15px to top:5px;

 

effect:

[Crystal Wizard]

I think the site is looking OK now.

I'm really not sure about the image slider, might replace it with more Featured Products.

 

I know there are some images missing for some products - still working on the database and finding ways to automate adding products.

 

Any more advice or constructive criticism gladly received!

[tuk66]

The first impression? I don't like the background image. Page is not clear because of that. That is my opinion.

[Crystal Wizard]

Thanks for the feedback.

I could lighten the background a little more, if it is still unreadable.

[PhpMadman]

I think it's looks great.

But if people think its's not so readable, you could add a white background to the grid_9 class i think.

Or maybe even a transparent one background-color: rgba(255,255,255,0.5)

And you would then also need a IE fallback. See more here: http://css-tricks.com/rgba-browser-support/

[vekia]

I think that PhpMadman has got nice idea, here is the visualisation:

[PhpMadman]

And also, to keep the theme flow:

* Top bar changed to the purple color as well? Not sure about this.

* On product page. The yellow "More info" button / bar also changed to purple. This requiers change of image, or just a css change to remove the image and change background color.

That's what I did on my site.

Edited July 17, 2013 by PhpMadman (see edit history)

[Crystal Wizard]

Thanks for the input.

White Background Grid 9 - Looks good, but my CSS-fu is weak! How do i implement this?

Purple top-bar, "more info" - Yes. i agree that this would look better. Again, how?

 

PhpMadMan - where is your site? Mind if i take a look?

 

Sorry, i am still learning the CSS for the shop. I'm OK at editing small sections of code, once I know which part of the billion-line-long global.css I am meant to be looking for!

[vekia]

/shop/themes/philtheme/css/global.css

 

change the:

#page {
}

 

to:

 

#page {
background-color: rgba(255,255,255,0.8);
padding: 10px;
}

[PhpMadman]

Search global css for

.idTabs {
border-bottom: 8px solid #F7B900;
list-style-type: none;
margin-top: 20px;
}

change it to #9966CC

That will fix more info bar.

 

 

.idTabs .selected {
background: url("../img/bg_li_idTabs.png") repeat-x scroll 0 0 transparent;
color: #000000;
}

Here you have two options

Either use a image editor to change the color of shop/themes/philtheme/img/bg_li_idTabs.png

or remove the background: line and add this instead

background-color: #9966CC;

 

Topmenu bar:

/shop/modules/blocktopmenu/css/superfish-modified.css

change the color here

.sf-menu {
background: none repeat scroll 0 0 #383838;
margin: 10px 0;
padding: 0;
width: 980px;
}

And also this

.sf-menu li {
border-right: 1px solid #777777;
float: left;
position: relative;
}

This color should either be lighter or darker then the #9966CC, beacuse it's the | line after Home

 

Then there also is

.sf-shadow ul {

.sf-menu ul li:hover, .sf-menu ul li.sfHover, .sf-menu ul li a:focus, .sf-menu ul li a:hover, .sf-menu ul li a:active {

.sf-menu a:focus, .sf-menu a:hover, .sf-menu a:active {

.sf-menu li li li {

.sf-menu li li {

All these are related to the dropdown when hovering the Home links.

 

 

As for my site. Sure, you can have a look

http://www.nldistribution.se/

The goal was to make it simple, black and white with some dashes of blue.

My site contains both modified css and modified tpl's and at some parts, even modified core files.

[Crystal Wizard]

Thanks! I'll give these changes a go!

EDIT: Purple is GO!

 

have changed a Home bar and More Info. Not played with shadows/drop-downs etc. WIll leave that until I'm a little more confident. I don't think it looks too bad as is.

Edited July 18, 2013 by Crystal Wizard (see edit history)

[Crystal Wizard]

I've got another idea for improving the look of my site.

 

I'd like to swap over the "more info" and "other products in the same category" sections.

 

Should I ask/post pic here, or start a new thread?

[vekia]

i think that you should create a new thread

wondering why? i think that it will be really helpfull for other merchants too,

when you create new thread - then it will be more visible for others and googlers too

[mimpro]

so far so good.. i like it. but would you mind to add another color instead of those purple? Something like light yellow for the title blacks and menubar for example.. just my 2 cents

[vekia]

but then it will be not related to the amethyst crystals

[Crystal Wizard]

Indeed, I am wanting to stick with the Amethyst theme.

Although Crystals come in all colours!

 

I could add some other colours, but apart from the (black) bars, there isn't a lot to change.

[mimpro]

Oh I see.. sorry i didn't aware about the Amethyst is normally purple only.. but i'm glad i learn something new here. Nice job!

[Crystal Wizard]

HI Again!

I've been tinkering with my site, and think I'm finalised.

I think it looks good now, but I would say that!

 

Can anyone see anything that needs changing? Or improving?

 

Thanks.

[vekia]

maybe change the cart color- it looks totally different

[Crystal Wizard]

Well spotted! Thanks.

You wouldn't happen to know where the CSS for that is? (I'm gradually getting to grips with the global.css, but it takes a while ...)

[stottycabanas]

Definitely nothing wrong with a bit of purple!

 

However, you do have the default footer which says 'Free Shipping', but you charge shipping when an item is added to the cart. I don't know why they default it like that, I'm sure the majority of shops would charge for shipping.

[Crystal Wizard]

Thanks stottycabanas!

While I do have free shipping on a select few items, most are not! I had best remove that!

[vekia]

Well spotted! Thanks.

You wouldn't happen to know where the CSS for that is? (I'm gradually getting to grips with the global.css, but it takes a while ...)

 

 

here is the code:

#shopping_cart a {
height: 15px;
padding: 15px 27px 10px 43px;
background: url('img/icon/cart.gif') no-repeat 10px 9px #eee;
min-width: 130px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
display: block;
}

from file: /modules/blockuserinfo/blockuserinfo.css

 

+ background of the:

#header #cart_block {
z-index: 10;
display: none;
position: absolute;
right: 0;
top: 65px;
height: auto;
width: 200px;
-moz-border-bottom-right-radius: 3px;
-moz-border-bottom-left-radius: 3px;
-webkit-border-bottom-right-radius: 3px;
-webkit-border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px;
border-bottom-left-radius: 3px;
box-shadow: 0 1px 0 #C6C6C6;
background: #eee;
}

in the file: /modules/blockcart/blockcart.css

[Crystal Wizard]

OK, have turned my Cart purple!

Can't find where to alter the Footer Section that stottycabanas talks about.

[stottycabanas]

Look in your list of modules for the Customer Reassurance module. You can configure that or disable it altogether.

[Crystal Wizard]

Thanks! I knew it was there somewhere!