Title: Customize Magic Action Box
Last modified: August 21, 2016

---

# Customize Magic Action Box

 *  [georgelizos](https://wordpress.org/support/users/georgelizos/)
 * (@georgelizos)
 * [12 years, 4 months ago](https://wordpress.org/support/topic/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: [http://georgelizos.com/?p=1294](http://georgelizos.com/?p=1294))
 * [http://i59.photobucket.com/albums/g281/one_star_show/gabby-opt-in.jpg](http://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](https://wordpress.org/support/users/bcworkz/)
 * (@bcworkz)
 * [12 years, 4 months ago](https://wordpress.org/support/topic/customize-magic-action-box/#post-4761774)
 * 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](http://codex.wordpress.org/Child_Themes)
   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](https://wordpress.org/support/users/georgelizos/)
 * (@georgelizos)
 * [12 years, 4 months ago](https://wordpress.org/support/topic/customize-magic-action-box/#post-4761779)
 * 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.

 * In: [Hacks](https://wordpress.org/support/forum/plugins-and-hacks/hacks/)
 * 2 replies
 * 2 participants
 * Last reply from: [georgelizos](https://wordpress.org/support/users/georgelizos/)
 * Last activity: [12 years, 4 months ago](https://wordpress.org/support/topic/customize-magic-action-box/#post-4761779)
 * Status: not resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics