WordPress.org

Forums

Magic Action Box
[resolved] Changing Appearance of the Magic Action Box (5 posts)

  1. supertrooper2
    Member
    Posted 2 years ago #

    I've just installed Magic Action Box in conjunction with WYSIJA and must say how easy it was to install. At the moment I'm just testing the LITE version but would like to be able to customize the appearance of the box to match the site style. See example on the following link:

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

    I need to change the header size and font, the subscribe box color, the background coor and the border thickness and color.

    Please help.

    http://wordpress.org/extend/plugins/magic-action-box/

  2. Ryann Micua
    Member
    Plugin Author

    Posted 2 years ago #

    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.

  3. supertrooper2
    Member
    Posted 2 years ago #

    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:

    http://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.

  4. Ryann Micua
    Member
    Plugin Author

    Posted 2 years ago #

    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; }
  5. supertrooper2
    Member
    Posted 2 years ago #

    Hi Ryann

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

Topic Closed

This topic has been closed to new replies.

About this Plugin

  • Magic Action Box
  • Frequently Asked Questions
  • Support Threads
  • Reviews

About this Topic

Tags

No tags yet.