Post by maximus20895 » Fri Aug 15, 2008 3:00 am

Hello,

I just joined this forum and I am really new to open cart. How would you change the background to an image. I kinda now bow, but I just want the background to display on the sides not where all the products are.

My site is autodetailhut.com

I want it to look similar to http://www.toplamp.com.my/mystore/

Thanks,

Max

Newbie

Posts

Joined
Fri Aug 15, 2008 2:57 am

Post by Qphoria » Fri Aug 15, 2008 3:35 am

in your css body tag

add a background: image or color

google for css body background

Image


User avatar
Administrator

Posts

Joined
Tue Jul 22, 2008 3:02 am

Post by kellen » Fri Aug 15, 2008 4:38 am

Here is a detailed description of how to add a background image:

In your template folder, there is a default css file.
/catalog/template//css/default.css
Open it and edit background: url('..//
and then modify the CSS tags to acquire the behavior that you want.
If you dont know these tags, they can be found here
http://www.w3schools.com/Css/css_background.asp
The default code for the default template can be found below.

Code: Select all

/* body */
body { 
	margin: 0px;
	padding: 0px;
	behavior: url('catalog/javascript/png/iepngfix.htc');	
	background: url('../image/background.png') top repeat-x;
	background-color: #F4CE53;
}
Hope this helps!

Newbie

Posts

Joined
Wed Aug 13, 2008 8:28 am

Post by maximus20895 » Fri Aug 15, 2008 6:47 am

I can add a background image just fine. The only problem is that it is the the main body where all the products are.

Look at the example site and look where the grey is compared to where the white is. How do I make my background look like that. Meaning how do I make the grey to cover where the white is.

Thanks

Newbie

Posts

Joined
Fri Aug 15, 2008 2:57 am

Post by kellen » Fri Aug 15, 2008 7:20 am

Sorry, I'm not quite following you.
Are you talking about the shaddows on the sides of the main section?

Newbie

Posts

Joined
Wed Aug 13, 2008 8:28 am

Post by maximus20895 » Fri Aug 15, 2008 7:39 am

yes, look at my site now. Autodetailhut.com

See how the grey is over the top tabs on the right and on the left it looks like it is too short?

How to I fix it to be even w/ the headers footers.

Newbie

Posts

Joined
Fri Aug 15, 2008 2:57 am

Post by johny2k » Fri Aug 15, 2008 10:34 am

hi, here i show you my default.css:

body {
margin: 0px;
padding: 0px;
background: url('../image/background.png') top center repeat-y #e7e8e9;
}

Remember must remove (If not it will screw up ur website looks at IE):

behavior: url('catalog/javascript/png/iepngfix.htc');

& I found that your banner size too large, try to resize your banner width to - 576px.

Hope this will give you some help,  ;)

Regards,
John

New member

Posts

Joined
Tue Mar 04, 2008 4:35 pm

Post by maximus20895 » Fri Aug 15, 2008 11:08 am

So I remove this:


behavior: url('catalog/javascript/png/iepngfix.htc');

How do I resize my banner and what is my banner?

what does this do:

top center repeat-y

Newbie

Posts

Joined
Fri Aug 15, 2008 2:57 am

Post by johny2k » Fri Aug 15, 2008 3:08 pm

maximus20895 wrote: So I remove this:


behavior: url('catalog/javascript/png/iepngfix.htc');

How do I resize my banner and what is my banner?

what does this do:

top center repeat-y
looks like you have been solve the problem. :)

let me give you 1 more suggestion, just resize your background.png width bigger than 779px,  :D

top center - bring your background.png to the place of top then center

repeat-y = repeat your background.png with horizon.  ;)

New member

Posts

Joined
Tue Mar 04, 2008 4:35 pm

Post by fido-x » Wed Aug 20, 2008 4:27 pm

behavior: url('catalog/javascript/png/iepngfix.htc');
This line is a fix to allow IE6 to display "png" files.
repeat-y = repeat your background.png with horizon.
Using "repeat-y" will repeat the image vertically. If you want it repeated horizontally, use "repeat-x". Remember your x and y co-ordinates on a graph - x is the horizontal, y is the vertical - this is exactly the same.

Regards, Fido-X.

Image
Modules for OpenCart 2.3.0.2
Homepage Module [Free - since OpenCart 0.7.7]
Multistore Extensions
Store Manager Multi-Vendor/Multi-Store management tool

If you're not living on the edge ... you're taking up too much space!


User avatar
Expert Member

Posts

Joined
Sat Jun 28, 2008 1:09 am
Location - Tasmania, Australia

Post by Qphoria » Wed Aug 20, 2008 7:18 pm

Anyone notice the FF doesn't like the "behavior" property for css validation... at least FF3.0

Image


User avatar
Administrator

Posts

Joined
Tue Jul 22, 2008 3:02 am

Post by fido-x » Wed Aug 20, 2008 7:23 pm

Firefox may be the most popular browser in the world, but IE6 is STILL the most common!

Image
Modules for OpenCart 2.3.0.2
Homepage Module [Free - since OpenCart 0.7.7]
Multistore Extensions
Store Manager Multi-Vendor/Multi-Store management tool

If you're not living on the edge ... you're taking up too much space!


User avatar
Expert Member

Posts

Joined
Sat Jun 28, 2008 1:09 am
Location - Tasmania, Australia

Post by Qphoria » Wed Aug 20, 2008 8:05 pm

what's an ie6?  :-\  ;D
still there should probably be some conditional logic in place in the css

Image


User avatar
Administrator

Posts

Joined
Tue Jul 22, 2008 3:02 am

Post by bruce » Wed Aug 20, 2008 8:33 pm

have a look herefor actual statistics that show firefox as the most popular browser at 43% and the combination of ie6 and ie7 at 51%

Active Member

Posts

Joined
Wed Dec 12, 2007 2:26 pm

Post by fido-x » Wed Aug 20, 2008 8:52 pm

Usage statistics don't determine popularity - downloads do. After all, how many people downloaded IE6? The answer is 0. How "popular" does that make it?

Image
Modules for OpenCart 2.3.0.2
Homepage Module [Free - since OpenCart 0.7.7]
Multistore Extensions
Store Manager Multi-Vendor/Multi-Store management tool

If you're not living on the edge ... you're taking up too much space!


User avatar
Expert Member

Posts

Joined
Sat Jun 28, 2008 1:09 am
Location - Tasmania, Australia

Post by Qphoria » Wed Aug 20, 2008 9:48 pm

I think the more important stat in there too is the Javascript one. There are some spots in OC that should maybe have a backup non-js method or at the very least, a warning.

Image


User avatar
Administrator

Posts

Joined
Tue Jul 22, 2008 3:02 am
Who is online

Users browsing this forum: No registered users and 1 guest