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

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 :smile:

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 :smile:

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(https://www.test.com/images/test.jpg)
}

Petlife:

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(https://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?

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.. :D

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.. :D

Here is one:

http://www.naughticorner.com/StoreNextUpgrade/index.php?main_page=product_info&cPath=82_83&products_id=115

Thanks!

Michelle 8-)

mleahy:

Here is one:

http://www.naughticorner.com/StoreNextUpgrade/index.php?main_page=product_info&cPath=82_83&products_id=115

Thanks!

Michelle 8-)

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

Petlife:

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

I think so...

I had to make it a .doc file because the upload tool here doesn't allow .css file extensions. Hopefully you will be able to open it. :smile:

mleahy:

I think so...

I had to make it a .doc file because the upload tool here doesn't allow .css file extensions. Hopefully you will be able to open it. :smile:

im not shure but try adding this in the buttom of you stylesheet.

#productAttributes {
padding: 10px 14px;
margin: 10px 0;
border: 1px #333333 solid;
background-color:#333333}

What happens.. it shuld make the background af the attributes gray. does it do that???

if it do let me know så i can se it.

Petlife:

im not shure but try adding this in the buttom of you stylesheet.

#productAttributes {
padding: 10px 14px;
margin: 10px 0;
border: 1px #333333 solid;
background-color:#333333}

What happens.. it shuld make the background af the attributes gray. does it do that???

if it do let me know så i can se it.

It didn't have any effect. I think that it is because it productAttributes isn't being used anywhere. :dontgetit

mleahy:

It didn't have any effect. I think that it is because it productAttributes isn't being used anywhere. :dontgetit

Actually, I take that back, it does seem to be used in the following:

includes/templates/theme334/templates/tpl_product_info_display.php calls tpl_modules_attributes.php as follows:

and

/includes/templates/template_default/tpl_modules_attributes.php uses productAttributes as follow:

*/
?>

Any idea why it isn't showing the box?

My bad :huh:

It seems like the theme you are using dosen't use a overall css style for the attributes, that might have somthing to do with that.

It might be that the coding for the attributes in the php files have to be changed, but thats no my strong site.. sorry.. :cry:

Any idea why it isn't showing the box?

Okay, I accidentally edited the wrong stylesheet.css (I had a couple open). :blush:

Now the additions you suggested did work and I have a gray box around the attributes. I'll try adding the image now and see how it looks.

Thanks!

Any suggestions on how to put the Add to cart box inside the attribute box?

:smile:

I think it is the theme thats set up not using the brox around the attributes, but i hope a more experince Zenér ho can tell you have to do this.. im running out of options:shocking:

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 :D Hope you like it

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

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 :D 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 :smile:

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 :smile:

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/StoreNextUpgrade/index.php?main_page=product_info&cPath=76_77&products_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.

:smile:

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.