Wordpress Themes - WP Forum at BFA
There will be no more development for Atahualpa (or any other theme), and no support. Also no new registrations. I turned off the donation system. I may turn the forum to read only if it gets abused for spam. Unfortunately I have no time for the forum or the themes. Thanks a lot to the people who helped in all these years, especially Larry and of course: Paul. Take care and stay healthy -- Flynn, Atahualpa developer, Sep 2021

Wordpress Themes - WP Forum at BFA » WordPress Themes » Atahualpa 3 Wordpress theme »

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


  #1  
Old Apr 19, 2011, 06:58 AM
lovin'wordpress
 
21 posts · Sep 2010
Australia
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!
  #2  
Old Apr 19, 2011, 07:51 AM
juggledad's Avatar
juggledad
 
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
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.
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #3  
Old Apr 19, 2011, 12:16 PM
lovin'wordpress
 
21 posts · Sep 2010
Australia
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
  #4  
Old Apr 19, 2011, 12:21 PM
lovin'wordpress
 
21 posts · Sep 2010
Australia
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>
  #5  
Old Apr 19, 2011, 12:47 PM
juggledad's Avatar
juggledad
 
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
what is the url and section of the page in question?
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #6  
Old Apr 19, 2011, 12:57 PM
lovin'wordpress
 
21 posts · Sep 2010
Australia
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.

Last edited by lovin'wordpress; May 2, 2011 at 08:57 PM.
  #7  
Old Apr 19, 2011, 03:37 PM
juggledad's Avatar
juggledad
 
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
the other images are part of a form
HTML Code:
<input type="image" src="http://www.acashic.com/wp-content/plugins/wp-cart-for-digital-products/images/buy_audio.png" class="eStore_button" alt="Add to Cart" />
but the BUY HERE is not
HTML Code:
<img class="buyhere" src="http://www.acashic.com/buttons/buy_here.gif" />
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #8  
Old Apr 20, 2011, 02:44 AM
lovin'wordpress
 
21 posts · Sep 2010
Australia
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
  #9  
Old Apr 20, 2011, 04:22 AM
juggledad's Avatar
juggledad
 
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
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
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #10  
Old May 2, 2011, 09:06 PM
lovin'wordpress
 
21 posts · Sep 2010
Australia
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.

Bookmarks

Tags
customize image css

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes


Similar Threads
Thread Thread Starter Forum Replies Last Post
[SOLVED] Can I buy the rights so that I'm allowed to remove the &quot;Powered by..&quot; line? P3ngu1n Post-Kicker, -Byline & -Footer 2 Feb 7, 2011 09:59 AM
3.4.9 set the "HTML/CSS Inserts" back to wider editor darmanpurba@gmail.com New Versions, & Updating 3 May 16, 2010 04:26 AM
Wish list: Put all css/text as a "link rel='stylesheet..." lita New Versions, & Updating 1 Dec 6, 2009 06:23 AM
Having trouble with the "now reading" plugin displaying pictures... widget CSS jmesax Sidebars & Widgets 3 Mar 28, 2009 11:44 PM


All times are GMT -6. The time now is 02:20 AM.


Powered by vBulletin® Copyright ©2000 - 2024, Jelsoft Enterprises Ltd.