Dprime Login Customizer v3.3.0

Brand the WordPress login page with your logo, colours, and layout style. 10 colour themes, 5 layout presets, live preview, and custom CSS support.

Installation

  1. Download the plugin zip from my.dprime.au or the plugin page.
  2. In your WordPress admin go to Plugins > Add New > Upload Plugin.
  3. Choose the zip file and click Install Now, then Activate.
  4. Go to Dprime > Login Customizer in the sidebar (or Login Customizer as a standalone item if Dprime Core is not installed).

Quick start

  1. Click a colour theme chip in the row at the top of Settings. All colour fields fill in at once.
  2. Click a layout style chip below it. Card corners, button shape, and shadow level update.
  3. Adjust any individual setting below the preset bar. The live preview on the right updates as you go.
  4. Click Save settings at the bottom of the preview pane.
  5. Visit Preview login page (top right of the page) to see the result in a real browser tab.

Colour themes

Each theme sets the background, card, form fields, button, and link colours at once. Click any chip to apply it. You can still adjust individual colours afterwards.

ThemeCharacter
DprimeNavy and blue, the default Dprime look
DarkNear-black, minimal feel
MinimalWhite and light grey, close to WordPress default
WarmAmber and brown tones, inviting
ForestDeep greens, earthy
RoseRose and pink tones, elegant
SlateCool blue-grey
IndigoDeep purple, modern
MidnightRich midnight blue
CreamWarm off-white, soft

Layout styles

StyleCard radiusButton radiusShadow
Standard10px8pxSubtle
Rounded20px12pxOn
Pill buttons10px999px (pill)Off
Sharp00Off
Floating24px8pxLarge

Settings reference

SettingWhat it does
Logo modeWordPress default, custom upload, or none (hidden)
Custom logoUpload your own logo image. Square PNG or SVG works best.
Logo sizeSlider from 40px to 240px width
Logo link URLWhere clicking the logo goes. Leave blank to keep the default WP homepage link.
Background typeSolid colour, gradient (two stops, 135 deg), or image
Background image scalingCover, Contain, or Tile
Card backgroundBackground colour of the login form card
Card radiusCorner rounding on the card (set by layout preset, adjustable)
Card shadowToggle drop shadow on the card
Label colourColour of field labels (Username, Password)
Input borderBorder colour of text inputs
Focus colourInput border colour when focused
Button backgroundLogin button fill colour
Button textLogin button text colour
Button radiusCorner rounding on the button (set by layout preset, adjustable)
Button widthAuto (fits content) or Full width
Link colourColour of the Lost your password and Back to site links
Custom CSSAdditional CSS injected into wp-login.php after plugin styles

Custom CSS

The Custom CSS textarea at the bottom of Settings lets you add any additional styles to the login page. It runs after the plugin styles so it can override anything. Useful targets:

body.login          { }
#loginform          { }
.login h1           { }
.login input        { }
.wp-core-ui
  .button-primary   { }
#nav a,
#backtoblog a       { }

FAQ

Does this affect any other page on my site?

No. The plugin only outputs styles on wp-login.php and its variants (lost password, registration). The rest of your site is completely untouched.

What happens if I deactivate the plugin?

The login page reverts to the default WordPress styling immediately. Your settings are saved and come back if you reactivate.

Can I reset to defaults without losing everything?

The Reset to defaults button clears all settings and reverts to the Dprime theme. A confirmation prompt prevents accidents. Your uploaded logo and background image files stay in the Media Library.

The preview does not match what I see at wp-login.php.

Hard refresh the login page (Ctrl+Shift+R or Cmd+Shift+R) to bypass any browser or server cache. If you are using a caching plugin, clear its cache after saving.

Override classes

These classes are stable across versions and safe to target in a custom stylesheet.

/* Page wrapper */
.dp-lc-page              { }

/* Preset bars */
.dplc-presets-bar        { }
.dplc-chip               { }
.dplc-chip.is-on         { }
.dplc-style-chip         { }
.dplc-style-chip.is-on   { }

/* Settings accordion */
.dplc-panel              { }
.dplc-panel-hd           { }
.dplc-panel-body         { }

/* Inputs */
.dplc-cp-wrap            { /* colour picker wrapper */ }
.dplc-range              { /* slider element */ }
.dplc-code               { /* custom CSS textarea */ }

/* Preview */
.dplc-preview-col        { }
.dplc-preview-frame      { /* the iframe element */ }