Style WishList Member Registration Forms

Published: July 11, 2022By Sebastian

An in-depth walk-through of styling “Wishlist Member” registration forms using Microthemer. Watch the whole video if you want to get a proper feel for how to make design changes with Microthemer, both in general and specifically relating to Wishlist Member registrations forms.

If you want to take a shortcut, jump to the end of the video which explains how to import the premade design shown in the video. Working from a pre-made design template can save you time, but please bear in mind that it’s likely you will need to adjust some selectors for things to look the same – unless you are using the Twenty Twenty-Two theme. For some tips on that, watch the follow up video “Tweak the Wishlist Member octopus design to fit your theme“.

Get Microthemer

0:55 Microthemer workflow - quick example
1:00 Enlarge the Wishlist Member registration form fields
1:12 Advanced HTML & CSS inspection tools
2:12 Batch set your preferred CSS units
3:13 Style the Wishlist Member registration submit button
4:05 Microthemer edits are non-destructive - easily roll back
4:24 Changes are saved as a draft until published
4:29 Starting the design from scratch
6:00 Single page styles
6:18 Ensure targeting only affects the current page using the page-id option
6:29 Hide the header and footer elements
6:52 Select multiple elements by holding shift when clicking
7:33 Set the "display" property to "none" to hide an element
7:38 Flexible multi-page styling using custom body classes
8:04 Quirk - Wishlist Member handles form errors on a separate page
9:07 Use custom classes instead of a unique page-id body class
9:20 Enable support for custom classes
10:11 Set the custom field name to my_body_classes and the value to wishlistmember-registration-form
11:03 Set the custom class selector prefix in Microthemer
12:17 The main design changes
12:28 Set the page background color
12:56 Increase the page spacing
13:14 Create two columns for the form and image
15:24 Set the octopus man background-image using an ::after pseudo element
16:12 Set a partially transparent background color on the form
16:37 Give the form some padding and set box-sizing: border-box
17:48 Absolutely position tabs relative to the form with position: relative
20:08 Style the form tabs, including the active tab
24:50 Make the octopus man overlap the form a bit
25:12 Change the typography to a Google font in various weights
25:52 Style the signup and login form input fields with one selector
28:52 Center the submit button and clear the floated text on the login form
29:19 Set a drop shadow that follows the contours of the tabs
30:29 Re-target an existing selector (to extend the button styling)
32:17 Best practice tips
32:17 CSS Selector management
34:10 Create saved checkpoints using the history panel
34:51 Export your designs for backup and/or sharing
35:57 Reusing styles
36:32 Verify that our styles also affect the submission error page
36:32 Extend our styling to a silver membership form
40:18 Importing this pre-made registration form design
Close