Template design advice for a Comic Book store.

Quote

Post by matte2k » Fri May 04, 2012 8:29 pm

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

Logga liten.png (9.35 KiB) Viewed 4149 times

matte2k
Active Member
Posts
175
Joined
Thu Mar 01, 2012 7:07 pm
Top

Re: Template design advice for a Comic Book store.

Quote

Post by matte2k » Tue May 08, 2012 7:25 pm

No design tips?
Or is this posted in wrong section?
matte2k
Active Member
Posts
175
Joined
Thu Mar 01, 2012 7:07 pm
Top

Re: Template design advice for a Comic Book store.

Quote

Post by rincerofwinds » Thu May 10, 2012 5:14 am

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
rincerofwinds
New member
Posts
87
Joined
Fri Oct 10, 2008 1:45 am
Top

Re: Template design advice for a Comic Book store.

Quote

Post by matte2k » Tue Sep 04, 2012 2:19 am

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
matte2k
Active Member
Posts
175
Joined
Thu Mar 01, 2012 7:07 pm
Top

Re: Template design advice for a Comic Book store.

Quote

Post by pprmkr » Tue Sep 04, 2012 2:54 am

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

bookstore.jpg (248.8 KiB) Viewed 3902 times

User avatar
pprmkr
Active Member
Posts
1701
Joined
Sat Jan 08, 2011 11:05 pm
Location - Netherlands
Top

Re: Template design advice for a Comic Book store.

Quote

Post by matte2k » Tue Sep 04, 2012 4:41 am

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?
matte2k
Active Member
Posts
175
Joined
Thu Mar 01, 2012 7:07 pm
Top

Re: Template design advice for a Comic Book store.

Quote

Post by pprmkr » Tue Sep 04, 2012 1:13 pm

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;
User avatar
pprmkr
Active Member
Posts
1701
Joined
Sat Jan 08, 2011 11:05 pm
Location - Netherlands
Top

Re: Template design advice for a Comic Book store.

Quote

Post by matte2k » Sun Sep 09, 2012 3:52 am

should i saved the layers at 3 different .png images?
were should they go? and where do i point to them?
matte2k
Active Member
Posts
175
Joined
Thu Mar 01, 2012 7:07 pm
Top

Re: Template design advice for a Comic Book store.

Quote

Post by pprmkr » Sun Sep 09, 2012 3:11 pm

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;
}
User avatar
pprmkr
Active Member
Posts
1701
Joined
Sat Jan 08, 2011 11:05 pm
Location - Netherlands
Top

Re: Template design advice for a Comic Book store.

Quote

Post by matte2k » Mon Sep 10, 2012 2:26 am

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?
matte2k
Active Member
Posts
175
Joined
Thu Mar 01, 2012 7:07 pm
Top

Re: Template design advice for a Comic Book store.

Quote

Post by pprmkr » Mon Sep 10, 2012 3:40 am

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.
User avatar
pprmkr
Active Member
Posts
1701
Joined
Sat Jan 08, 2011 11:05 pm
Location - Netherlands
Top

Re: Template design advice for a Comic Book store.

Quote

Post by matte2k » Mon Sep 10, 2012 3:48 am

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
Last edited by matte2k on Mon Sep 10, 2012 3:57 am, edited 1 time in total.
matte2k
Active Member
Posts
175
Joined
Thu Mar 01, 2012 7:07 pm
Top

Re: Template design advice for a Comic Book store.

Quote

Post by pprmkr » Mon Sep 10, 2012 3:56 am

Sorry to inform you, but catalog/view/theme/default/image/data/loggor/gradient.png does not exist!
User avatar
pprmkr
Active Member
Posts
1701
Joined
Sat Jan 08, 2011 11:05 pm
Location - Netherlands
Top

Re: Template design advice for a Comic Book store.

Quote

Post by matte2k » Mon Sep 10, 2012 3:59 am

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
matte2k
Active Member
Posts
175
Joined
Thu Mar 01, 2012 7:07 pm
Top

Re: Template design advice for a Comic Book store.

Quote

Post by pprmkr » Mon Sep 10, 2012 4:05 am

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;
}
User avatar
pprmkr
Active Member
Posts
1701
Joined
Sat Jan 08, 2011 11:05 pm
Location - Netherlands
Top

Re: Template design advice for a Comic Book store.

Quote

Post by pprmkr » Mon Sep 10, 2012 4:13 am

And then a nice background for page-wrapper
book.png

book.png (81.59 KiB) Viewed 3835 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;
}
User avatar
pprmkr
Active Member
Posts
1701
Joined
Sat Jan 08, 2011 11:05 pm
Location - Netherlands
Top

Re: Template design advice for a Comic Book store.

Quote

Post by matte2k » Mon Sep 10, 2012 4:15 am

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

Topplogga.png (198.24 KiB) Viewed 3835 times


edit:
like now: http://ebutik.seriersant.se/index.php?route=common/home
but with border radius

sorry for the mixups
matte2k
Active Member
Posts
175
Joined
Thu Mar 01, 2012 7:07 pm
Top

Re: Template design advice for a Comic Book store.

Quote

Post by pprmkr » Mon Sep 10, 2012 4:35 am

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.
User avatar
pprmkr
Active Member
Posts
1701
Joined
Sat Jan 08, 2011 11:05 pm
Location - Netherlands
Top

Re: Template design advice for a Comic Book store.

Quote

Post by matte2k » Mon Sep 10, 2012 5:37 am

Cool.. thanks for everything :)
matte2k
Active Member
Posts
175
Joined
Thu Mar 01, 2012 7:07 pm
Top
Post Reply
Return to “Template Support”
Who is online

Users browsing this forum: No registered users and 12 guests