Customize Magic Action Box

  • Hello,

    I’m trying to customize my optin box, and I need some help with the coding as I have no experience with it.

    As you can see in the example in the following link, I would like to have the “First Name” and “Email” written within the form rather than on the top, and I’d like the forms to appear on the right hand side of the box. (You can see my current optin box at the bottom of the article: https://georgelizos.com/?p=1294)

    https://i59.photobucket.com/albums/g281/one_star_show/gabby-opt-in.jpg

    I would also like to change the font style, but I’m not sure if the font I’m interested in is supported. Is there a way I could upload a new font style?

    Thank you in advance for your guidance. I appreciate it.

Viewing 2 replies - 1 through 2 (of 2 total)
  • Moderator bcworkz

    (@bcworkz)

    You can move the fields about within their container by using CSS rules. Use float:right; to move them to the right. Use clear:right; on the first name field so the fields stack vertically. Use position:relative; top:##em; to move the elements vertically. Replace ## with a numeric value for the distance to move. Positive to move down, negative to move up. Each ’em’ is roughly the size of the letter ‘M’ at the current font size. Use display:none; to hide other fields.

    Learn to use the CSS inspector feature of your browser to experimentally try various rules before committing the rules to a proper CSS file.

    If the font you are interested in is in one of the CSS3 @font-face supported formats, then yes, it can be uploaded. Then point to the uploaded file in the @font-face property on your CSS file.

    To customize the CSS of your theme, you should create a child theme to contain your changes. Learning to code CSS can be challenging, but it is well worth learning at least the basics. Furthermore, WP theme CSS is typically quite confusing. Your browser’s CSS inspector becomes an essential tool for confusing WP CSS.

    Thread Starter georgelizos

    (@georgelizos)

    Thank you! That was very helpful. ??

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Customize Magic Action Box’ is closed to new replies.