Subscribe Section to Look More Like the one on The Spirit Theme

That's just about it! :wink:

Here is a link: http://puregoldfish.com/?page_id=2846&preview=true

(Obviously I'm not going to take your graphic, it's just a placeholder.)

I am hoping someone will be able to provide the CSS To make that subscribe form look like you WANT to put your email in... exactly like the one on the Spirit theme but without the name. Just want the email.

Thanks!!!

  • Luís

    Hi @Meredith,

    I hope had been good today!

    If you are using a shortcode, try this CSS code:

    .sbe-shortcode-subscribe-form, div.sbe-shortcode-form-submit-container{
    
    	display: inline;
    }
    
    #sbe-shortcode-subscribe-form > br {
        display: none;
    }
    
    input.sbe-shortcode-form-field.sbe-shortcode-email-field.sbe-form-field{
        background: #ffffff none repeat scroll 0 0;
        border: 1px solid #d0d0d0;
        box-sizing: border-box;
        color: #707070;
        float: left;
        font: 16px Open Sans,Arial;
        margin-right: 10px;
        outline: 0 none;
        padding: 12px 10px;
       width: 60%;
    
    }
    
    input.sbe-shortcode-form-submit{
        -moz-border-bottom-colors: none;
        -moz-border-left-colors: none;
        -moz-border-right-colors: none;
        -moz-border-top-colors: none;
        background: #69a8a6 none repeat scroll 0 0;
        border-color: -moz-use-text-color -moz-use-text-color #548685;
        border-image: none;
        border-radius: 4px;
        border-style: none none solid;
        border-width: 0 0 3px;
        color: #ffffff;
        display: inline;
        float: left;
        font: 24px Open Sans,Arial;
        margin-top: 0;
        padding: 5px 25px;
        text-decoration: none;
    }

    This will put the form in one line with the same styles of Spirit theme.

    If you don't know, you should always avoid change the original CSS files, in order to don't lose it all when you make an update.

    So, we recommend use a plugin to add custom CSS:

    https://wordpress.org/plugins/simple-custom-css/

    I hope this information has been helpful. If I can help you in this or other questions, please let me know!

    Cheers, Luís

  • Luís

    Hi @Meredith,

    I hope had been good today!

    To give the darker hover effect like the Spirit Theme:

    input:hover.sbe-shortcode-form-submit{
    	background: #548685 none repeat scroll 0 0;
    	transition: all 0.3s ease 0s;
    }

    To remove the text "Email address":

    div.sbe-shortcode-form-field-title{
    	display: none;
    }

    Unfortunately to change the text "ex: someone@mydomain.com" you will need to change the placeholder of the input element in the plugin file. This is the file that you will change the placeholder: wp-content/plugins/subscribe-by-email/front/shortcode.php

    Then find this line:

    <input type="email" class="sbe-shortcode-form-field sbe-shortcode-email-field sbe-form-field"  name="subscription-email" placeholder="<?php _e( 'ex: someone@mydomain.com', INCSUB_SBE_LANG_DOMAIN )

    and change to this:

    <input type="email" class="sbe-shortcode-form-field sbe-shortcode-email-field sbe-form-field"  name="subscription-email" placeholder="<?php _e( 'Your Email', INCSUB_SBE_LANG_DOMAIN )

    Use FTP access to change the file, in order to have a way to go back if something happens.

    I hope this information has been helpful. If I can help you in this or other questions, please let me know!

    Cheers, Luís

  • Luís

    Hi @Meredith,

    excuse my forgetfulness, replace the code I have provided for this and tell me if do what is desired:

    .sbe-shortcode-subscribe-form{
        display: flex;
        margin: 0 auto;
        width: 80%;
    }
    
    #sbe-shortcode-subscribe-form > br {
        display: none;
    }
    
    div.sbe-shortcode-form-field-title{
    	display: none;
    }
    
    input.sbe-shortcode-form-field.sbe-shortcode-email-field.sbe-form-field{
        background: #ffffff none repeat scroll 0 0;
        border: 1px solid #d0d0d0;
        box-sizing: border-box;
        color: #707070;
        font: 16px Open Sans,Arial;
        margin-right: 10px;
        outline: 0 none;
        padding: 12px 10px;
    }
    
    input.sbe-shortcode-form-submit{
        -moz-border-bottom-colors: none;
        -moz-border-left-colors: none;
        -moz-border-right-colors: none;
        -moz-border-top-colors: none;
        background: #69a8a6 none repeat scroll 0 0;
        border-color: -moz-use-text-color -moz-use-text-color #548685;
        border-image: none;
        border-radius: 4px;
        border-style: none none solid;
        border-width: 0 0 3px;
        color: #ffffff;
        font: 24px Open Sans,Arial;
        margin-top: 0;
        padding: 5px 25px;
        text-decoration: none;
    }
    
    input:hover.sbe-shortcode-form-submit{
    	background: #548685 none repeat scroll 0 0;
    	transition: all 0.3s ease 0s;
    }
  • Luís

    Hi @Meredith,

    I hope had been good today!

    I make some changes in the code, please try this new one:

    .sbe-shortcode-subscribe-form{
    
    	display: block;
            margin: 0 auto;
    	text-align: center;
    }
    
    #sbe-shortcode-subscribe-form > br, div.sbe-shortcode-form-field-title {
    	display: none;
    }
    
    input.sbe-shortcode-form-field.sbe-shortcode-email-field.sbe-form-field{
    	background: #ffffff;
            border: 1px solid #d0d0d0;
    	box-sizing: border-box;
            color: #707070;
    	font: 16px Open Sans,Arial;
      	outline: 0 none;
      	padding: 12px 10px;
    	width: 60%;
    }
    
    div.sbe-shortcode-form-submit-container{
    	display: inline-block;
    	margin-top:10px;
    }
    
    input.sbe-shortcode-form-submit{
    	background: #69a8a6;
    	border-color: #548685;
    	border-radius: 4px;
    	border-style: solid;
    	border-width: 0 0 3px;
    	color: #ffffff;
    	font: 24px Open Sans,Arial;
    	margin-top: 0;
    	padding: 5px 25px;
    	text-decoration: none;
    }
    
    input:hover.sbe-shortcode-form-submit{
    	background: #548685;
    	transition: all 0.3s ease 0s;
    }

    I hope this information has been helpful. If I can help you in this or other questions, please let me know!

    Cheers, Luís

  • Luís

    Hi @Meredith,

    I hope had been good today!

    Try add this CSS code:

    .e-newsletter-widget {
    	display: inline-block;
    	width: 100%;
    }
    .e-newsletter-widget-screen p {
    	display: inline
    }
    
    #e_newsletter_email {
    	background: #ffffff;
    	border: 1px solid #d0d0d0;
    	color: #707070;
    	display: inline-block;
    	font: 16px Open Sans,Arial;
    	height: 40px;
      	padding: 12px 10px;
    	width: 40%;
    }
    
    .enewletter_widget_submit{
    	background: #69a8a6;
    	border-color: #548685;
    	border-radius: 4px;
    	border-style: solid;
    	border-width: 0 0 3px;
    	color: #ffffff;
    	line-height: 25px;
    	padding: 5px 25px;
    	text-decoration: none;
    }

    If you don't know, you should always avoid change the original CSS files, in order to don't lose it all when you make an update.

    So, we recommend use a plugin to add custom CSS:

    https://wordpress.org/plugins/simple-custom-css/

    I hope this information has been helpful. If I can help you in this or other questions, please let me know!

    Cheers, Luís

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.