UpdraftCentral Dashboard: Customizing the Colors with CSS

Last updated on October 10th, 2023 at 01:43 pm


CSS can do wonders - this is just a tiny example.

UpdraftCentral WordPress Management

Image Credit: Updraft

This post may contain affiliate links. We may earn a commission if you purchase an item through our links. It costs you nothing and helps us to fund this blog. Please see our Affiliate Disclosure & Notification for details.

Table Of Contents

Add a header to begin generating the table of contents

About a week ago, I wrote about a WordPress plugin called UpdraftCentral that allows you to manage multiple websites from a single dashboard. While the dashboard itself is pretty minimal, I had a couple readers ask about the possibility of changing the colors to match their theme.

UPDATE (Feb 6, 2018) : As of the latest version release of UpdraftCentral, the UI has been changed dramatically. These CSS updates may not have the desired affect shown in the screen captures.

The default color scheme for UpdraftCentral probably won’t match your theme

Like most color changes, the modifications can be done via CSS. We’ll make it simple… just copy and paste the code below into your custom CSS. Most themes have a section for custom CSS, if you’re doesn’t, then you can use a child theme CSS to get the affected changes.

/UpdraftCentral Color Customization/
 /Top Dashboard Navigation Bar/
 .updraft-central-navigation {
 background-color: #000000 !important;
 }
 /Top Dashboard Hover Color on Icons/
 .updraft-central-navigation .top_menu_right .dashicons:hover {
 color: #dd3333
 !important;
 }
 /Side Menu Background Color on Hover/
 .updraft-menu-item:hover, .updraft-menu-item-links:hover {
 background-color: #dd3333 !important;
 }
 /Side Menu Active Item Background Color/
 .updraft-menu-item-links-active {
 background-color: #dd3333 !important;
 }
 /Side Menu Central Button Background Color/
 .updraft-central-sidebar-button {
 background-color: #000000 !important;
 }
 /Button Outline & Background Color/
 .updraftcentral_dashboard #updraft-central-content .btn-primary,
 .updraftcentral_modal_dialog .btn-primary, .updraft_download_button,
 .updraft_site_settings_output button.button-primary,
 .modal-footer .btn-primary, .updraftplus-settings-save {
 border: 1px solid #ffffff !important;
 color: #FFF !important;
 background-color: #dd3333 !important;
 }
 /End UpdraftCentral Color Customization/

The code above will give you an UpdraftCentral dashboard that looks like this:

New color scheme applied via CSS changes.

You can experiment with the colors in the CSS to get the look you want for your own dashboard. Let us know what you think!

Sharif Jameel is a business owner, IT professional, runner, & musician. His professional certifications include CASP, Sec+, Net+, MCSA, & ITIL and others. He’s also the guitar player for the Baltimore-based cover bands, Liquifaction and Minority Report.

1 thought on “UpdraftCentral Dashboard: Customizing the Colors with CSS”

  1. Pingback: Manage Multiple WordPress Sites with UpdraftCentral - Website Design Baltimore | SEO Baltimore | CGS Computers

Leave a Comment

Your email address will not be published. Required fields are marked *


Subscribe to Our Mailing List

If you found the information in this post helpful, we'd love to have you join our mailing list. We promise we won't spam you, we only send out emails once a month or less.


Scroll to Top