Announcement

Collapse
No announcement yet.

Controlling Continue and Complete Order Button Colors

Collapse
X
  • Filter
  • Time
  • Show
Clear All
new posts

  • Controlling Continue and Complete Order Button Colors

    I am using the optic theme and am trying to figure out where the color of the "Continue" and "Complete Order" buttons would be on the checkout screens? Can anyone point me in the right direction?

    Thanks in advance.

  • You could add
    .bg-teal {
    background-color: #your-color-hex-here}

    To a style sheet listed after the readytheme style sheet...


    Bruce Golub
    Phosphor Media - "Your Success is our Business"

    Improve Your Customer Service | Get MORE Customers | Edit CSS/Javascript/HTML Easily | Make Your Site Faster | Get Indexed by Google | Free Modules | Follow Us on Facebook
    phosphormedia.com

    Comment


    • The buttons styles are defined in /css/buttons.css
      Brennan Heyde
      VP Developer Relations
      Miva, Inc.
      bheyde@miva.com
      https://www.miva.com

      Comment


      • I want my buttons in most places to be the theme color, however I want the buttons in the checkout to be green. How do I change them only in the checkout and not storewide?

        Comment


        • You can replace the bg-teal class with bg-green for the button elements. That will change the colors there only.
          Matt Zimmermann
          Director of UI/UX Standards and Theme Development
          / Miva, Inc.

          Comment


          • Thanks Matt,

            I found it in the admin User Interface Settings, you can edit the code for the continue button

            <input type="submit" value="Continue" class="button button-large-font uppercase button-square bg-blue" />

            I changed bg-blue to bg-green

            <input type="submit" value="Continue" class="button button-large-font uppercase button-square bg-green" />

            There are already a ton of values in the css files for many colors. I looked in the cs files and found bg-blue
            and saw a lot of other options. I didn't have to create a new css definition, I just changed the one I was using.

            Comment

            Working...
            X

            This website uses cookies to identify visitors, track visitors to our website, store login session information and to remember your user preferences. By continuing to use this site you agree to our use of cookies. Learn More.

            This website uses cookies. By continuing to use this site you agree to our use of cookies. Learn More.

            Accept