e-newsletter subscribe formatting

Hi, I am not familiar with CSS and I need to be able to format the subscribe form. The site shows the default subscribe button which came with the Spirit theme and the one I added from E-Newsletter. How do I format these to centre, change the button size and colours, change the input boxes size and padding, and if I only want the email address to match the default button in style? I need a tutorial and the element names used in e-newsletter.

  • Kris Tomczyk

    Hi Jim,

    To add css to your site use Custom CSS plugin. You can find it here:
    https://pl.wordpress.org/plugins/simple-custom-css/
    or here:
    https://pl.wordpress.org/plugins/custom-css-js/
    Second one allow also add some custom JS in future if necessary.

    option 1 - Each under each other (full responsive)

    /* main newsletter DIV */
    .e-newsletter-widget {
    	width:100%;
    	margin:0 auto;
    	overflow:hidden;
    	background:#f5f5f5; /*optional*/
    	border:1px solid #ddd; /*optional*/
    }
    
    /* error messages */
    #message { /*choose one of the option and change values with !important to overwrite default settings*/
    	color:#000000 !important;
    	display:none !important;
    	background-color: #FFFFE0 !important;
    	border-color: #E6DB55 !important;
    	margin: 5px 0 15px !important;
    	-moz-border-radius: 3px 3px 3px 3px !important;
    	border-style: solid !important;
    	border-width: 1px;
    	padding: 5px !important;
    }
    
    /* main newsletter FORM reset settings */
    #subscribes_form {
    	padding:0 !important;
    	margin:0 !important;
    }
    
    /*form paragraphs*/
    .e-newsletter-widget #subscribes_form p {
    	display:block;
    	overflow:hidden;
    	font-size:14px;
    	text-align:center; /*optional*/ /*options here: left, center, right*/
    }
    
    /*Email, Name text*/
    .e-newsletter-widget #subscribes_form label {
    	display:block;
    	overflow:hidden;
    	padding:0 0 3px 0; /*optional*/
    
    }
    
    /*Email, Name fields*/
    .e-newsletter-widget #subscribes_form input {
    	width:94%;
    	padding:2%;
    	font-size:18px;
    	margin:0 0 10px 0;
    	text-align:center; /*optional*/ /*options here: left, center, right*/
    	background:#fff; /*optional*/
    	border:1px solid #ddd; /*optional*/
    	-webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; /*optional*/
    }
    
    /*Subscribe button*/
    .e-newsletter-widget #subscribes_form input#new_subscribe {
    	width:98%;
    	padding:10px 5px;
    	cursor:pointer;
    	font-size:18px;
    	color:#fff;
    	font-weight:bold; /*optional*/
    	background:#3366cc; /*optional*/
    	border:1px solid #fff; /*optional*/
    	-webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; /*optional*/
    }

    ############################################

    option 2 - next to each other (+ responsive)
    for option nr 2 you need to go to your FTP, find /wp-content/plugins/e-newsletter/ folder, there is a file "e-newsletter.php". Edit this file, find line 2429 - delete <br/> , and add </p><p>

    /* main newsletter DIV */
    .e-newsletter-widget {
    	width:100%;
    	margin:0 auto;
    	overflow:hidden;
    	background:#f5f5f5; /*optional*/
    	border:1px solid #ddd; /*optional*/
    }
    
    /* error messages */
    #message { /*choose one of the option and change values with !important to overwrite default settings*/
    	color:#000000 !important;
    	display:none !important;
    	background-color: #FFFFE0 !important;
    	border-color: #E6DB55 !important;
    	margin: 5px 0 15px !important;
    	-moz-border-radius: 3px 3px 3px 3px !important;
    	border-style: solid !important;
    	border-width: 1px;
    	padding: 5px !important;
    }
    
    /* main newsletter FORM reset settings */
    #subscribes_form {
    	padding:0 !important;
    	margin:0 !important;
    }
    
    /*form paragraphs*/
    .e-newsletter-widget #subscribes_form p {
    	float:left;
    	width:33%;
    	font-size:14px;
    	text-align:left; /*optional*/ /*options here: left, center, right*/
    }
    
    /*Email, Name text*/
    .e-newsletter-widget #subscribes_form label {
    	display:block;
    	overflow:hidden;
    	padding:0 0 3px 0; /*optional*/
    
    }
    
    /*Email, Name fields*/
    .e-newsletter-widget #subscribes_form input {
    	width:94%;
    	padding:0 2%;
    	height:45px;
    	line-height:45px;
    	font-size:18px;
    	text-align:left; /*optional*/ /*options here: left, center, right*/
    	background:#fff; /*optional*/
    	border:1px solid #ddd; /*optional*/
    	-webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; /*optional*/
    }
    
    /*Subscribe button*/
    .e-newsletter-widget #subscribes_form input#new_subscribe {
    	float:right;
    	width:98%;
    	padding:0 15px;
    	height:45px;
    	cursor:pointer;
    	font-size:18px;
    	color:#fff;
    	text-align:center;
    	margin-top:27px; /*margin*/
    	font-weight:bold; /*optional*/
    	background:#3366cc; /*optional*/
    	border:1px solid #000; /*optional*/
    	-webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; /*optional*/
    }
    
    @media all and (min-width:320px) and (max-width: 679px) {
    
    	/*form paragraphs*/
    	.e-newsletter-widget #subscribes_form p {
    		float:none;
    		width:auto;
    
    	}
    
    	/*Subscribe button*/
    	.e-newsletter-widget #subscribes_form input#new_subscribe {
    		float:none;
    	}
    
    }

    * For other forum users:
    Much depends from your theme. Theme can have its own styles that contains how to form elements such as buttons or fields behaves.

    If something goes wrong you can give me your support access. To do that you can read this https://premium.wpmudev.org/docs/getting-started/getting-support/#chapter-4

    Kind Regards,
    Kris

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.