I have been trying in vain to give color to my subscription pop-up. I believe it must be something quite easy and straight-forward but, since I do not understand a thing about html, I really need your help. Below follows the code.

PS: I would like to have a strong border line in red, all the pop-up itself in black and the text in white.

#mc_embed_signup{background:#fff; clear:left; font:14px Helvetica,Arial,sans-serif; }

Text title

Text 1. Text 2. Name Email Address *

(function($) {window.fnames = new Array(); window.ftypes = new Array();fnames[1]='FNAME';ftypes[1]='text';fnames[0]='EMAIL';ftypes[0]='email';fnames[2]='LNAME';ftypes[2]='text';fnames[3]='ADDRESS';ftypes[3]='address';fnames[4]='PHONE';ftypes[4]='phone';fnames[5]='BIRTHDAY';ftypes[5]='birthday';fnames[6]='MMERGE6';ftypes[6]='imageurl';}(jQuery));var $mcj = jQuery.noConflict(true);


Simple CSS Styling

Add this to your CSS

 #mc_embed_signup {
    border:1px solid red;

Adjust to Your Preferences

You can adjust the border width by giving it a larger than 1px value, such as this:

border:8px solid red;

These are the colour values used. They are called Hexadecimals (Hex):

#fff = White

#000 = Black

| improve this answer | |
  • 1
    That is great, thanks a lot. And do you know how I make the margins bigger? Right now, for instance, the text, the "Name", "Email address" and subscribe button are touching the edge of the border. – Andreas Aug 30 '18 at 13:04
  • Your welcome Andreas :) You can use padding or margin. Padding is often the better option. For example: #mc_embed_signup {background:#000; color:fff; border:1px solid red; padding:20px;} If this answers your question, please concider upvoting and makeing as the correct answer via the tick. – Invariant Change Aug 30 '18 at 13:09
  • I've added padding to the answer I provided :) – Invariant Change Aug 30 '18 at 13:10
  • 1
    Perfect! Just a last question (promise): How do I give color to the subscribe button? I have tried this but it is not working...<div class="clear"><b><font color="white"><input id="mc-embedded-subscribe" class="button" name="subscribe" type="submit" value="Subscribe" /></b></font></div> – Andreas Aug 30 '18 at 13:13
  • #mc-embedded-subscribe button {background:blue; color:#fff;} – Invariant Change Aug 30 '18 at 13:15

Not the answer you're looking for? Browse other questions tagged or ask your own question.