Jump to content

  • You cannot start a new topic
  • You cannot reply to this topic

CS CART 3 - How to add images to the left & right of of the cart? Rate Topic   - - - - -

 
  • foundation
  • Junior Member
  • Members
  • Join Date: 19-May 08
  • 27 posts

Posted 28 May 2012 - 11:50 PM #1

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

  • demo.png


 
  • foundation
  • Junior Member
  • Members
  • Join Date: 19-May 08
  • 27 posts

Posted 25 August 2012 - 09:13 PM #2

Any ideas on this?

 
  • Kathiew
  • Junior Member
  • Members
  • Join Date: 18-Jan 11
  • 56 posts

Posted 26 August 2012 - 01:36 AM #3

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

 
  • foundation
  • Junior Member
  • Members
  • Join Date: 19-May 08
  • 27 posts

Posted 27 August 2012 - 05:22 PM #4

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
  • Senior Member
  • Members
  • Join Date: 23-Sep 08
  • 1179 posts

Posted 27 August 2012 - 06:26 PM #5

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
  • Member
  • Members
  • Join Date: 20-Aug 12
  • 39 posts

Posted 28 August 2012 - 12:32 AM #6

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
  • Senior Member
  • Members
  • Join Date: 23-Sep 08
  • 1179 posts

Posted 28 August 2012 - 12:36 AM #7

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

 
  • Psycho
  • Member
  • Members
  • Join Date: 20-Aug 12
  • 39 posts

Posted 28 August 2012 - 02:47 PM #8

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
  • Senior Member
  • Members
  • Join Date: 23-Sep 08
  • 1179 posts

Posted 28 August 2012 - 02:51 PM #9

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

 
  • Psycho
  • Member
  • Members
  • Join Date: 20-Aug 12
  • 39 posts

Posted 28 August 2012 - 03:16 PM #10

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
  • Senior Member
  • Members
  • Join Date: 23-Sep 08
  • 1179 posts

Posted 28 August 2012 - 03:44 PM #11

Images should be relative to the css file location.

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

 
  • Psycho
  • Member
  • Members
  • Join Date: 20-Aug 12
  • 39 posts

Posted 28 August 2012 - 09:49 PM #12

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

  • Screenshot 3 copy.jpg


 
  • Triplets
  • Senior Member
  • Members
  • Join Date: 23-Sep 08
  • 1179 posts

Posted 28 August 2012 - 10:28 PM #13

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
  • Member
  • Members
  • Join Date: 20-Aug 12
  • 39 posts

Posted 29 August 2012 - 12:09 AM #14

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
  • Senior Member
  • Members
  • Join Date: 23-Sep 08
  • 1179 posts

Posted 29 August 2012 - 12:24 AM #15

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
  • Junior Member
  • Members
  • Join Date: 19-May 08
  • 27 posts

Posted 04 September 2012 - 10:53 PM #16

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;
}