WordPress.org

Ready to get started?Download WordPress

Forums

Magic Action Box
[resolved] Change size opt-in box (9 posts)

  1. daniellevdkem
    Member
    Posted 9 months ago #

    I've created a custom style using a background created Photoshop that includes the copy. I'd like to adjust the size of the container to fully show the image. Right now, because I don't have any copy input from the plug-in the container is automatically resized around the button and email fields.

    Can you tell me what css I need to adjust the height to 300 px?

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

  2. Ryann Micua
    Member
    Plugin Author

    Posted 9 months ago #

    hi danielle can you put a link to your web page?

  3. daniellevdkem
    Member
    Posted 9 months ago #

    Hi Ryann,

    I've added the opt-in box at the end of a post here (http://www.daniellevandekemenade.com/hello-and-welcome-to-my-world-a-preface/)

    Another problem I've noticed is that the box dissappears if you go my blog - in other words, the box only shows when you go to the direct link of the post, and dissapears when you see the post in a list of other posts through the blog link. Any idea why that could be?

  4. Ryann Micua
    Member
    Plugin Author

    Posted 9 months ago #

    Hi Danielle,

    There is currently no way to add anything after the list of blog posts via a plugin - that I know of. Not an action box, not social sharing or anything.

    right now, only option would be to add it by editing the theme, or if the theme has hooks available then through that.

    of course if that's changed I'd be happy to know.

  5. daniellevdkem
    Member
    Posted 9 months ago #

    Thanks Ryann.

    Can you still help me with the right CSS code to make the opt-in box 300 px in height?

  6. Ryann Micua
    Member
    Plugin Author

    Posted 9 months ago #

    Edit your custom style. Go to "Others" tab and paste the following css into the Custom CSS field:

    .userstyle-1.magic-action-box .mab-main-action-wrap form{ float: right; margin: 208px 0 0 0; }
    .userstyle-1.magic-action-box .mab-main-action-wrap .mab-field{ margin-bottom: 0; }

    Adjust the 208px value as you see fit. this will move the form up or down.

    Then, go to "Form Elements" tab, in the Submit Button section, set the Width field to something like 100. This is to move the input fields so it doesn't cover the face in the photo.

  7. daniellevdkem
    Member
    Posted 9 months ago #

    Wow, this is EXACTLY what I neeed - thanks a lot Ryann, will go rate your plugin as wonderful RIGHT now!

  8. JessieMay
    Member
    Posted 7 months ago #

    Hi Ryann,

    Thank you for your helpful directions how to adjust the size of the magic action box. I'm creating a similar form as Danielle (creating my own image with text and uploading it as a background image).

    Your directions worked great for my first form. However I've tried to follow your directions, exactly the same way on a new form and I cannot get it to work. I even made a copy of the style of the form that worked, just to make sure I didn't miss anything, and still no luck.

    I'm using the first form I created as an email opt in box under blog posts. I want to create a similar form on my homepage. The difference is that I want the form to be quite large, similar to this one: http://www.melanieduncan.com.

    I thought all I'd have to do is adjust the 208px value, but that's not doing anything. I'm at a loss. It worked the first time, and I've tried to recreate the exact same thing and it won't work, I've been trying for hours.

    Any suggestions you have would be much appreciated.

    Thank you!

  9. Ryann Micua
    Member
    Plugin Author

    Posted 7 months ago #

    probably because you used something like:

    .userstyle-1.magic-action-box ....

    userstyle-1 will apply to first custom style you created. so for your 2nd style, use

    .userstyle-2.magic-action-box ...

    in the list of custom styles you created, just start counting from the top. or edit the style and look at the url for example:

    http://wp.dev/wp-admin/admin.php?page=mab-style-settings&mab-style-key=8

    The mab-style-key is "8". so in my custom css, I use:

    .userstyle-8.magic-action-box ...

Reply

You must log in to post.

About this Plugin

About this Topic