Page 1 of 1
Header and module corner help, please
Posted: Wed Jun 03, 2009 5:57 am
by matthew_k
First time trying opencart, and I'm definitely liking it, thanks so much.
I'm seeing what I can do to tweak the stock template and have run into a couple problems. For the background, I am using a gradient that fades from white to black, and I have the background color set to black, so that once the gradient reaches black the rest of the page will be as well. The problem is, I want the gradient to start after the header, and I want the header background to be white, so there is a buffer of white, then the gradient fade to black. I can set the background of the header to white, but the header is in the container, so it only goes out to the 960px, so the black background is showing through in the corners. Do you think it would be possible to accomplish what I'm after?
Also, as you can see the corners on the modules are not showing the background. It is fine on the center box, but I can't seem to nail down what the difference is, as to why it won't work on the modules. Any help would be greatly appreciated.
Here is the site, for reference:
http://ccsa.knerrdesigns.com/cart/
Thanks again.
Matthew
Re: Header and module corner help, please
Posted: Wed Jun 03, 2009 8:46 am
by Calimo
The header-Backgrounds of the boxes dosnt have transparent edges ...
you schould make them transparent (photoshop?!)
Or u try the images in the Attachment...
put them in this Folder: "
http://ccsa.knerrdesigns.com/cart/catal ... ult/image/"
Background-Problem: If i have understood the Problem right, you should change the background-color of the Body to white (#ffffff).
Code: Select all
body (line 9)
{
background-color: #000000; <-------- [b]this should be white (#ffffff)[/b]
background-image: url(../image/body-background_w-b.png);
background-repeat: repeat-x;
background-attachment: scroll;
background-position: 0px 97px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
text-align: center;
}
Re: Header and module corner help, please
Posted: Wed Jun 03, 2009 10:30 am
by matthew_k
Thanks so much for the reply, and for the attachments. I don't know if I ever would have thought of that, especially since the other image was working correctly, I thought it must be in the code somewhere.
Regarding the background, changing it to white does give the effect I want at the top of the page, but on the bottom of the page I want it to be black, so that once the background image fades to black the rest of the page will be black as well. I changed the background to white so you can see how it cuts off after the background image (if you haven't seen it already with Firebug, or something). Anyway, it seems I need the header to be 100% and have its background be white, but since the header is in the container, it can't go past 960px. If it could be moved somehow outside of the container, that might work, but I have no idea how to do that, and it may not be worth it if it's too complicated. Doing that would also screw up the placement of the elements in the header.
Reference:
http://ccsa.knerrdesigns.com/cart/
Thanks for any input anyone may have, and thanks again, Calimo for your help.
Matthew
Re: Header and module corner help, please
Posted: Wed Jun 03, 2009 2:54 pm
by Calimo
its not a bug ...
You dont want to have the withe bar in the bottom of the Site ??
If you want it like this ??
http://shop.intercede.it/openstore/
then Insert this to body (css):
background: #000 url(../image/bg_grad.png) repeat-x;
and put the attachment in the image-folder of your style!
Re: Header and module corner help, please
Posted: Wed Jun 03, 2009 7:34 pm
by Calimo
And delete the "background-position: 0px 97px;"
Re: Header and module corner help, please
Posted: Wed Jun 03, 2009 9:38 pm
by matthew_k
Thanks again. So simple, but again, I was on a train going the wrong direction! I feel dumb though. Thanks for the fresh eyes.
I didn't mean to suggest this was a bug; Firebug (
http://www.getfirebug.com/) is a Firefox plugin I use to look at and test different css changes without editing the actual css file, and thought maybe you were using a similar utility.
Thanks,
Matthew
Re: Header and module corner help, please
Posted: Thu Jun 04, 2009 4:28 am
by Calimo
i use CSS Edit ...
looks nice with the blue background .... better then the black one ...
Re: Header and module corner help, please
Posted: Thu Jun 04, 2009 5:31 am
by phpuk
I agree.
It looks nice with the blue background.