Changing the appearance of the 'click here' button

How to change the formatting of the 'click here' button?

  • Paul Barthmaier

    Hi there and welcome to the WPMUdev Support Community!

    Thanks for your question. You mention the 'Click Here' button of the Subscribe by Email plugin. The default value that I see in my widget is 'Create Subscription.' Is this what you mean? And what type of styling are you looking to add? If so, for fun, I added this to my child css:

    #subscribe-by-email-form input.button {
    	background-color: red;
    	color: white;
    	text-shadow: 1px 1px #999999;
    	width: 65%!important;
       }

    Hope this helps. Let us know how things go for you.

    One other thing, it looks like you have an older version. It would be good if you updated this plugin to the latest version.

    Cheers,
    Paul

  • SteveSinclair

    Hi CJ

    Using the information provided by Paul above as a starter I was able to style the form for my use as follows:

    #subscribe-by-email-form input.button {
    background-color: #000;
    background: #03f;
    background: -moz-linear-gradient( #03F, #036);
    background: -o-linear-gradient(#0f0f0f, #2B2B2B);
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#0f0f0f), to(#2B2B2B)); /* Older webkit syntax */ background: -webkit-linear-gradient(#0f0f0f, #2B2B2B);
    color: white;
    text-shadow: 1px 1px #999999;
    width: 65%!important;
    margin-top:5px;
    border-radius:8px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    float:left; /*this positions the subscribe button to the left rather than center*/
    }
    input#subscription_email {
    background-color:#505050;
    background: #505050;
    background: -moz-linear-gradient( #505050, #000);
    background: -o-linear-gradient(#505050, #000); background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#505050), to(#000)); /* Older webkit syntax */ background: -webkit-linear-gradient(#505050, #000);
    border-radius:5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border:1px solid #CFC;
    border-style: inset !important;
    color:#CCC;
    }

    Maybe some of this will be useful for you?

    You can see this in action in the footer (left column) at: http://www.riotstories.co.uk/

    I haven't figured out how to style the text below the subscribe button.

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.