Results 1 to 10 of 16

Hybrid View

  1. #1
    Join Date
    Nov 2010
    Posts
    27
    Plugin Contributions
    0

    Default 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

  2. #2
    Join Date
    Jun 2010
    Location
    Denmark
    Posts
    62
    Plugin Contributions
    0

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

    Quote Originally Posted by mleahy View Post
    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)
    }

  3. #3
    Join Date
    Nov 2010
    Posts
    27
    Plugin Contributions
    0

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

    Quote Originally Posted by Petlife View Post
    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?

  4. #4
    Join Date
    Jun 2010
    Location
    Denmark
    Posts
    62
    Plugin Contributions
    0

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

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

  5. #5
    Join Date
    Nov 2010
    Posts
    27
    Plugin Contributions
    0

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

    Quote Originally Posted by Petlife View Post
    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-)

  6. #6
    Join Date
    Jun 2010
    Location
    Denmark
    Posts
    62
    Plugin Contributions
    0

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

    Quote Originally Posted by mleahy View Post
    I it possible that you can attach the styleseet, ??

  7. #7
    Join Date
    Jun 2010
    Location
    Denmark
    Posts
    62
    Plugin Contributions
    0

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

    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:
    Code:
    #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:
    Code:
    .wrapperAttribsOptions {
        display: inline-block;
        margin: 0.3em;
        margin-top: 1em;
    }
    And add this to the stylesheet :
    Code:
    #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 :)

  8. #8
    Join Date
    Nov 2010
    Posts
    27
    Plugin Contributions
    0

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

    Quote Originally Posted by Petlife View Post
    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:
    Code:
    #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:
    Code:
    .wrapperAttribsOptions {
        display: inline-block;
        margin: 0.3em;
        margin-top: 1em;
    }
    And add this to the stylesheet :
    Code:
    #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

  9. #9
    Join Date
    Nov 2010
    Posts
    27
    Plugin Contributions
    0

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

    Quote Originally Posted by mleahy View Post
    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.
    Last edited by mleahy; 28 Mar 2011 at 07:55 PM. Reason: Forgot to mention something...

 

 

Similar Threads

  1. how to align the product title, price and add to cart box next to the product image?
    By evaky in forum Templates, Stylesheets, Page Layout
    Replies: 8
    Last Post: 5 Mar 2012, 03:31 AM
  2. How do i add a seperate image/section for size 'measurements' for clothing?
    By tommydamani in forum Setting Up Categories, Products, Attributes
    Replies: 20
    Last Post: 21 Jul 2010, 11:29 PM
  3. Background image in the main page section
    By reneet in forum Templates, Stylesheets, Page Layout
    Replies: 2
    Last Post: 16 Mar 2010, 10:35 PM
  4. how to add free-shipping image for every products for the product list page
    By vanson in forum Templates, Stylesheets, Page Layout
    Replies: 4
    Last Post: 21 Feb 2010, 03:36 PM
  5. How to add a background image to the header?
    By Twaddle in forum Templates, Stylesheets, Page Layout
    Replies: 2
    Last Post: 14 Jan 2010, 01:10 PM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
disjunctive-egg