--- title: Style forms and pages with CSS description: "Change the look of Ultimate Membership Pro forms and pages with your own CSS: find the right class with your browser's developer tools and add the rules in the showcase's Custom CSS box." url: "https://ultimatemembershippro.com/docs/need-style-customization/" updated: "2026-10-18" category: Developers tags: - custom css - custom style - customisations - customization - showcases - style --- # Style forms and pages with CSS 10 minIntermediateUltimate Membership Pro 14.2+ In Ultimate Membership Pro, every showcase (the [login and registration forms](https://ultimatemembershippro.com/features/registration-login/), the Member Portal, the checkout and more) has a Custom CSS box. The rules you add there load together with that form or page, so you can match it to your brand without editing theme or plugin files. This guide shows where the Custom CSS boxes are, how to find the class of the element you want to change, and walks through one change from start to finish. Before you start - Basic CSS knowledge: selectors and properties. - A desktop browser with [developer tools](https://developer.chrome.com/docs/devtools/css) (Chrome, Firefox, Edge or Safari). - First pick the template closest to your design in the showcase; see [Customize what members see (Showcases)](https://ultimatemembershippro.com/docs/step-5-manage-showcases/). ## Where the Custom CSS boxes are Showcases Ultimate Membership Pro*›*Showcases: Registration Form, Login Form, Subscriptions Plan, Checkout Page, Member Portal, Profile Form, Thank You Page and Members Directory each have a Custom CSS box. Inside Lockers The locker templates have their own Custom CSS box. Modules Modules with a front-end part have one too, for example Register Lite, Membership Card, Membership Badges, Invoice and List Access Posts. WordPress login page wp-login.php is styled in Settings › Admin Workflow; see [Style the WordPress login page](https://ultimatemembershippro.com/docs/customize-wp-login-style/). ## Find the class of the element 1. Open the page with the form in a private window, logged out. Logged-in users don't see the login and registration forms. 2. Right-click the element you want to change and choose **Inspect**. 3. In the Elements (or Inspector) panel, read the classes of the element and of its wrapper, and the rules already applied to it in the Styles panel. Login form Wrapper class with the template number, for example `.ihc-login-template-11`. Rows use `.impu-form-line-fr`, the button row `.impu-form-submit`. Registration form `.iump-register-form` plus the template class, for example `.ihc-register-9`. Member Portal `#ihc_account_page_wrapp`; the footer is `.ihc-user-page-footer`. Checkout page `.ihc-checkout-page-wrapp`. ## Add the CSS to the showcase 1. Go to Ultimate Membership Pro*›*Showcases*›*Login Form (or the showcase of your form). 2. Scroll to the **Custom CSS** box and type your rules. 3. Click Save Changes. [![Custom CSS card of the Login Form showcase with a code editor holding a rule for .ihc-login-template-11 .impu-form-submit input[type=submit]: background and border color #0f766e, white text, border radius 999px](https://ultimatemembershippro.com/wp-content/uploads/2026/10/ump-custom-css-01-login-custom-css.png)](https://ultimatemembershippro.com/wp-content/uploads/2026/10/ump-custom-css-01-login-custom-css.png) The Custom CSS box of the Login Form showcase. The rule from the example ``` .ihc-login-template-11 .impu-form-submit input[type=submit] { background: #0f766e !important; border-color: #0f766e !important; color: #fff !important; border-radius: 999px !important; } ``` ## Check the result 1. Reload the page in the private window. 2. If nothing changes, clear your caching or optimization plugin's cache and look again. [![Login form with a rounded teal Log In button outlined in orange](https://ultimatemembershippro.com/wp-content/uploads/2026/10/ump-custom-css-02-login-result.png)](https://ultimatemembershippro.com/wp-content/uploads/2026/10/ump-custom-css-02-login-result.png) The Log In button after the change. Good to know - Start every rule with the wrapper class (.ihc-login-template-11, #ihc_account_page_wrapp …) so it only affects that form. - If the plugin's own rule wins, make yours [more specific](https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity), or add !important to that declaration. - Switching to another template changes the wrapper class. Update your selectors after a template change. Tip - CSS that should apply across the whole site belongs in your theme's Additional CSS; keep form-specific rules in the showcase so they travel with it. ## Example: a brand-colored login button **Coaching Club**The Log In button gets the club's teal color and round corners. **Showcase** : Login Form, template 11 **Element found with Inspect** : .impu-form-submit input[type=submit] **Rule** : background and border #0f766e, white text, border-radius 999px **Saved in** : Login Form › Custom CSS ## Troubleshooting Why does my custom CSS have no effect? Inspect the element and look for your rule in the Styles panel. Missing: check the selector and that you saved the right showcase. Crossed out: another rule is more specific, so add the wrapper class or !important. Also clear any cache or CSS optimization plugin. Why do I see the change but my visitors don't? A page cache or CDN still serves the old page. Purge it after saving. Can I edit the plugin's CSS files instead? No. Plugin files are replaced on every update, so your changes would be lost. Use the Custom CSS boxes or your theme. ## What's next [**Override templates in your theme**Change the HTML, not just the look.](https://ultimatemembershippro.com/docs/how-to-create-your-own-templates/)[**Set up the login form**Templates and options of the login form.](https://ultimatemembershippro.com/docs/set-up-the-login-form/)[**Set up the registration form**Templates and fields of the registration form.](https://ultimatemembershippro.com/docs/set-up-the-registration-form/)[**Set up the Member Portal**Templates and tabs of the account area.](https://ultimatemembershippro.com/docs/set-up-the-member-portal/)