Support/Ultra Theme/How can i change the text style and color of this text?

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

Tagged: 

  • Author
    Posts
  • February 9, 2016 at 4:29 am #3002

    alexrohner
    Participant

    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.

    February 9, 2016 at 6:38 pm #3003

    Andrew Misplon
    Keymaster

    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;
}
    February 9, 2016 at 7:39 pm #3004

    alexrohner
    Participant

    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

    February 9, 2016 at 7:53 pm #3005

    Andrew Misplon
    Keymaster

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

    #sml_subscribe_widget .prepend {
	font-size: 14px;
}
  • Author
    Posts
Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.

Scroll to top