Halloween is just around the corner, and what better way to get into the spirit of the season than by giving your WordPress dashboard a hauntingly fun makeover?
In this step-by-step guide, we'll show you how to add a Halloween-themed look to your WordPress admin area using custom CSS code. It's a great way to surprise and delight your users while celebrating the spooky season.
But first, I would like to you to check How to Add Custom CSS in WordPress Admin Panel post that I recently published.
Little technical knowledge is necessary if you like to achieve the Halloween Dashboard look using Code.
Things You Can Do for a Spooky Vibe
Halloween Colors
Changing the colors of your dashboard can make a significant impact on its overall look. To give your dashboard a Halloween feel, change the color scheme to spooky shades like orange and black. You can do this by going to "Users" -> "Your Profile" and scrolling down to the "Admin Color Scheme" section. Pick the "Sunrise" or "Midnight" option for that perfect Halloween touch.
But if you want a custom color, then scroll down and read more.
Halloween Dashboard Widgets
You can add Dashboard widgets to your admin panel to give it a festive look. You can check my this post to learn how to add custom Dashboard Widget. Create some widget to display Halloween jokes, quotes, or even a countdown to Halloween.
Spooky Admin Icons
Level up your WordPress Dashboard experience with Spooky Admin icons. To achieve this you can use any plugin that offers Admin Menu Editor feature like WP Adminify. It offers 6 different icon libraries to choose a perfect icon for your admin menus. Also, you can upload your custom Admin menu icons in image format too. There are icon sets available online that include pumpkin icons, witch hats, and other spooky elements. Just download any sets and upload via the WP Adminify Admin menu editor module.
Design WordPress Dashboard With CSS
Let's take a look what you will have after applying the following CSS code in your WordPress Dashboard.
If you like to explore more deals on WordPress, in this upcoming black Friday you can check this WordPress Black Friday deals post.
https://wpadminify.com/wordpress-black-friday-deals/
https://master-addons.com/wordpress-plugins-black-friday/
First, navigate to your active Themes folder (recommended the child theme), then paste the following code and create a CSS file called halloween-admin.css in the root folder.
function custom_admin_css() {
// Replace 'custom-admnin-style.css' with the actual file path to your custom CSS.
$custom_css_file = get_template_directory_uri() . '/halloween-admin.css';
// Enqueue the custom CSS file in the WordPress admin area.
wp_enqueue_style('custom-admin-css', $custom_css_file);
}
// Hook the custom_admin_css function to the admin_enqueue_scripts action.
add_action('admin_enqueue_scripts', 'custom_admin_css');
Now copy the following CSS code and paste it in your halloween-admin.css file and save it.
NOTE: With WP Adminify Plugin, you can change the
Dashboard Body Color,admin Menu Color, Addimages/ slideshow/ video in Dashboard background, CreateCustom Dashboard Widget, Remove unwanted widgets, and more. Feel free to try the Free version.
body {
background: #ff6000;
}
/* Links */
a {
color: #0e21a0;
}
a:hover, a:active, a:focus {
color: #122bcf;
}
#post-body .misc-pub-post-status:before,
#post-body #visibility:before,
.curtime #timestamp:before,
#post-body .misc-pub-revisions:before,
span.wp-media-buttons-icon:before {
color: currentColor;
}
/* Forms */
input[type=checkbox]:checked::before {
content: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2020%2020%27%3E%3Cpath%20d%3D%27M14.83%204.89l1.34.94-5.81%208.38H9.02L5.78%209.67l1.34-1.25%202.57%202.4z%27%20fill%3D%27%2337306b%27%2F%3E%3C%2Fsvg%3E");
}
input[type=radio]:checked::before {
background: #37306b;
}
.wp-core-ui input[type="reset"]:hover,
.wp-core-ui input[type="reset"]:active {
color: #122bcf;
}
input[type="text"]:focus,
input[type="password"]:focus,
input[type="color"]:focus,
input[type="date"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="email"]:focus,
input[type="month"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="text"]:focus,
input[type="time"]:focus,
input[type="url"]:focus,
input[type="week"]:focus,
input[type="checkbox"]:focus,
input[type="radio"]:focus,
select:focus,
textarea:focus {
border-color: #000000;
box-shadow: 0 0 0 1px #000000;
}
/* Core UI */
.wp-core-ui .button,
.wp-core-ui .button-secondary {
color: #262a56;
border-color: #262a56;
}
.wp-core-ui .button.hover,
.wp-core-ui .button:hover,
.wp-core-ui .button-secondary:hover,
.wp-core-ui .button.focus,
.wp-core-ui .button:focus,
.wp-core-ui .button-secondary:focus {
border-color: #1e2144;
color: #1e2144;
}
.wp-core-ui .button.focus,
.wp-core-ui .button:focus,
.wp-core-ui .button-secondary:focus {
border-color: #262a56;
color: #1e2144;
box-shadow: 0 0 0 1px #262a56;
}
.wp-core-ui .button:active {
background: #1e2144;
border-color: #1e2144;
}
.wp-core-ui .button.active,
.wp-core-ui .button.active:focus,
.wp-core-ui .button.active:hover {
border-color: #1e2144;
color: #1e2144;
box-shadow: inset 0 2px 5px -3px #1e2144;
}
.wp-core-ui .button-primary {
background: #262a56;
border-color: #262a56;
color: #fff;
}
.wp-core-ui .button-primary:hover, .wp-core-ui .button-primary:focus {
background: #2b2f61;
border-color: #21254b;
color: #fff;
}
.wp-core-ui .button-primary:focus {
box-shadow: 0 0 0 1px #fff, 0 0 0 3px #262a56;
}
.wp-core-ui .button-primary:active {
background: #1e2144;
border-color: #1e2144;
color: #fff;
}
.wp-core-ui .button-primary.active, .wp-core-ui .button-primary.active:focus, .wp-core-ui .button-primary.active:hover {
background: #262a56;
color: #fff;
border-color: #0f1021;
box-shadow: inset 0 2px 5px -3px black;
}
.wp-core-ui .button-primary[disabled], .wp-core-ui .button-primary:disabled, .wp-core-ui .button-primary.button-primary-disabled, .wp-core-ui .button-primary.disabled {
color: #c7c8d1 !important;
background: #191c3a !important;
border-color: #191c3a !important;
text-shadow: none !important;
}
.wp-core-ui .button-group > .button.active {
border-color: #262a56;
}
.wp-core-ui .wp-ui-primary {
color: #fff;
background-color: #cd1818;
}
.wp-core-ui .wp-ui-text-primary {
color: #cd1818;
}
.wp-core-ui .wp-ui-highlight {
color: #fff;
background-color: #000000;
}
.wp-core-ui .wp-ui-text-highlight {
color: #000000;
}
.wp-core-ui .wp-ui-notification {
color: #fff;
background-color: #d54e21;
}
.wp-core-ui .wp-ui-text-notification {
color: #d54e21;
}
.wp-core-ui .wp-ui-text-icon {
color: #f3f1f1;
}
/* List tables */
.wrap .add-new-h2:hover,
.wrap .page-title-action:hover {
color: #fff;
background-color: #cd1818;
}
.view-switch a.current:before {
color: #cd1818;
}
.view-switch a:hover:before {
color: #d54e21;
}
/* Admin Menu */
#adminmenuback,
#adminmenuwrap,
#adminmenu {
background: #cd1818;
}
#adminmenu a {
color: #fff;
}
#adminmenu div.wp-menu-image:before {
color: #f3f1f1;
}
#adminmenu a:hover,
#adminmenu li.menu-top:hover,
#adminmenu li.opensub > a.menu-top,
#adminmenu li > a.menu-top:focus {
color: #fff;
background-color: #000000;
}
#adminmenu li.menu-top:hover div.wp-menu-image:before,
#adminmenu li.opensub > a.menu-top div.wp-menu-image:before {
color: #fff;
}
/* Active tabs use a bottom border color that matches the page background color. */
.about-wrap .nav-tab-active,
.nav-tab-active,
.nav-tab-active:hover {
background-color: #ff6000;
border-bottom-color: #ff6000;
}
/* Admin Menu: submenu */
#adminmenu .wp-submenu,
#adminmenu .wp-has-current-submenu .wp-submenu,
#adminmenu .wp-has-current-submenu.opensub .wp-submenu,
.folded #adminmenu .wp-has-current-submenu .wp-submenu,
#adminmenu a.wp-has-current-submenu:focus + .wp-submenu {
background: #ad1414;
}
#adminmenu li.wp-has-submenu.wp-not-current-submenu.opensub:hover:after {
border-right-color: #ad1414;
}
#adminmenu .wp-submenu .wp-submenu-head {
color: #f0baba;
}
#adminmenu .wp-submenu a,
#adminmenu .wp-has-current-submenu .wp-submenu a,
.folded #adminmenu .wp-has-current-submenu .wp-submenu a,
#adminmenu a.wp-has-current-submenu:focus + .wp-submenu a,
#adminmenu .wp-has-current-submenu.opensub .wp-submenu a {
color: #f0baba;
}
#adminmenu .wp-submenu a:focus, #adminmenu .wp-submenu a:hover,
#adminmenu .wp-has-current-submenu .wp-submenu a:focus,
#adminmenu .wp-has-current-submenu .wp-submenu a:hover,
.folded #adminmenu .wp-has-current-submenu .wp-submenu a:focus,
.folded #adminmenu .wp-has-current-submenu .wp-submenu a:hover,
#adminmenu a.wp-has-current-submenu:focus + .wp-submenu a:focus,
#adminmenu a.wp-has-current-submenu:focus + .wp-submenu a:hover,
#adminmenu .wp-has-current-submenu.opensub .wp-submenu a:focus,
#adminmenu .wp-has-current-submenu.opensub .wp-submenu a:hover {
color: #000000;
}
/* Admin Menu: current */
#adminmenu .wp-submenu li.current a,
#adminmenu a.wp-has-current-submenu:focus + .wp-submenu li.current a,
#adminmenu .wp-has-current-submenu.opensub .wp-submenu li.current a {
color: #fff;
}
#adminmenu .wp-submenu li.current a:hover, #adminmenu .wp-submenu li.current a:focus,
#adminmenu a.wp-has-current-submenu:focus + .wp-submenu li.current a:hover,
#adminmenu a.wp-has-current-submenu:focus + .wp-submenu li.current a:focus,
#adminmenu .wp-has-current-submenu.opensub .wp-submenu li.current a:hover,
#adminmenu .wp-has-current-submenu.opensub .wp-submenu li.current a:focus {
color: #000000;
}
ul#adminmenu a.wp-has-current-submenu:after,
ul#adminmenu > li.current > a.current:after {
border-right-color: #ff6000;
}
#adminmenu li.current a.menu-top,
#adminmenu li.wp-has-current-submenu a.wp-has-current-submenu,
#adminmenu li.wp-has-current-submenu .wp-submenu .wp-submenu-head,
.folded #adminmenu li.current.menu-top {
color: #fff;
background: #000000;
}
#adminmenu li.wp-has-current-submenu div.wp-menu-image:before,
#adminmenu a.current:hover div.wp-menu-image:before,
#adminmenu li.wp-has-current-submenu a:focus div.wp-menu-image:before,
#adminmenu li.wp-has-current-submenu.opensub div.wp-menu-image:before,
#adminmenu li:hover div.wp-menu-image:before,
#adminmenu li a:focus div.wp-menu-image:before,
#adminmenu li.opensub div.wp-menu-image:before,
.ie8 #adminmenu li.opensub div.wp-menu-image:before {
color: #fff;
}
/* Admin Menu: bubble */
#adminmenu .awaiting-mod,
#adminmenu .update-plugins {
color: #fff;
background: #d54e21;
}
#adminmenu li.current a .awaiting-mod,
#adminmenu li a.wp-has-current-submenu .update-plugins,
#adminmenu li:hover a .awaiting-mod,
#adminmenu li.menu-top:hover > a .update-plugins {
color: #fff;
background: #ad1414;
}
/* Admin Menu: collapse button */
#collapse-button {
color: #f3f1f1;
}
#collapse-button:hover,
#collapse-button:focus {
color: #000000;
}
/* Admin Bar */
#wpadminbar {
color: #fff;
background: #cd1818;
}
#wpadminbar .ab-item,
#wpadminbar a.ab-item,
#wpadminbar > #wp-toolbar span.ab-label,
#wpadminbar > #wp-toolbar span.noticon {
color: #fff;
}
#wpadminbar .ab-icon,
#wpadminbar .ab-icon:before,
#wpadminbar .ab-item:before,
#wpadminbar .ab-item:after {
color: #f3f1f1;
}
#wpadminbar:not(.mobile) .ab-top-menu > li:hover > .ab-item,
#wpadminbar:not(.mobile) .ab-top-menu > li > .ab-item:focus,
#wpadminbar.nojq .quicklinks .ab-top-menu > li > .ab-item:focus,
#wpadminbar.nojs .ab-top-menu > li.menupop:hover > .ab-item,
#wpadminbar .ab-top-menu > li.menupop.hover > .ab-item {
color: #000000;
background: #ad1414;
}
#wpadminbar:not(.mobile) > #wp-toolbar li:hover span.ab-label,
#wpadminbar:not(.mobile) > #wp-toolbar li.hover span.ab-label,
#wpadminbar:not(.mobile) > #wp-toolbar a:focus span.ab-label {
color: #000000;
}
#wpadminbar:not(.mobile) li:hover .ab-icon:before,
#wpadminbar:not(.mobile) li:hover .ab-item:before,
#wpadminbar:not(.mobile) li:hover .ab-item:after,
#wpadminbar:not(.mobile) li:hover #adminbarsearch:before {
color: #fff;
}
/* Admin Bar: submenu */
#wpadminbar .menupop .ab-sub-wrapper {
background: #ad1414;
}
#wpadminbar .quicklinks .menupop ul.ab-sub-secondary,
#wpadminbar .quicklinks .menupop ul.ab-sub-secondary .ab-submenu {
background: #dd2c2c;
}
#wpadminbar .ab-submenu .ab-item,
#wpadminbar .quicklinks .menupop ul li a,
#wpadminbar .quicklinks .menupop.hover ul li a,
#wpadminbar.nojs .quicklinks .menupop:hover ul li a {
color: #f0baba;
}
#wpadminbar .quicklinks li .blavatar,
#wpadminbar .menupop .menupop > .ab-item:before {
color: #f3f1f1;
}
#wpadminbar .quicklinks .menupop ul li a:hover,
#wpadminbar .quicklinks .menupop ul li a:focus,
#wpadminbar .quicklinks .menupop ul li a:hover strong,
#wpadminbar .quicklinks .menupop ul li a:focus strong,
#wpadminbar .quicklinks .ab-sub-wrapper .menupop.hover > a,
#wpadminbar .quicklinks .menupop.hover ul li a:hover,
#wpadminbar .quicklinks .menupop.hover ul li a:focus,
#wpadminbar.nojs .quicklinks .menupop:hover ul li a:hover,
#wpadminbar.nojs .quicklinks .menupop:hover ul li a:focus,
#wpadminbar li:hover .ab-icon:before,
#wpadminbar li:hover .ab-item:before,
#wpadminbar li a:focus .ab-icon:before,
#wpadminbar li .ab-item:focus:before,
#wpadminbar li .ab-item:focus .ab-icon:before,
#wpadminbar li.hover .ab-icon:before,
#wpadminbar li.hover .ab-item:before,
#wpadminbar li:hover #adminbarsearch:before,
#wpadminbar li #adminbarsearch.adminbar-focused:before {
color: #000000;
}
#wpadminbar .quicklinks li a:hover .blavatar,
#wpadminbar .quicklinks li a:focus .blavatar,
#wpadminbar .quicklinks .ab-sub-wrapper .menupop.hover > a .blavatar,
#wpadminbar .menupop .menupop > .ab-item:hover:before,
#wpadminbar.mobile .quicklinks .ab-icon:before,
#wpadminbar.mobile .quicklinks .ab-item:before {
color: #000000;
}
#wpadminbar.mobile .quicklinks .hover .ab-icon:before,
#wpadminbar.mobile .quicklinks .hover .ab-item:before {
color: #f3f1f1;
}
/* Admin Bar: search */
#wpadminbar #adminbarsearch:before {
color: #f3f1f1;
}
#wpadminbar > #wp-toolbar > #wp-admin-bar-top-secondary > #wp-admin-bar-search #adminbarsearch input.adminbar-input:focus {
color: #fff;
background: #e52323;
}
/* Admin Bar: recovery mode */
#wpadminbar #wp-admin-bar-recovery-mode {
color: #fff;
background-color: #d54e21;
}
#wpadminbar #wp-admin-bar-recovery-mode .ab-item,
#wpadminbar #wp-admin-bar-recovery-mode a.ab-item {
color: #fff;
}
#wpadminbar .ab-top-menu > #wp-admin-bar-recovery-mode.hover > .ab-item,
#wpadminbar.nojq .quicklinks .ab-top-menu > #wp-admin-bar-recovery-mode > .ab-item:focus,
#wpadminbar:not(.mobile) .ab-top-menu > #wp-admin-bar-recovery-mode:hover > .ab-item,
#wpadminbar:not(.mobile) .ab-top-menu > #wp-admin-bar-recovery-mode > .ab-item:focus {
color: #fff;
background-color: #c0461e;
}
/* Admin Bar: my account */
#wpadminbar .quicklinks li#wp-admin-bar-my-account.with-avatar > a img {
border-color: #e52323;
background-color: #e52323;
}
#wpadminbar #wp-admin-bar-user-info .display-name {
color: #fff;
}
#wpadminbar #wp-admin-bar-user-info a:hover .display-name {
color: #000000;
}
#wpadminbar #wp-admin-bar-user-info .username {
color: #f0baba;
}
/* Pointers */
.wp-pointer .wp-pointer-content h3 {
background-color: #000000;
border-color: black;
}
.wp-pointer .wp-pointer-content h3:before {
color: #000000;
}
.wp-pointer.wp-pointer-top .wp-pointer-arrow,
.wp-pointer.wp-pointer-top .wp-pointer-arrow-inner,
.wp-pointer.wp-pointer-undefined .wp-pointer-arrow,
.wp-pointer.wp-pointer-undefined .wp-pointer-arrow-inner {
border-bottom-color: #000000;
}
/* Media */
.media-item .bar,
.media-progress-bar div {
background-color: #000000;
}
.details.attachment {
box-shadow: inset 0 0 0 3px #fff, inset 0 0 0 7px #000000;
}
.attachment.details .check {
background-color: #000000;
box-shadow: 0 0 0 1px #fff, 0 0 0 2px #000000;
}
.media-selection .attachment.selection.details .thumbnail {
box-shadow: 0 0 0 1px #fff, 0 0 0 3px #000000;
}
/* Themes */
.theme-browser .theme.active .theme-name,
.theme-browser .theme.add-new-theme a:hover:after,
.theme-browser .theme.add-new-theme a:focus:after {
background: #000000;
}
.theme-browser .theme.add-new-theme a:hover span:after,
.theme-browser .theme.add-new-theme a:focus span:after {
color: #000000;
}
.theme-section.current,
.theme-filter.current {
border-bottom-color: #cd1818;
}
body.more-filters-opened .more-filters {
color: #fff;
background-color: #cd1818;
}
body.more-filters-opened .more-filters:before {
color: #fff;
}
body.more-filters-opened .more-filters:hover,
body.more-filters-opened .more-filters:focus {
background-color: #000000;
color: #fff;
}
body.more-filters-opened .more-filters:hover:before,
body.more-filters-opened .more-filters:focus:before {
color: #fff;
}
/* Widgets */
.widgets-chooser li.widgets-chooser-selected {
background-color: #000000;
color: #fff;
}
.widgets-chooser li.widgets-chooser-selected:before,
.widgets-chooser li.widgets-chooser-selected:focus:before {
color: #fff;
}
/* Responsive Component */
div#wp-responsive-toggle a:before {
color: #f3f1f1;
}
.wp-responsive-open div#wp-responsive-toggle a {
border-color: transparent;
background: #000000;
}
.wp-responsive-open #wpadminbar #wp-admin-bar-menu-toggle a {
background: #ad1414;
}
.wp-responsive-open #wpadminbar #wp-admin-bar-menu-toggle .ab-icon:before {
color: #f3f1f1;
}
/* TinyMCE */
.mce-container.mce-menu .mce-menu-item:hover,
.mce-container.mce-menu .mce-menu-item.mce-selected,
.mce-container.mce-menu .mce-menu-item:focus,
.mce-container.mce-menu .mce-menu-item-normal.mce-active,
.mce-container.mce-menu .mce-menu-item-preview.mce-active {
background: #000000;
}
.postbox{
border: 2px solid #f7f7f745;
box-shadow: 1px 0px 20px rgb(66 109 252 / 34%);
background: #ff000087;
}
.comment-ays, .feature-filter, .popular-tags, .stuffbox, .widgets-holder-wrap, .wp-editor-container, p.popular-tags, table.widefat {
background: #facf5a;
}
.alternate, .striped>tbody>:nth-child(odd), ul.striped>:nth-child(odd) {
background-color: #F9BF8F;
}
.plugin-card, .card{
background: #facf5a;
}
.plugin-card-bottom{
background: #4aff07;
}
.plugins tr {
background: #4aff07;
}
.media-frame-content, .media-modal-content{
background: #C70039;
}
.edit-attachment-frame .attachment-info{
background: #F8DE22;
}
That's it. Now you can reload your WordPress Dashboard the check your hard work. Comment if you have any suggestion on my color choice. I appreciate your suggestion if you able to provide better color suggestions for the Halloween WordPress Dashboard vibe.
Top comments (1)
Great tutorial on giving your WordPress dashboard a Halloween makeover! The step-by-step guide and CSS code are very helpful. For those looking to add a spooky vibe to their WordPress admin area, this is a fantastic resource. Also, don't forget to check out the 'How to Add Custom CSS in WordPress Admin Panel' post.
If you're planning a Halloween event and need digital invitations, be sure to visit MrInvites.com for high-quality Halloween digital invitations. They'll add a touch of spookiness to your party preparations.