Backend Designer

A powerful tool that allows you to customize and style different areas of the WordPress admin area. With this extension, you can easily change the look and feel of the backend to match your brand, giving your site a more professional and polished appearance.

Backend Designer

Features

  • Login Page Design: Customize the login page of your WordPress site.
  • Custom Login URL: Change the login URL of your WordPress site for added security.
  • Dashboard: Customize the dashboard of your WordPress site using a Bricks Template / Page.
  • Navigation: Change the look of the navigation menu in the WordPress admin area.
  • Pages: Design the look of the pages, for example text and link colors, background colors, etc.
  • Buttons: Customize the look of the buttons.
  • Forms: Design the look of the forms.
  • Tables: Design the look of the tables.
  • Footer: Customize the WordPress Footer and overwrite default text.
  • Admin Bar: Customize the WordPress Admin Bar.

How to Use

After activating the extension, you will find a new menu item Backend Designer in the Bricksforge settings page. From there you can start customizing the different areas of the WordPress admin area.

Important: You need to activate the styles you want to use in the sidebar under Activate Styles. Otherwise the styles will not be applied. This way you can easily activate and deactivate styles without having to delete them.

Note: For all Color Picker controls, you can also insert a CSS Variable. For example the variable: --color-primary. Important: Be sure to load the CSS Variables in the admin area. Otherwise the colors will not be displayed.

Login Page

Customize the look of the login page to match your brand. You can define the following settings:

Custom Login URL

Change the login URL of your WordPress site for added security. Enter the path without slash. Example: my-backend. The new login URL will be https://example.com/my-backend.

General

  • Text Color: Change the text color of the login page.
  • Link Color: Change the link color of the login page.
  • Link Color Hover: Change the link hover color of the login page.

Background

  • Background Color: Change the background color of the login page.
  • Background Color 2 (For Gradient): Change the background color 2 of the login page. This is used for the gradient background. If empty, no gradient will be used.
  • Background Image: Change the background image of the login page. If empty, no image will be used.
  • Background Image Overlay: Change the background image overlay of the login page. This is useful to darken the background image. If empty, no overlay will be used.

Login Box

The Login Box is the box that contains the login form.

  • Box Color: Change the box background color of the login box.
  • Box Width: Change the box width of the login box. Default: 320px.
  • Box Padding: Change the box padding of the login box. Default: 25px.
  • Box Border Radius: Change the box border radius of the login box. Default: 0px.
  • Glassmorphism Effect: Enable or disable the glassmorphism effect of the login box.
  • Logo: Change the logo of the login page. If empty, the default WordPress logo will be used.
  • Logo Size: Change the logo size of the login page. Default: 84px.
  • Negative Margin Top: Change the negative margin top of the logo. This is useful if you want to move the logo up or down. Default: 0px.
  • Remove Logo Link: Remove the link from the logo. If enabled, the logo will not be clickable.

Buttons

  • Button Color: Change the button color of the login page.
  • Button Hover Color: Change the button hover color of the login page.
  • Button Text Color: Change the button text color of the login page.

Forms

  • Forms Background Color: Change the form background color of the login page.
  • Forms Text Color: Change the form text color of the login page.
  • Forms Border Color: Change the form border color of the login page.
  • Forms Font Size: Change the form font size of the login page.
  • Forms Padding: Change the form padding of the login page.

Others

  • Remove Logo: Remove the logo from the login page.
  • Center Box: Center the login box on the page.
  • Remove Language Switcher: Remove the language switcher from the login page.
  • Remove “Back To Website”: Remove the “Back To Website” link from the login page.
  • Remove Password Reset: Remove the password reset link from the login page.
  • Remove “Remember Me”: Remove the “Remember Me” checkbox from the login page.

Dashboard

Customize the look of the dashboard to match your brand using Bricks Templates or Pages. You can define the following settings:

  • Use Bricks Template/Page as Dashboard: If enabled, the Bricks Template/Page will be used as the dashboard. If disabled, the default WordPress dashboard will be used.
  • Bricks Template/Page: Select the Bricks Template/Page that should be used as the dashboard.
  • Link Handling: How links should be handled?
    • Open links in a new page: If enabled, all links will be opened in a new page.
    • Open Links inside the template frame: If enabled, all links will be opened inside the template frame. This is useful if you want to use the dashboard as a landing page for your clients.

Tip: Using the Link Handling Open Links inside the template frame, you could create a dashboard that contains links to different areas of your site. This way you could create a multi page dashboard for your clients with a custom admin navigation.

Customize the look of the navigation menu in the WordPress admin area. You can define the following settings:

  • Top Level Background: Change the background color of the top level navigation items.
  • Top Level Text: Change the text color of the top level navigation items.
  • Sub Level Background: Change the background color of the sub level navigation items.
  • Sub Level Text: Change the text color of the sub level navigation items.
  • Hover / Active: Navigation Item Background: Change the background color of the navigation item when hovered or active.
  • Hover / Active: Navigation Item Text: Change the text color of the navigation item when hovered or active.

Pages

Customize the look of the pages, for example text and link colors, background colors, etc. You can define the following settings:

  • Body Background: Change the background color of the body.
  • Content Background: Change the background color of the content.
  • Content Background Variant: Change the background color of the content variant.
  • Text Color: Change the text color.
  • Link Color: Change the link color.
  • Dividers Color: Change the color of the dividers.

Buttons

Customize the look of the buttons. You can define the following settings:

Default Button

  • Background Color: Change the background color of the default button.
  • Text Color: Change the text color of the default button.

Primary Button

  • Background Color: Change the background color of the primary button.
  • Text Color: Change the text color of the primary button.

Forms

Customize the look of the forms. You can define the following settings:

  • Background Color: Change the background color of the forms.
  • Text Color: Change the text color of the forms.
  • Border Color: Change the border color of the forms.
  • Accent Color: Change the accent color of the forms.

Tables

Customize the look of the tables. You can define the following settings:

  • Even Color: Change the even color of the tables. This is the background color of the even rows.
  • Odd Color: Change the odd color of the tables. This is the background color of the odd rows.

Customize the look of the footer. You can define the following settings:

  • Replace Footer Text: Replace the footer text “Thank you for creating with WordPress” with your own text.
  • Replace WordPress Version Text: Replace the WordPress version text “Version XY” with your own text.

Admin Bar

Customize the look of the admin bar. You can define the following settings:

  • Admin Bar Logo: Change the logo of the admin bar. If empty, the default WordPress logo will be used.
  • Logo Height: Change the logo height of the admin bar. Default: 30px.
  • Remove all Nav Items except Logo & User: Remove all navigation items except the logo and the user menu.
  • Replace ‘Howdy’: Replace the ‘Howdy’ text with your own text.

Exceptions

You can add exceptions if needed. This means, you can exclude certain pages from your design settings. This may be useful to avoid conflicts with other plugins.

To add an exception, enable Add Exceptions toggle. Clicking the + icon, you can add a new exception. You can add the following exceptions:

  • If URL contains: If the URL contains the specified string, the exception will be applied.
  • If URL is exactly: If the URL is exactly the specified string, the exception will be applied.

You can add one or more exceptions. If you add multiple exceptions, the exception will be applied for all exceptions that match.

Reset Settings

If you want to reset all settings, you can do this by clicking on the Reset ALL Settings To Default button. This will reset all settings of each category to the default values. Please note that this action is not reversible. You should use this feature with caution. After resetting the settings, you will need to additionally click on the Save Settings button to save the changes.