- This topic has 10 replies, 2 voices, and was last updated 14 years ago by
.
-
Posts
-
I’ve monkeyed around with the “Add to Cart” Button for a bit now, but I’m having trouble styling it properly. Basically I would like to change the width (it’s currently cutting off the last few letters of “add to cart”) and also change the button and text colors so that they fit in with my color scheme a bit better.
I’ve also noticed the the button is different on my product categories page where I have a number of them listed than it is on my individual product pages, though neither is the right size for the text. You can see the difference here:
http://www.spinozarods.com/store/bamboo-rods/leonard-8-6-3p-df50-red-wrap/
Here is the css that I was trying to use but which isn’t doing anything:
/*=== Fancy 3 css === */
.custom .estore-button-form {width: 120px;}
So, what’s the proper CSS for styling that darned button in each of these cases?
Thanks!
-JA
Looking at the CSS I can see the following for the input field (which is coming from the theme is making the button 45% of the total width:
.format_text input, #commentform input, #commentform textarea {
border-width:0.071em;
padding:0.214em;
width:45%;
}
See the width 45%? That’s what you got to take care of first. This post has info on what to do:
I really like the Thesis theme but I seriously don’t know why they specify the with of all input fields (button) to be 45% of the total width. I really think that the input field width should be auto so it can just adjust to whatever the text length or the image size for the button is.
Yeah agreed — you’d think there would be a bit more granularity possible with input fields so that you’re not changing them sitewide when you really want to mess with specific ones..
Okay, I’ll give it a shot and see what kind of damage I can do!
Thanks!
-JA
Well that worked nicely — I just changed the width to %100 and those buttons are showing up fine, as you can see here:
As far as I can tell, it hasn’t screwed up anything else on my site (fingers crossed!).
One more question though – do you know how I could change the colors on just the buttons on the product category pages and the individual product pages? Basically I’m not sure how to properly select those in CSS and only those. Will Thesis force me to make all of the tex_inputs to have the same colors for background and text?
-JA
Use button images for your products. This way you can specify how each buttons for each product look like without having to touch the CSS.
Well I’m trying out a number of button images which is working well.
I noticed something very funny tonight though. After adding a bunch of test buttons the category products page looked fine (http://www.spinozarods.com/store/bamboo-rods/) but when I went to the individual product pages, something strange happened. At first the button was miniscule, but every time I hovered over it the button would grow slightly bigger. If I kept hovering back and forth over it, the button would just keep growing with each hover until it was huge. It was the damndest thing. I’ve never heard of anything like that happening. I switched over to firefox and checked it in that browser and it was fine, so it may have something to do with chrome, but I’m pretty stumped…
-JA
It’s still doing it though! Do you have any idea why?
I actually do need to get this fixed and keep it from happening — I can’t have customers getting the growing, monster “add to cart” button!
-JA
So I’ve been thinking about this some more — would it have to do with defining the width of the custom “add to cart” button in individual product mode? Just a matter of CSS?
This is definitely happening because of some bad CSS on that page.
Can we get some indication as to what introduces this? For example when you install the fresh version of the plugin it’s not there. Then you have done some CSS tweak… which tweak introduces this?
Please post a link to the page so I can inspect the elements.
It looks like the width of the button wasn’t defined so I added this to my custom css:
.footer-left-content {
float:left;
vertical-align:middle;
width:10em;
}
The page I was referring to was this: http://www.spinozarods.com/store/bamboo-rods/leonard-8-6-3p-df50-red-wrap/
It seems to be working properly now, thank goodness…
-JA
- You must be logged in to reply to this topic.