[SOLVED] How to apply a new css for a "Buy Now" button but not alter current css for
 

Hello, atahualpa is a great theme and have been grateful and even donated to some who have helped me here.:)> hopefully this one might be a no-brainer to some of you as it is a real stump to me.

Using Atahualpa 3.5.3, Wordpress 3.0.1

Whenever I put an image on the post it is universally applying a css style sheet. However this is not working when it comes to placing a "buy now" button in your post . By using firebug I found that it is using this style:
.post img {
-moz-border-radius: 3px 3px 3px 3px;
background-color: #F3F3F3;
border: 1px solid #DDDDDD;
padding: 5px;
}
I don't know where this style is located. I thought it was in css.php but it doesn't seem to be there. I don't want to change the current css but I just want a new style to be applied to the "buy now" button so that it doesn't have the same look as the current images.

So how would I go about doing this? Thanks!

add a unique ID to the html used to create the button, them reference it in the CSS. Without seeing the HTML I can't be more detailed than that.

hello thanks for replying. That sort of gave me some ideas but I can't seem to pinpoint what to use. Could you please provide an example of an ID and how would you write it out in the CSS for it to link to? Thank You:)

by the way, everytime I use <img> tag it immediately goes back to the default setting. It seems the .post img and img css in css.php trumps anything with <img>

what is the url and section of the page in question?

Hello thanks juggledad,

I've left the button called "buy here" there. It has messed up my arrangement because of the css. I would like to appear like the other buttons. The other buttons are fine because they were a result of using wp-eStore's shortcode that seems to work nicely. But for some of these products I just would like them to be a standard image because I would like them to link to the product's page instead of going to checkout.


Please provide example of the id and css as well, thanks.

the other images are part of a form
but the BUY HERE is not

hello,
yes, I am aware that the other buttons are part of a form and the "buy here" button is an image link. That's why I am asking if there is a way around it. I want to manipulate the "buy here" button to display without the grey padding etc. Because the css for it is coming from the atahualpa theme somewhere...

thanks in advance again

well you can change the image style vai ATO->Style IMAGE options or override the style since you have a class on the element. Use FireBug in Firefox to examine what CSS is being applied then using the class you have named, create the CSS Selector and rule to set the background how you want: 'background-color: transparent;' probably

ok, based on juggledad's pointers (Thanks, juggledad) I have managed to solve this a few weeks ago. I decided to come back here and place my reply in case it might somebody else out there, sorry for the delay:

Firstly, there's an atahualpa css that is affecting all images you see on your website. In order to apply a specific css to a unique image, I created img class="buyhere" surrounding the image I wanted. Then go to Add HTML/CSS inserts and add:

img.buyhere {
padding: 0px;
border: 0px;
margin: 0px 0px 0px 23px;
background-color: #ffffff;
-moz-border-radius: 0px;
-khtml-border-radius: 0px;
-webkit-border-radius: 0px;
border-radius: 0px;
}

the reason there are so many 0px is because you need to override the existing css, ( I used firebug to find out what they were) in my case I didn't want any of it, then apply your own to suit your needs.