Changing Appearance of the Magic Action Box

Hi Ken, I can see that you are using one of the bundled designs. You’ll need to edit those by adding your own css to the Custom CSS box.

For the header size and font, add the following:

.mabstyle-dark.magic-action-box.mab-id-31770 .mab-heading{ font-size: 30px; font-family: Arial, sans-serif; }

Adjust the font=size and font-family as needed.

For the subscribe box colors:

.mabstyle-dark.magic-action-box.mab-id-31770 form input[type="submit"]{ background: #000; color: #eee; border: 2px solid red; }

Again, the values I’ve entered here are just sample values. Adjust as needed.

Hi Ryann, I’ve customized the CSS as far as I can using the following code:

.mabstyle-dark.magic-action-box.mab-id-31770 .mab-heading{ font-size: 20px; color: #FFFFFF; font-family: Verdana, Arial, sans-serif }

.mabstyle-dark.magic-action-box.mab-id-31770 form input[type=”submit”]{ background: #4444FF; color: #FFFFFF; border: 0px color: solid red; }

You can see the result on the link:

https://focusingonwildlife.com/news/why-is-the-nuthatch-so-aggressive/

There are still a couple of issues where I hope you can help:

1) The header “Get E-Mail Updates” appears to be bold and does not match the header <h3>Leave a Comment</h3> directly below.

2) the enter your email box has a white background – how can I make this #333333 with “enter your email” having a color #CCCCCC ?

3) the background color of the Magic Box appears to have a color gradient with #494949 at the top changing gradually to #222222 at the bottom. How can I eliminate the gradient and have a single background color?

Thanks in advance for your advice.

Hi Ken,

Try this:

/* Targets the main container */
.mabstyle-dark.magic-action-box{ background: #000; }

/* Targets the header text */
.mabstyle-dark.magic-action-box.mab-id-31770 .mab-heading{ font-size: 20px; color: #FFFFFF; font-family: Verdana, Arial, sans-serif; font-weight: normal; }

/* Targets the submit button */
.mabstyle-dark.magic-action-box.mab-id-31770 form input[type="submit"]{ background: #4444FF; color: #FFFFFF; border: 0px color: solid red; }

/* Targets the email input field */
.mabstyle-dark.magic-action-box.mab-id-31770 form .mab-field input[type="text"]{ background: #333 !important; color: #ccc !important; }

Hi Ryann

Many thanks for the great support.
Your code tips worked perfectly and my Magic Action Box is working fine.