Forums / Templates, Stylesheets, Page Layout / replacing images with my own

replacing images with my own

Started by cyberbaffled on 14 Jun 2013, 4:59 AM · Views: 967

Results 1 to 8 of 8
14 Jun 2013, 4:59 AM
#1
cyberbaffled avatar

cyberbaffled

Zen Follower

Join Date:
Apr 2012
Location:
Louisville, Colorado, USA
Posts:
120
Plugin Contributions:
0

replacing images with my own

In the Administration utility it's possible to turn on or off the display of boxes for "manufacturing", "categories", etc. Is it possible to turn on a box, keep the text and their links, but replace the underlying image? What I'd like to accomplish is to superimpose the entire home page of the cart over one image. If necessary I would if possible partition the image and use those partitions as the background images of each pre-existing box of the aforementioned varieties. I would then use my user access to CSS to position the box images in a manner that recreates the original image in its entirety. Is this possible?

14 Jun 2013, 5:06 AM
#2
dbltoe avatar

dbltoe

Totally Zenned

Join Date:
Jan 2004
Location:
N of San Antonio TX
Posts:
9,890
Plugin Contributions:
20

Re: replacing images with my own

Create your background image and then remove the relative background-color css calls from the stylesheet. Instant transparent boxes.

Need a hand with Zen Cart? Hire the team at myZenCartZone.com for upgrades, repairs, and custom plugins.
Zen Cart Certified hosting at myZenCartHost.com

14 Jun 2013, 7:20 AM
#3
gjh42 avatar

gjh42

Black Belt

Join Date:
Jul 2005
Location:
Upstate NY
Posts:
21,876
Plugin Contributions:
8

Re: replacing images with my own

That's right. ^^
Using individual element background images to recreate a whole picture is a holdover from antiquated table layout where an image would be sliced & diced, them pasted into table cells. A single background image with transparent elements over it will work much more smoothly and require no fiddly maintenance. Backgrounds that relate specifically to one box should be set by CSS as a background for that box so they stay with it when its position shifts due to dynamic content.

16 Jun 2013, 1:57 AM
#4
cyberbaffled avatar

cyberbaffled

Zen Follower

Join Date:
Apr 2012
Location:
Louisville, Colorado, USA
Posts:
120
Plugin Contributions:
0

Re: replacing images with my own

Apparently I don't know what a "relative" background-color is. I've replaced every background-color in the primary CSS file with "background-image: URL(images/myfile.jpg); W3 wasn't clear on the syntax so I've also tried placing within parentheses 'images/myfile.jpg'. No dice. One thing that did happen though was that the entire home page with the big Zen Cart logo in the upper left hand corner lost all graphical content except what was in the boxes. So I seem to be headed in the right direction.

Thanks for your prompt response.

16 Jun 2013, 1:59 AM
#5
cyberbaffled avatar

cyberbaffled

Zen Follower

Join Date:
Apr 2012
Location:
Louisville, Colorado, USA
Posts:
120
Plugin Contributions:
0

Re: replacing images with my own

Hi again blackbelt. First come, first serve, so please see my reply to dbltoe. Of course, it's also an appropriate reply to your much appreciated comment.

16 Jun 2013, 4:47 PM
#6
dbltoe avatar

dbltoe

Totally Zenned

Join Date:
Jan 2004
Location:
N of San Antonio TX
Posts:
9,890
Plugin Contributions:
20

Re: replacing images with my own

Bitten by the spell checker. Should have been "related". IOW, start with wrapper colors as they are related to the entire area.

Need a hand with Zen Cart? Hire the team at myZenCartZone.com for upgrades, repairs, and custom plugins.
Zen Cart Certified hosting at myZenCartHost.com

2 Jul 2013, 4:51 AM
#7
cyberbaffled avatar

cyberbaffled

Zen Follower

Join Date:
Apr 2012
Location:
Louisville, Colorado, USA
Posts:
120
Plugin Contributions:
0

Re: replacing images with my own

RESOLUTION: The correct syntax is background-image: url('imagename.jpg'); AND VERY IMPORTANT: the image must be in the same folder as stylesheet.css.

2 Jul 2013, 4:57 AM
#8
gjh42 avatar

gjh42

Black Belt

Join Date:
Jul 2005
Location:
Upstate NY
Posts:
21,876
Plugin Contributions:
8

Re: replacing images with my own

In standard Zen Cart functionality: The correct syntax is background-image: url(../imagename.jpg); (quotes in the url are optional) AND VERY IMPORTANT: the image must be in the /includes/templates/your_template/images/ folder, not the /css/ folder with stylesheet.css.