Admin panel

Customize admin panel styles and contents

Customize admin panel colors, logos and other options.

Enable to customize admin panel sidebar colors and logo, admin topbar styles and admin panel footer info and credits.

On update:
Basic mode: New code will be generated to update the related partial SCSS file and all CSS will be compiled. Related theme mod will be updated.
Advanced mode: Code editor contents will be used to update the related partial SCSS file and all CSS will be compiled. Related theme mod will not be updated.

On reset:
Admin panel will reset to default styles.
Related partial SCSS file will reset to default template and all CSS compiled. Related theme mod will reset to default values.

Admin panel

Customize admin panel colors, logos and other options.

Enable to customize admin panel sidebar colors and logo, admin topbar styles and admin panel footer info and credits.

Admin panel customizer

Admin sidebar

Sidebar background color

Sidebar text color

Current menu background color

Current menu text color

Submenu background color

Submenu text color

Admin topbar

Topbar background color

Topbar text color

Admin footer

Footer custom text

HTML allowed. Use {{TAG}} to replace content: {{AUTHOR}} {{AUTHOR-URL}} {{THEME-NAME}} {{THEME-VERSION}} {{THEME-URL}} {{YEAR}}

dct-input-code-generator-customizer-admin-panel-basic

dct-debug-panel-action--name

dct-debug-panel-action--value

Admin panel

Customize admin panel colors, logos and other options.

Enable to customize admin panel sidebar colors and logo, admin topbar styles and admin panel footer info and credits.

Admin panel customizer

//////////////////////////////////////
// Customizer: Admin panel 2
/////////////////////////////////////
@import '_colors';

// Variables
/////////////////////////////
$admin-sidebar-bg-color: $primary-dark;
$admin-sidebar-text-color: #efefef;
$admin-sidebar-featured-bg-color: $primary-comp;
$admin-sidebar-featured-text-color: #ffffff;
$admin-sidebar-submenu-bg-color: $primary-lighter;
$admin-sidebar-submenu-text-color: #000000;

$admin-topbar-bg-color: $primary-lighter;
$admin-topbar-text-color: $primary-darker;


@mixin admin-sidebar-logo-image { 
   background-image: url("https://www.dctforwp.com/wp-content/uploads/2026/08/Logo-DCT-for-WP-no-labels-negatiu.svg");
   height: 80px;
}

@mixin admin-sidebar-logo-image-folded { 
   background-image: url("https://www.dctforwp.com/wp-content/uploads/2026/08/Logo-DCT-for-WP-favicon-negatiu.svg");
   height: 40px;
}



/////////////////////////////
///// Customizer Styles /////
/////////////////////////////


