How can i change the text style and color of this text?

alexrohner Feb 9, 2016 · 4:29 am #3002

On my website, I am using this plugin: https://wordpress.org/plugins/mail-subscribe-list/ to create a widget that allows users to subscribe via email. You can see the plugin in action here: http://www.merchvintage.com/?post_type=product (on the top right under the header where it says “Never miss a new item! Get notifications via email whenever new merch is dropped”)
I want to know how to change this text to match the text on my website’s home front page as well as change the style and color of the button that says “Submit” to match my other buttons.

Any help would be greatly appreciated. Thanks.

Andrew Misplon Puro Feb 9, 2016 · 6:38 pm #3003

Hi Alex

Thanks for reaching out.

For the button, try:

/* WooCommerce */

.woocommerce ul.products li.product a.button:hover {
    border-bottom: 1px solid;
    border-color: #2d608d #2a5b85 #275379;
}

#sml_subscribe_widget .btn {
	font-size: 1em;
    background: #3d82bf;
    background: -webkit-gradient(linear,left bottom,left top,color-stop(0,#316898),color-stop(1,#3d82bf));
    background: -ms-linear-gradient(bottom,#316898,#3d82bf);
    background: -moz-linear-gradient(center bottom,#316898 0%,#3d82bf 100%);
    background: -o-linear-gradient(#3d82bf,#316898);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#3d82bf',endColorstr='#316898',GradientType=0);
    border: 1px solid;
    border-color: #2d608d #2a5b85 #275379;
    color: #fff !important;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
    -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,0.2), 0 1px 2px rgba(0,0,0,0.065);
    -moz-box-shadow: inset 0 1px 0 rgba(255,255,255,0.2), 0 1px 2px rgba(0,0,0,0.065);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.2), 0 1px 2px rgba(0,0,0,0.065);
    text-shadow: 0 1px 0 rgba(0,0,0,0.05);
    text-transform: uppercase;	
}

#sml_subscribe_widget .btn:hover {
    background: #2c71ae;
    background: -webkit-gradient(linear,left bottom,left top,color-stop(0,#2c71ae),color-stop(1,#2c71ae));
    background: -ms-linear-gradient(bottom,#2c71ae,#2c71ae);
    background: -moz-linear-gradient(center bottom,#2c71ae 0%,#2c71ae 100%);
    background: -o-linear-gradient(#2c71ae,#2c71ae);
	border-bottom: 1px solid;
    border-color: #2d608d #2a5b85 #275379;
    -webkit-backface-visibility: hidden;
}

I’d need further details to change the text, what are you looking to achieve?

On a side note, try the following in your Custom CSS plugin to help the spacing at the top of this page:

/* Archives */

.archive .site-content {
	padding-top: 2.67857em;;
}

Also, add the following to your Custom CSS to fix a small issue with WooCommerce button hover borders:

/* WooCommerce */

.woocommerce ul.products li.product a.button:hover {
    border-bottom: 1px solid;
    border-color: #2d608d #2a5b85 #275379;
}

alexrohner Feb 9, 2016 · 7:39 pm #3004

So the text that says, “never miss a new item” etc. I want that text to match the paragraph I have on the front page. This is what i want the text to look like: merchvintage.com

Andrew Misplon Puro Feb 9, 2016 · 7:53 pm #3005

Sure. The only difference is font size. You can add:

#sml_subscribe_widget .prepend {
	font-size: 14px;
}

How can i change the text style and color of this text?

Sign in to reply