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 13 years, 9 months ago by jwise.
-
AuthorPosts
-
March 15, 2010 at 7:12 am #925gymgangstaMember
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 #18837amin007ParticipantJust 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 #18838gymgangstaMemberWas 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 #18839sunnydtMemberI 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 #18840sunnydtMemberIf anything how can I change these images to text instead?
March 25, 2010 at 12:55 am #18841amin007ParticipantSimply 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 #18842sunnydtMemberNot 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 #18843amin007ParticipantThank 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 #18844sunnydtMemberthanks, I dont see anything for input type
[admin deleted CSS code]
March 25, 2010 at 4:52 am #18845amin007ParticipantOkay. 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 #18846sunnydtMemberok 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 #18847sunnydtMemberI 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 #18848IvyMemberHi 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 #18849amin007ParticipantThank 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 #18850sunnydtMemberamin could you please tell me which css this is? my styles.css for wordpress does not have input anywhere in it. thanks
-
AuthorPosts
- You must be logged in to reply to this topic.