// Admin panel sidebar
/////////////////////////////
ul#adminmenu, #adminmenuback, #adminmenuwrap { background:$admin-sidebar-bg-color; }
ul#adminmenu {
	// Sidebar main menu item
	a { color:$admin-sidebar-text-color; }
	div.wp-menu-image:before { color:$admin-sidebar-text-color; opacity:0.9; }
	// Sidebar main menu item hover
	a:hover, li.menu-top:hover, li.opensub > a.menu-top, li > a.menu-top:focus { 
		color:$admin-sidebar-featured-text-color; background-color:$admin-sidebar-featured-bg-color; 
	}
	li.menu-top:hover div.wp-menu-image:before, li.opensub > a.menu-top div.wp-menu-image:before { 
		color:$admin-sidebar-featured-text-color; 
	}
	
	// Sidebar submenu background
	.wp-has-current-submenu .wp-submenu, .wp-has-current-submenu.opensub .wp-submenu,
	.wp-submenu, a.wp-has-current-submenu:focus + .wp-submenu { 
		background: $admin-sidebar-submenu-bg-color; 
	}
	li.wp-has-submenu.wp-not-current-submenu.opensub:hover:after,
	li.wp-has-submenu.wp-not-current-submenu:focus-within:after { 
		border-right-color: $admin-sidebar-submenu-bg-color; 
	}
	// Sidebar submenu links
	.wp-submenu .wp-submenu-head { 
		color: $admin-sidebar-submenu-text-color; opacity:1; 
	}
	.wp-submenu, .wp-has-current-submenu .wp-submenu,
	.wp-has-current-submenu.opensub .wp-submenu, a.wp-has-current-submenu:focus + .wp-submenu {
		a { color: $admin-sidebar-submenu-text-color; opacity:0.9; }
		a:focus, a:hover { color: $admin-sidebar-submenu-text-color; opacity:1; }
	}
	.wp-submenu li.current, .wp-has-current-submenu.opensub .wp-submenu li.current,
	a.wp-has-current-submenu:focus + .wp-submenu li.current {
		a { color: $admin-sidebar-submenu-text-color; opacity:1; }
		a:focus, a:hover { color: $admin-sidebar-submenu-text-color; opacity:1; } 
	}

	// Current main item selected 
	li.current a.menu-top, li.wp-has-current-submenu .wp-submenu .wp-submenu-head,
	li.wp-has-current-submenu a.wp-has-current-submenu { 
		color:$admin-sidebar-featured-text-color; background:$admin-sidebar-featured-bg-color; 
	}
	// Current main item selected right marker (triangle) and icon
	a.wp-has-current-submenu:after, ul#adminmenu > li.current > a.current:after { 
		border-right-color: #f0f0f0; 
	}
	a.current:hover div.wp-menu-image, li a:focus div.wp-menu-image, li.current div.wp-menu-image,
	li.opensub div.wp-menu-image, li:hover div.wp-menu-image, li.wp-has-current-submenu a:focus div.wp-menu-image,
	li.wp-has-current-submenu div.wp-menu-image, li.wp-has-current-submenu.opensub div.wp-menu-image {
		&:before { color: $admin-sidebar-featured-text-color; }
	}

	// Counters inside menu item (updates/notifications)
	.awaiting-mod, .menu-counter, .update-plugins { 
		color:$admin-sidebar-featured-text-color; background:$admin-sidebar-featured-bg-color; 
	}
	li a.wp-has-current-submenu .update-plugins, li.current a .awaiting-mod,
	li.menu-top:hover > a .update-plugins, li:hover a .awaiting-mod { 
		color: $admin-sidebar-submenu-text-color; background: $admin-sidebar-submenu-bg-color; 
	}

	// Collapse menu button
	#collapse-button { color: $admin-sidebar-text-color;
		&:focus, &:hover { color:$admin-sidebar-featured-text-color; background:$admin-sidebar-featured-bg-color; }
	}
}

// Sidebar top image/logo
ul#adminmenu li#toplevel_page_sidebar_top_image {
	@include admin-sidebar-logo-image; background-color: transparent; background-repeat: no-repeat; 
	background-size: contain; background-position: top center; min-height: 0;
	&:hover {  background-color: transparent;  }
	a, div.wp-menu-image { display: none;  }
}


// Folded sidebar top image/logo
body.folded ul#adminmenu {
	li#toplevel_page_sidebar_top_image { @include admin-sidebar-logo-image-folded; }
	li.current.menu-top { color:$admin-sidebar-featured-text-color; background:$admin-sidebar-featured-bg-color; }
}



