Page 1 of 1
Template design advice for a Comic Book store.
Posted: Fri May 04, 2012 8:29 pm
by matte2k
Im creating a cart for a friend who's running a comic book store.
First the idea was to use the default look of the default template. But the logo doesn't fit the white background very well. Looks a bit tacky in my eyes.
I think the logo works very well with the blue background. Thats probably a must! But after that I'm pretty much lost.
I want it to be clean. Not too many colors and hard to read the text. Many comic book stores is white text on a black background and a lot of strange colors. I want it to look a little bit more classy (?) and pricey (?) than that. I don't won't the look that its hardcoded i html in a basement somewhere
Please take a look and come with advices on how to improve it!
Thanks!
http://ebutik.seriersant.se
Logga liten.png (9.35 KiB) Viewed 4211 times
Re: Template design advice for a Comic Book store.
Posted: Tue May 08, 2012 7:25 pm
by matte2k
No design tips?
Or is this posted in wrong section?
Re: Template design advice for a Comic Book store.
Posted: Thu May 10, 2012 5:14 am
by rincerofwinds
Ok,
For a start, I would say there is just way to much blue of the same colour and, personally, i dont think the red/orange title bars on the modules goes with the blue. How you get around there being too much blue is up to you, but I would try removing it from the main container so the modules and product information are in white or A.N.Other colour or reverse it so the container is blue and the rest is another colour.
If you keep the blue in the main container, then you need to change the colour of the buy button as they disappear in the list view - you woul also need to change the colour of the description in the list view as its very hard to read
You need to change the hover colour on the menu - at the moment it just turns to a black rectangle and you cnat read anything. I would also suggest changing the transparency/colour of the background for the hover drop-down.
Thats what I would try anyway at least to start with, but what you do is your choice.
Hope it helps
Ian
Re: Template design advice for a Comic Book store.
Posted: Tue Sep 04, 2012 2:19 am
by matte2k
Now I've made som css changes.. But there is one text color I can't change.
Its the black text in the big description box like on this page:
http://ebutik.seriersant.se/prins-valia ... am-riddare
Re: Template design advice for a Comic Book store.
Posted: Tue Sep 04, 2012 2:54 am
by pprmkr
To much blue of the same color.
Why not a gradient in the header
An open book as background in the header with opacity 10 - 15%
The content background very light grey or white
An orange background for the menu as only accent
For example:
bookstore.jpg (248.8 KiB) Viewed 3964 times
Re: Template design advice for a Comic Book store.
Posted: Tue Sep 04, 2012 4:41 am
by matte2k
That was pretty cool... with the opacity pic behind the logo. How did you do that? And also the gradient in the header?
I've made some changes in the layout now... feels a bit cleaner now... but maybe boring instead?
Re: Template design advice for a Comic Book store.
Posted: Tue Sep 04, 2012 1:13 pm
by pprmkr
Wipe out the blue in the logo
Add extra layers
Find a book and paste into a layer, opacity 15%
Make a gradient blue - darker or lighter blue and paste into layer
Play with brightness and contrast
Save the layers as .png:
The gradient - layer = body_bg repeat-x
The book = header_wrapper_bg top left no-repeat
The logo as image for store and style top: 20px, left: 0px;
Re: Template design advice for a Comic Book store.
Posted: Sun Sep 09, 2012 3:52 am
by matte2k
should i saved the layers at 3 different .png images?
were should they go? and where do i point to them?
Re: Template design advice for a Comic Book store.
Posted: Sun Sep 09, 2012 3:11 pm
by pprmkr
Save the layers as .png:
The gradient - layer = body_bg repeat-x
The book = header_wrapper_bg top left no-repeat
The logo as image for store and style top: 20px, left: 0px;
Yes, these are 3 images.
Point to the gradient and book in the stylesheet
gradient - layer :
Code: Select all
body {
background: #fafafa url('../image/gradient.png') repeat-x;
}
book:
Create a <div id="page-wrapper"> starting after <body> in header.tpl and ending before </body> in footer.tpl
Then in the stylesheet:
Code: Select all
#page-wrapper {
width: 100%;
background: url('../image/book.png') top left no-repeat;
}
The logo must be in /image/data and selected in System - Setting - Store - Image
In the stylesheet:
Code: Select all
#header #logo {
position: absolute;
top: 20px;
left: 0px;
}
Re: Template design advice for a Comic Book store.
Posted: Mon Sep 10, 2012 2:26 am
by matte2k
Code: Select all
body {
background: #fafafa url('../image/loggor/gradient.png') repeat-x;
background-color: #FFFFFF;
color: #000000;
font-family: Arial, Helvetica, sans-serif;
margin: 0px;
padding: 0px;
}
Is this correct?
Isn't it easier to just create a .png with all layers together and use as logo?
Re: Template design advice for a Comic Book store.
Posted: Mon Sep 10, 2012 3:40 am
by pprmkr
Did you test it?
First setting background color and image and then changing background-color?
Remove background-color: #FFFFFF;
Did you create the folder catalog/view/theme/YOUR_THEME/image/loggor ?
Is there the image gradient.png ?
Yes, then it works.
To create the effect I showed you, NO, it's not easier to create one image.
Re: Template design advice for a Comic Book store.
Posted: Mon Sep 10, 2012 3:48 am
by matte2k
pprmkr wrote:Did you test it?
First setting background color and image and then changing background-color?
Remove background-color: #FFFFFF;
Did you create the folder catalog/view/theme/YOUR_THEME/image/loggor ?
Is there the image gradient.png ?
Yes, then it works.
To create the effect I showed you, NO, it's not easier to create one image.
I mixed up the folders.. thought it should go in root/image
Now i got the gradient to show up but not the gradient...
look here:
http://ebutik.seriersant.se
Re: Template design advice for a Comic Book store.
Posted: Mon Sep 10, 2012 3:56 am
by pprmkr
Sorry to inform you, but catalog/view/theme/default/image/data/loggor/gradient.png does not exist!
Re: Template design advice for a Comic Book store.
Posted: Mon Sep 10, 2012 3:59 am
by matte2k
pprmkr wrote:Sorry to inform you, but catalog/view/theme/default/image/data/loggor/gradient.png does not exist!
se the answer above.. I edited it..
now the images is placed in view/theme/default/image/
and I've changed the path to the above in the stylesheet.
please look at
http://ebutik.seriersant.se
Re: Template design advice for a Comic Book store.
Posted: Mon Sep 10, 2012 4:05 am
by pprmkr
OK.
Now remove background color and border from header:
Code: Select all
#header {
height: 190px;
margin-bottom: 15px;
padding-bottom: 4px;
position: relative;
z-index: 99;
background: #0A71B4;
border-bottom: 1px solid #0A71B4;
-webkit-border-radius: 5px 5px 5px 5px;
-moz-border-radius: 5px 5px 5px 5px;
-khtml-border-radius: 5px 5px 5px 5px;
border-radius: 5px 5px 5px 5px;
padding: 0px 5px;
}
Change to:
Code: Select all
#header {
height: 190px;
margin-bottom: 15px;
padding-bottom: 4px;
position: relative;
z-index: 99;
padding: 0px 5px;
}
Re: Template design advice for a Comic Book store.
Posted: Mon Sep 10, 2012 4:13 am
by pprmkr
And then a nice background for page-wrapper
book.png (81.59 KiB) Viewed 3897 times
Save as catalog/view/theme/default/image/opacity.png
You already have it in the stylesheet, but with error:
Code: Select all
#powered {
margin-top: 5px;
text-align: right;
clear: both;
#page-wrapper {
width: 980px;
background: url('../image/opacity.png') top left no-repeat;
}
}
Change into:
Code: Select all
#powered {
margin-top: 5px;
text-align: right;
clear: both;
}
#page-wrapper {
width: 100%;
background: url('../image/opacity.png') top left no-repeat;
}
Re: Template design advice for a Comic Book store.
Posted: Mon Sep 10, 2012 4:15 am
by matte2k
but i want the header to look exactly like it does now with gradient and opacity... like this picture but with border radius.
Topplogga.png (198.24 KiB) Viewed 3897 times
edit:
like now:
http://ebutik.seriersant.se/index.php?route=common/home
but with border radius
sorry for the mixups
Re: Template design advice for a Comic Book store.
Posted: Mon Sep 10, 2012 4:35 am
by pprmkr
Then restore the header style:
Code: Select all
#header {
height: 190px;
margin-bottom: 15px;
padding-bottom: 4px;
position: relative;
z-index: 99;
background: #0A71B4;
border-bottom: 1px solid #0A71B4;
-webkit-border-radius: 5px 5px 5px 5px;
-moz-border-radius: 5px 5px 5px 5px;
-khtml-border-radius: 5px 5px 5px 5px;
border-radius: 5px 5px 5px 5px;
padding: 0px 5px;
}
After background: #0A71B4 add url(../image/gradient.png) no-repeat;
As logo use the one without the blue background.
Re: Template design advice for a Comic Book store.
Posted: Mon Sep 10, 2012 5:37 am
by matte2k
Cool.. thanks for everything
