Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS [Solved] Overriding Woocommerce CSS

  • This topic is empty.
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #176521
    jlbrown1
    Participant

    First, I am new to CSS, so go easy on me. I have used Chrome and Firebug to try and figure this out. According to Woocommerce documentation found at http://docs.woothemes.com/document/css-structure/, they suggest overriding their CSS at the theme level. There suggestion is to add the following to change the buttons (as an example):

    a.button, button.button, input.button, #review_form #submit { background:black; }

    Using this example, I added the following to my style.css for my theme:

    a.button, button.button, input.button, #review_form #submit { background: #27ae60; }

    I have tried to modify the buttons individually to no avail also. The code above is in place on my website. Just go to the Shop page and add an item. I would like to change the color of the grey buttons on the Cart page and Checkout page. I would also like to change the blue border and square around the Pay with Amazon banner. All to the color of #27ae60.

    Thanks!

    #176530
    janet4now
    Participant

    Do you have a link to your site?

    #176537
    janet4now
    Participant

    The whole site is in white type… so hard to read. I know you didn’t ask about this, but I’d recommend changing your page content to something lighter and using dark type. Not only easier to read but will provide a better contrast to the header and footer areas. And you can reduce that extra large 18px type a bit to 16 or even 14.

    Right now it’s just overwhelming…

    at the very least add: -webkit-font-smoothing:antialiased to your font.

    REgarding your question, trying add the !important to your css: a.button, button.button, input.button, #review_form #submit { background: #27ae60!important; border:none!important;}

    #176553
    jlbrown1
    Participant

    LOL! Yes, that is the correct website. Traveling with a 12 teenagers right now, so I was a little crazy when posting!

    The 18 pt. Font was an oversight. It was 14, I increased it while working on my 7″ tablet. I will change that back. :-)

    Regarding the override, I would prefer to do that in my style.css as suggested by Woocommerce.

    I do see the suggestion of !important. Is that the best method?

    #177208
    jlbrown1
    Participant

    Please mark as solved. I would do it if I could figure out how…more than happy to if someone will tell me for the future.


    @janet4now
    , look at the site now… :) Still a work in progress, but took your advice. Haven’t worked on text/link colors too much yet, but definitely better.

    #177209
    Paulie_D
    Member

    Please mark as solved.

    Done…and there is no button to mark as solved.

    Moderators and you (as the originator) should be able to edit the first post title and just add the word [Solved].

    Easy. :)

Viewing 6 posts - 1 through 6 (of 6 total)
  • The forum ‘CSS’ is closed to new topics and replies.