// Admin panel top bar
//////////////////////////////
#wpadminbar { background: $admin-topbar-bg-color; color: $admin-topbar-text-color;
	.ab-item, a.ab-item, & > #wp-toolbar span.ab-label, & > #wp-toolbar span.noticon { 
		color: $admin-topbar-text-color; 
	}
	.ab-icon, .ab-icon:before, .ab-item:after, .ab-item:before {
		color: $admin-topbar-text-color; opacity:0.9; 
	}

	// Topmenu buttons icons and labels
	.ab-top-menu > li.menupop.hover > .ab-item, &.nojq .quicklinks .ab-top-menu > li > .ab-item:focus,
	&.nojs .ab-top-menu > li.menupop:hover > .ab-item,
	&:not(.mobile) .ab-top-menu > li:hover > .ab-item, &:not(.mobile) .ab-top-menu > li > .ab-item:focus {
		background: $admin-topbar-bg-color; color: $admin-topbar-text-color; 
	}
	&:not(.mobile) > #wp-toolbar a:focus, &:not(.mobile) > #wp-toolbar li:hover {
		span.ab-label { color: $admin-topbar-text-color; }
	}
	&:not(.mobile) li:hover {
		#adminbarsearch:before, .ab-icon:before, .ab-item:after, .ab-item:before { 
			color: $admin-topbar-text-color; opacity:1; 
		}
	}

	// Topbar dropdown items
	.menupop .ab-sub-wrapper { background: $admin-topbar-bg-color; }	
	.quicklinks .menupop {
		ul.ab-sub-secondary, ul.ab-sub-secondary .ab-submenu { 
			background:$admin-topbar-bg-color; 
		}
		ul li a, &.hover ul li a { 
			color:$admin-topbar-text-color; 
		}
	}
	.ab-submenu .ab-item, &.nojs .quicklinks .menupop:hover ul li a,
	.menupop .menupop > .ab-item:before, .quicklinks li .blavatar { 
		color:$admin-topbar-text-color; 
	}
	
	// Topbar dropdown icons and buttons
	.quicklinks .menupop { 
		ul li a:focus, ul li a:focus strong, ul li a:hover, ul li a:hover strong,
		&.hover ul li a:focus, &.hover ul li a:hover { 
			color:$admin-topbar-text-color; 
		}
	}
	.quicklinks .ab-sub-wrapper .menupop.hover > a, li #adminbarsearch.adminbar-focused:before,
	li .ab-item:focus .ab-icon:before, li .ab-item:focus:before, li a:focus .ab-icon:before,
	li.hover .ab-icon:before, li.hover .ab-item:before, li:hover #adminbarsearch:before,
	li:hover .ab-icon:before, li:hover .ab-item:before,
	&.nojs .quicklinks .menupop:hover ul li a:focus, &.nojs .quicklinks .menupop:hover ul li a:hover { 
		color: $admin-topbar-text-color; 
	}
	
	.menupop .menupop > .ab-item:hover:before, .quicklinks .ab-sub-wrapper .menupop.hover > a .blavatar,
	.quicklinks li a:focus .blavatar, .quicklinks li a:hover .blavatar, .mobile .quicklinks .ab-icon:before, 
	&.mobile .quicklinks .hover .ab-icon:before, &.mobile .quicklinks .hover .ab-item:before,
	&.mobile .quicklinks .ab-item:before, #adminbarsearch:before  { 
		color: $admin-topbar-text-color; 
	}
	& > #wp-toolbar > #wp-admin-bar-top-secondary > #wp-admin-bar-search #adminbarsearch input.adminbar-input:focus { 
		background: $admin-topbar-bg-color; color: $admin-topbar-text-color; 
	}
	
	#wp-admin-bar-recovery-mode { 
		background: $admin-sidebar-featured-bg-color; color: $admin-sidebar-featured-text-color;
		.ab-item, a.ab-item { color: $admin-sidebar-featured-text-color;  }
	}
	.ab-top-menu > #wp-admin-bar-recovery-mode.hover > .ab-item, 
	&.nojq .quicklinks .ab-top-menu > #wp-admin-bar-recovery-mode > .ab-item:focus,
	&:not(.mobile) .ab-top-menu > #wp-admin-bar-recovery-mode:hover > .ab-item, 
	&:not(.mobile) .ab-top-menu > #wp-admin-bar-recovery-mode > .ab-item:focus {
		background: $admin-sidebar-featured-bg-color; color: $admin-sidebar-featured-text-color; 
	}

	.quicklinks li#wp-admin-bar-my-account.with-avatar > a img {
		background-color: $admin-topbar-text-color; border-color: $admin-topbar-text-color; }
	#wp-admin-bar-user-info {
		.display-name, a:hover .display-name, .username { color: $admin-topbar-text-color; }
	}
}

