How do I change the look of the sign up buttons

I would like to change the look of the sign up buttons at the following: http://90revolutions.com/running/register/ I was planning on replacing the buttons with a customized button image. Could you guide me on the best method to change the sign up buttons?

Thank you so much in advance,
Steve

  • Elliott Bristow

    Hi Steve,

    Welcome to the forums.

    Loving the video background on your site... I just sat there watching it for a few minutes then remembered what I was supposed to be doing! :slight_smile:

    Those two buttons have a class of .button and .blue, so you can change the syling of these classes via CSS. To do this, add some CSS code to the bottom of your theme's stylesheet, style.css, similar to the following:

    .button {
        background-image: url('url.to/your/image.png'); // If you want to use an image
        -webkit-border-radius: 0; // to override the curved corners in webkit browsers
        -moz-border-radius: 0 // to override the curved corners in mozilla browsers
        border-radius: 0; // to override the curved corners in other browsers
        border: none; // to remove the blue border
    }

    If you need any more CSS tips, let us know.

  • Steve

    Hi Elliott,

    That is awesome that your attention was captured by the video. DevinSuperTramp on Youtube makes some incredible videos. Thanks for the compliments.

    Thanks for the css information. It helped me focus on the issues. After playing around with the css, I decided to change my tactic.

    Instead, I would like to change the font color just on the membership buttons without altering the other buttons on the site. Specifically, I would like the "sign up" on the button to be orange like the border when the mouse is not on the button. When the mouse is on the button, I would like the font of "sign up" to be white. Where could I find the code to change the font color during an inactive state and hover state?

    Thanks

  • Steve

    You wouldn't catch me on those tightropes :slight_smile: Totally crazy! More crazy videos can be found here: http://www.youtube.com/user/devinsupertramp/videos

    The CSS above almost worked perfectly. I added the information above to the subscription form.css of the plugin. The only thing that doesn't quite work is the hover function. The words remain black during the hover even though your hover css color includes #fff. Any suggestions?

  • Elliott Bristow

    It seems liek the white was being overwritten by other CSS that was tagged with "!important".

    There are two possible solutions to this, flag our code as important, or redefine the previous !important:

    #membership-wrapper .form-membership .button:hover {
    color: #fff !important;
    }

    or

    .gglass .gray-container a:hover {
    color: #fff !important;
    }

    The !important tag basically tells the browser to ignore and further CSS tweaks made to this element.... unless the new tweak it also marked as !important.

    Give them a go and let me know what you get.

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.