How do I add a background image (custom box) for the product attributes section?

[mleahy]

I am using ZenCart 1.3.9h and I want to have a custom box (image) as the background to where the product options are displayed. I would also like the Add To Cart box inside the attributes image box. Any suggestions on how best to implement this?

Thanks!

Michelle

[Petlife]

I am using ZenCart 1.3.9h and I want to have a custom box (image) as the background to where the product options are displayed. I would also like the Add To Cart box inside the attributes image box. Any suggestions on how best to implement this?

Thanks!

Michelle

This might hlep with change tha background. in you styleseet.css you find :

#productAttributes {
padding: 10px 14px;
margin: 10px 0;
border: 1px #f3ecd9 solid;
background: #fcfcea; (change this to the image you like)
like this : background-image:url(www.test.com/images/test.jpg)
}

[mleahy]

This might hlep with change tha background. in you styleseet.css you find :

#productAttributes {
padding: 10px 14px;
margin: 10px 0;
border: 1px #f3ecd9 solid;
background: #fcfcea; (change this to the image you like)
like this : background-image:url(www.test.com/images/test.jpg)
}

Thanks for the quick response. My template, my default template and classic stylesheet.css don't have the productsAttributes definition. Which makes me wonder because it is called in the file tpl_modules_attributes.php in the includes/templates/default_template directory. I'm wondering if that file isn't being used in my version.

Any thoughts?

[Petlife]

what is the link to a product with attributes on your site. Then i can see a bit more an maybe help a bit more..

[mleahy]

what is the link to a product with attributes on your site. Then i can see a bit more an maybe help a bit more..

Here is one:

http://www.naughticorner.com/StoreNe...roducts_id=115

Thanks!

Michelle 8-)

[Petlife]

Here is one:

http://www.naughticorner.com/StoreNe...roducts_id=115

Thanks!

Michelle 8-)

I it possible that you can attach the styleseet, ??

[Petlife]

hey I can see that you have bin trying yourself.

I have a solution that might lock even better :

Change the #productAttributes in the stylesheet to this:

#productAttributes {
    background-image: url("http://naughticorner.com/Store/images/Add_To_Cart_Box_Short.jpg");
    border: 0px solid #333333;
    margin: 10px 0;
    padding: 10px 14px;
    background-repeat: no-repeat;
    background-size: 234px;
    height: 138px;
}

Then change .wrapperAttribsOptions in the stylesheet to this:

.wrapperAttribsOptions {
    display: inline-block;
    margin: 0.3em;
    margin-top: 1em;
}

And add this to the stylesheet :

#attribsOptionsText {
    margin-top: -1em;
    margin-left: -1em;
}

Remember its just at suggestion Hope you like it

Before you change something be sure to make at backup :)

[mleahy]

hey I can see that you have bin trying yourself.

I have a solution that might lock even better :

Change the #productAttributes in the stylesheet to this:

#productAttributes {
    background-image: url("http://naughticorner.com/Store/images/Add_To_Cart_Box_Short.jpg");
    border: 0px solid #333333;
    margin: 10px 0;
    padding: 10px 14px;
    background-repeat: no-repeat;
    background-size: 234px;
    height: 138px;
}

Then change .wrapperAttribsOptions in the stylesheet to this:

.wrapperAttribsOptions {
    display: inline-block;
    margin: 0.3em;
    margin-top: 1em;
}

And add this to the stylesheet :

#attribsOptionsText {
    margin-top: -1em;
    margin-left: -1em;
}

Remember its just at suggestion Hope you like it

Before you change something be sure to make at backup :)

Thanks for the suggestions. I will try them. I took a little break from the project to get my taxes done, but now I am back into it. I'll let you know how it goes....

- Michelle

[mleahy]

Thanks for the suggestions. I will try them. I took a little break from the project to get my taxes done, but now I am back into it. I'll let you know how it goes....

- Michelle

I tried your suggestions and I also made the image fit the space better, and now it looks great. Take a look:

http://www.naughticorner.com/StoreNe...roducts_id=106

Now I just have to figure out how to get the Add To Cart Box to sit on top of the image (shift it down) and how to get the spacing and alignment correct on the attributes and their options.



P.S. I didn't put the last part you suggested in:

#attribsOptionsText { margin-top: -1em; margin-left: -1em; }

because it moved the attributes too far up to the top left of the box.