[foundation]

Which template or file allows you to add images to the homepage on the left and right side of the cart? I basically need to add some images in the background that are on the sides of the cart.

*** See the attachment, I need to add images where the red arrows are ***


Thanks
Roger

Attached Thumbnails

• 

[foundation]

Any ideas on this?

[Kathiew]

Are you meaning you want to change the tiling background in that area?

[foundation]

Yes,

I would basically like to add a background behind the center page so I can put a large image on the left and right

[Triplets]

Create a full image incorporating the left and right subimages. Then add it using:

body {
background: url('Purple.jpg') no-repeat center center fixed;
-moz-background-size: cover;
-webkit-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-color: #FFFFFF;
}

Note all the cover stuff is to stretch the image to full screen no matter the monitor size.

Leave around 980 to 1000 pixels for the center area.

I didn't add left and right images like you ask, but I have a full background image at http://cscart.tanningsalonlotion.com/

[Psycho]

Triplets, on 27 August 2012 - 06:26 PM, said:

Create a full image incorporating the left and right subimages. Then add it using:

body {
background: url('Purple.jpg') no-repeat center center fixed;
-moz-background-size: cover;
-webkit-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-color: #FFFFFF;
}

Note all the cover stuff is to stretch the image to full screen no matter the monitor size.

Leave around 980 to 1000 pixels for the center area.

I didn't add left and right images like you ask, but I have a full background image at http://cscart.tanningsalonlotion.com/

Hi, I saw your website and this is exactly what I want to do, but in the code you mentioned I don't get where did you place the image? The image name is Purple.jpg, correct? But it doesn't say the directory in the code example you gave! Is it in the root? or in skins? or what? and why isn't the directory written in the code mentioned above?!

Thanks

[Triplets]

Purple.jpg is just an example. Place the file wherever you want on your server and edit the CSS accordingly.

[Psycho]

Triplets, on 28 August 2012 - 12:36 AM, said:

Purple.jpg is just an example. Place the file wherever you want on your server and edit the CSS accordingly.

Thank you for the prompt reply. I'm sorry, but I tried that and it didn't work. I also tried clearing the cache but still nothing! I'm not a css professional but I copied and pasted exactly what you wrote and replaced the file part only. Here is the code I wrote:

body {
background: url('images/example.png') no-repeat center center fixed;
-moz-background-size: cover;
-webkit-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-color: #FFFFFF;
}


I made that change in style.css file in skins. So any idea why it didn't work?!

Thanks

[Triplets]

Try using an absolute path for the URL and not a relative path

[Psycho]

Triplets, on 28 August 2012 - 02:51 PM, said:

Try using an absolute path for the URL and not a relative path

As stupid as this might sound, but can you give me an example of what you're saying

I'm completely new to all of this and I don't even know what I'm doing, I'm just copying and pasting

[Triplets]

Images should be relative to the css file location.

you can always try an absolute path like http://www.whatever....stores/1/images

[Psycho]

Triplets, on 28 August 2012 - 03:44 PM, said:

Images should be relative to the css file location.

you can always try an absolute path like http://www.whatever....stores/1/images

Thanks again. I saw where the problem is. I didn't have to change the path to absolute or anything, I just never noticed that it did change because it didn't change the whole thing like your website. It just changed the small part at the butom. I attached the screenshot to show you what I mean. If it's not too much to ask, can you write me code to remove that button part at all and change the central image with mine?

I'd really appreciate it.

Attached Thumbnails

• 

[Triplets]

Use your web browser's development tools to look at the style sheet to see where the graphic is coming from. In Firefox use Firebug in Chrome right click and select Inspect Element. Click on the graphic, it will show you exactly where in the css the image is loaded from and all its parameters. You can even change the css live in the browser to play with the appearance before actually editing the real style sheet.

Learning how to use the browsers development tools is essential to modifying cs-cart.

David

[Psycho]

Triplets, on 28 August 2012 - 10:28 PM, said:

Use your web browser's development tools to look at the style sheet to see where the graphic is coming from. In Firefox use Firebug in Chrome right click and select Inspect Element. Click on the graphic, it will show you exactly where in the css the image is loaded from and all its parameters. You can even change the css live in the browser to play with the appearance before actually editing the real style sheet.

Learning how to use the browsers development tools is essential to modifying cs-cart.

David

Thank David, you were absolutely right. I did and I started changing things. I'm still not perfect at it so I will be seeking your help sometimes if you don't mind. One of the issues I'm already facing is how to make the background fill the entire background like your website, I'm currently changing the background in each part of the 3 parts (top, central, and footer), but I want it one part only like yours. Full background image!

[Triplets]

Here are my body, header, main and footer css styles for that site . I have these in customer/addons/my_changes/styles.css

body {
background: url('Purple.jpg') no-repeat center center fixed;
-moz-background-size: cover;
-webkit-background-size: cover;
-o-background-size: cover;
background-size: cover;
width: 980px;
margin:auto;
background-color: #530638;
}
.header  {
width:980px;
background: url('purpl028.jpg');
box-shadow: 0 0 45px rgba(0, 0, 0, 0.3);
margin: 5px 0;
		-webkit-border-radius: 8px;
		-moz-border-radius: 8px;
		border-radius: 8px;
border-color: #530638;
border-style: solid;
border-width: 3px;
}
.main  {
width:980px;
background:#FFFFFF;
background: url('purpl028.jpg');
box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
margin: 5px 0;
		-webkit-border-radius: 8px;
		-moz-border-radius: 8px;
		border-radius: 8px;
min-height: 400px;
border-color: #530638;
border-style: solid;
border-width: 3px;
}
.footer {
width:980px;
background:#000000;
margin: 5px 0px;
-webkit-border-radius: 8px;
		-moz-border-radius: 8px;
		border-radius: 8px;	  
padding-top: 15px;
border-color: #530638;
border-style: solid;
border-width: 3px;

[foundation]

GREAT info guys, I finally did it! I also had to comment out these two lines because they were overriding my image. Works great now. Exactly what i needed

/.main {
/ background: #fff url(images/central_bg.png) top repeat-x;



Final Code in styles.css

body {
background: url(images/background.png) no-repeat center center fixed;
-moz-background-size: cover;
-webkit-background-size: cover;
-o-background-size: cover;
background-size: cover;
}