// Admin topbar responsive < 782px
.wp-responsive-open #wpadminbar #wp-admin-bar-menu-toggle a { background: $admin-sidebar-bg-color; }
.wp-responsive-open #wpadminbar #wp-admin-bar-menu-toggle .ab-icon:before { color: $admin-sidebar-text-color; }




// Disable topbar WP links 
#wp-toolbar li#wp-admin-bar-wp-logo { display:none; }

dct-code-editor-customizer-admin-panel-advanced-file-name

dct-code-editor-customizer-admin-panel-advanced-file-path

Currently using basic mode.
Updating the generator in advanced mode will overwrite basic mode generator options code.

dct-debug-panel-action--name

dct-debug-panel-action--value



The admin panel updates the styles in real time.

As you modify the customization panel, the changes are applied at once, so there's no need for a preview panel.

Default WP Dashboard

Customized WP Dashboard

Before and after customized admin panel dashboard: sidebar colors and logo, topbar colors and links, footer text and dashboard custom widget with html contents.

Add custom widget to dashboard

Add a custom widget panel with html contents to admin panel dashboard.

Enable dashboard custom widget to edit custom panel html contents.
Useful to add quicklinks to admin panel or forntend pages.

On update: Dashboard custom widget will appear in admin panel dashboard when enabled. Related theme mod will be updated.
On reset: Dashboard custom widget will be disabled and contents reset to default html. Related theme mod will reset to default values.

Dashboard widget

Add a custom widget panel with html contents to admin panel dashboard.

Enable dashboard custom widget to edit custom panel html contents.
Useful to add quicklinks to admin panel or forntend pages.

Add HTML contents to dashboard custom widget

<p style="text-align:center">
  <img decoding="async" src="https://www.dctforwp.com/wp-content/uploads/2026/04/Logo-DCT-for-WP-positiu.svg" width="300px" ><br>
  <b>Child theme customizer dashboard widget.</b><br>
  Edit html contents to add buttons, text and images.
</p>
<hr>
<h4>Contents</h4>
<a class="button button-large button-primary" href="edit.php?post_type=docs">Documentation</a>
<a class="button button-large" href="edit.php?post_type=tutorials">Tutorials</a>
<a class="button button-large" href="edit.php?post_type=page">Pages</a>
<hr>
<p>Settings & Appearance</p>
<a class="button" href="options-general.php">General</a>
<a class="button" href="nav-menus.php">Menus</a>
<a class="button" href="admin.php?page=dct-settings">Child theme</a>

dct-input-code-generator-customizer-dashboard-widget-basic

dct-debug-panel-action--name

dct-debug-panel-action--value

← Page preloaderLogin page →

Documentation

Admin panel

Customize admin panel styles and contents

Admin panel

Admin sidebar

Admin topbar

Admin footer

Admin panel

Add custom widget to dashboard

Dashboard widget

Quick links

Contents

Status: Child theme

Summary

Theme object $dct

Theme mods

Custom files

PHP Custom files 5

JS Custom files 2

SCSS Partials styles 7

SCSS Base styles 1

CSS Compiled styles 3

Debugger errors log

Status: SCSS Compiler

Global Variables

SCSS Partials styles

SCSS Base styles

CSS Compiled styles

Post query

True Conditionals

False Conditionals

Current user

Hooks, actions & filters

Child theme hooks

All hooks wp_actions

All filters wp_filters

Environment

Server information

Debugger log: PHP

Debugger errors log: PHP

PHP object $dct

Debugger log: JS

JS object $dct

Theme object `$dct`

All hooks `wp_actions`

All filters `wp_filters`

PHP object `$dct`

JS object `$dct`