Tips and Tricks HQ Support

Support site for Tips and Tricks HQ premium products

  • Home
  • Contact Us
  • Documentation
  • Forum Home
    • Forum
    • Forum Search
    • Forum Login
    • Forum Registration

How do you Turn off Styling around the Buy Now Button Custom Image?

by

Tips and Tricks HQ Support Portal › Forums › WP eStore Forum › WP eStore Tweaks › How do you Turn off Styling around the Buy Now Button Custom Image?

Tagged: border remove, change buy now button

  • This topic has 34 replies, 6 voices, and was last updated 12 years, 1 month ago by jwise.
Viewing 15 posts - 1 through 15 (of 35 total)
1 2 3 →
  • Author
    Posts
  • March 15, 2010 at 7:12 am #925
    gymgangsta
    Member

    I would like to turn off all borders etc on the styling of the buy now button. I am using my own image and a border is around it that I want gone.

    What file and what piece of code turns off the border on the buy now button?

    class = “eStore_buy_now_button” I looked in wp_eStore_style.css. And can’t find it..

    thanks so much!

    GG

    March 16, 2010 at 1:12 am #18837
    amin007
    Participant

    Just the button itself does not have any border that eStore puts. Maybe your theme is putting the border for image or input types (some theme does this). If this is the case then you will need to change your theme’s CSS.

    If you are using the fancy display option and want to modify the border for the thumbnail then search for the following line and modify the css there:

    /* === Fancy display css === */

    March 16, 2010 at 1:17 am #18838
    gymgangsta
    Member

    Was just about to post that the problem was in my theme, but you beat me to the response by 3 minutes. ;p

    this code was in my template wp_core.css… thanks for the help!

    input{

    background: url(../images/form-field-bg.gif) no-repeat;
    border-top: 1px solid #ccc;
    border-right: 1px solid #aaa;
    border-bottom: 1px solid #aaa;
    border-left: 1px solid #ccc;
    font-size:110%;
    font-size-adjust:none;
    font-stretch:normal;
    font-style:normal;
    font-variant:normal;
    font-weight:normal;
    line-height:normal;
    padding:5px 3px 3px 5px;
    }
    .button, input[type="submit"], .submit {
    border-color:#DEDEDE #bbb #bbb #DEDEDE;
    border-style:solid;
    border-width:1px;
    background: #e5e5e5 url(../images/lightgrayup.png) repeat-x left top;
    margin:0;
    padding: 2px 3px 1px 5px;
    color: #666;
    }

    .button:hover, input[type="submit"]:hover, .submit:hover {

    color: #000;
    }
    .button:active, input[type="submit"]:active, .submit:active {

    background: #e5e5e5 url(../images/lightgraydown.png) repeat-x left top;

    March 24, 2010 at 10:07 pm #18839
    sunnydt
    Member

    I am having the same problem but nothing I do seems to work. Please help with this. I hate this thick white ugly border around my checkout button, remove item and clear cart buttons. Would really appreciate any help.

    March 24, 2010 at 10:11 pm #18840
    sunnydt
    Member

    If anything how can I change these images to text instead?

    March 25, 2010 at 12:55 am #18841
    amin007
    Participant

    Simply don’t specify an Image URL in the “Button Image URL” field for this product and it will use the Text “Buy Now” as the button.

    March 25, 2010 at 1:16 am #18842
    sunnydt
    Member

    Not sure what you mean. On the shopping cart page, where it has a button for paypal to checkout and two little images for empty cart and remove item, it has a white border around them. I am trying to remove this. I tried what you said and that only changed the button for adding products to the cart. If you click here and then click “add to cart” you will see the white borders around all the images. [http://rockinthunder.insytz.org/?page_id=37]

    March 25, 2010 at 2:24 am #18843
    amin007
    Participant

    Thank you for the link… it makes it easier to understand the problem.

    The following are the bit of CSS that is specified in eStore for those two buttons:

    .eStore_remove_item_button{

    width:20px;

    height:20px;

    }

    .eStore_empty_cart_button{

    width:28px;

    height:20px;

    }

    As you can see it doesn’t specify any border so it has no reason to show the border unless your theme’s CSS is specifying border for “input” type.

    You can try to override the border attribute to none and see if that helps. Modify the CSS and add the following:

    border: none;

    March 25, 2010 at 3:37 am #18844
    sunnydt
    Member

    thanks, I dont see anything for input type

    [admin deleted CSS code]

    March 25, 2010 at 4:52 am #18845
    amin007
    Participant

    Okay. I see you are using custom images for those buttons. Can you please put the original image back so I can see if we get the same outcome (This would eliminate the possibility of the image being the source of the issue).

    Just do a clean install of the WP eStore plugin so we have a base to start with.

    March 25, 2010 at 7:10 pm #18846
    sunnydt
    Member

    ok I have done a clean install. I can still see the borders on two of the images. You cant see anything on the Checkout button because its white anyway. Thanks for your help.

    March 25, 2010 at 10:24 pm #18847
    sunnydt
    Member

    I also have one other question. Is there any way to make the shopping cart widget to not display anything on the sidebar if the cart is empty?

    March 25, 2010 at 10:39 pm #18848
    Ivy
    Member

    Hi Sunnydt, You can use the following PHP shortcode to only show the cart when an item is added to it.

    <?php echo eStore_shopping_cart(); ?>

    Display the shopping cart from a Theme file (eg.

    Sidebar, header, footer) only when there are items

    in the cart.

    The following post has a list of all the shortcodes and PHP shortcodes for the eStore:

    http://www.tipsandtricks-hq.com/ecommerce/wp-estore-shortcodes-and-functions-reference-460

    Cheers,

    Ivy

    March 25, 2010 at 11:00 pm #18849
    amin007
    Participant

    Thank you for the clean install. The backgrounds of those images seem to be white which is incorrect as they are PNG image and have no backgrounds (this is so they can get blened into any theme).

    So now we need to figure out what CSS code of your theme is adding white background to “input” or image fields.

    I had a look at your CSS and found the following code:

    input{

    background: #fff url(../images/form-field-bg.gif) no-repeat 0 0;

    border-top: 1px solid #000;

    border-right: 1px solid #888;

    border-bottom: 1px solid #888;

    border-left: 1px solid #000;

    }

    The following bit of CSS code looks problematic to me (get rid of this line and let me know if it makes a difference):

    background: #fff url(../images/form-field-bg.gif) no-repeat 0 0;

    March 26, 2010 at 12:19 am #18850
    sunnydt
    Member

    amin could you please tell me which css this is? my styles.css for wordpress does not have input anywhere in it. thanks

  • Author
    Posts
Viewing 15 posts - 1 through 15 (of 35 total)
1 2 3 →
  • You must be logged in to reply to this topic.
Log In

Forum Related

  • Forum Home
  • Forum Search
  • Forum Login

Support Related Forms

  • Contact Us
  • Customer Support
  • Request a Plugin Update
  • Request Fresh Download Links

Useful Links

  • Plugin Upgrade Instructions
  • WP eStore Documentation
  • WP eMember Documentation
  • WP Affiliate Platform Documentation
  • WP PDF Stamper Documentation
  • WP Photo Seller Documentation
  • Tips and Tricks HQ Home Page
  • Our Projects

Quick Setup Video Tutorials

  • WP eStore Video Tutorial
  • WP eMember Video Tutorial
  • WP Affiliate Platform Video Tutorial
  • Lightbox Ultimate Video Tutorial
  • WP Photo Seller Video Tutorial

Our Other Plugins

  • WP Express Checkout
  • Stripe Payments Plugin
  • Simple Download Monitor

Copyright © 2023 | Tips and Tricks HQ