Custom Dashboard Additional Styling

jmyrtle · May 7, 2021, 3:38pm

I’ve purchased the Custom Dashboard extension and I’m having a little bit of trouble.

So far, I’ve added a few of the example features located here. but I want to include some features of my own as well.

I want to change the active selection in the MainWP horizontal menu at the top of the page to a blue color (#0366d6) and change the green checkmarks to the same color. The problem is, I have no idea how to change this.

Here is what it looks like now:

This is my desired end result:

I’ve used my Inspect Element tool in my browser to make a mockup of what I’m looking for, but of course, this tool does not keep any changes that are made. My inspect tool is showing me the classes used, but no matter what I add to custom CSS, nothing changes.

/* Display New Logo */
.mainwp-nav-wrap #mainwp-logo img { 
	display: none !important;
}

.mainwp-nav-wrap #mainwp-logo { 
	background-image: url('/wpdash/wp-content/cascosigns_mainwp.png') !important; 
	background-repeat: no-repeat; /* missing from mainWP Core */
}

/* Change Button and Link Colors */
.mainwp-ui a {
	color: #0366d6;
}

.mainwp-ui .ui.button.green {
	background: #0366d6;
}

.mainwp-ui .ui.button.basic.green {
	box-shadow: 0 0 0 1px #0366d6 !important;
	-webkit-box-shadow: 0 0 0 1px #0366d6 !important;
	color: #0366d6 !important;
}

/* Hide Tooltips */
.mainwp-ui [data-tooltip]:before,
.mainwp-ui [data-tooltip]:after { display: none !important; }

How can I make this change across the dashboard?

bogdan · May 7, 2021, 5:21pm

Hi @jmyrtle,

Before getting into customizations, have you checked this tool:

If that is not a good fit for you, please let me know and I will give my best to help with the code.

jmyrtle · May 7, 2021, 6:07pm

This plugin will not be able to help me at the moment as my customizations are very minimal.

Can you look at the code?

bogdan · May 8, 2021, 9:40am

Hi @jmyrtle,

Can you try with this:

.mainwp-ui .ui.green.menu .active.item, .mainwp-ui .ui.menu .green.active.item {
    border-color: #0366d6 !important;
    color: #0366d6 !important;
}

.mainwp-ui i.inverted.bordered.green.icon, .mainwp-ui i.inverted.circular.green.icon {
    background-color: #0366d6 !important;
    color: #fff !important;
}

jmyrtle · May 10, 2021, 11:58am

That did it! Thanks!

jmyrtle · May 10, 2021, 8:17pm

Can I also change the progress bar during sync, the sync status (5/5 synced) and these green checks to the same color?

bogdan · May 11, 2021, 2:05pm

Hi @jmyrtle,

Yes, it should be doable.
You should use the Inspect Element feature in your browser to find which CSS selectors you need to customize.

jmyrtle · May 11, 2021, 4:10pm

When I try this, I only get a few seconds to inspect it. It is not enough time for me to decipher which classes I need to modify.

I also tried this method on the horizontal menu and the checkmarks on the site page but it didn’t work.

system · May 12, 2021, 4:11pm

This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.

bogdan · May 12, 2021, 8:13pm

Hi @jmyrtle,

Have you considered changing the .green class color to your preferred one so all “green” items show as blue?

kwcjr · May 13, 2021, 7:29am

@jmyrtle This would be your best bet at knocking out most if not all of the green to your Brands color as @bogdan is suggesting, rather then trying to over ride them one by one.

jmyrtle · May 13, 2021, 11:56am

I tried using this:

.mainwp-ui .green {
	color: #0366d6 !important;	
}

but it changed the text color of my buttons from white to the preferred color.

I also replaced it with the background parameter:

.mainwp-ui .green {
	background: #0366d6 !important;	
}

but that didn’t work either.

bogdan · May 13, 2021, 12:28pm

Hi @jmyrtle,

Can you you please show me a few elements that are still green after you added this custom rule?

jmyrtle · May 13, 2021, 1:22pm

This is with the color parameter:

Progress bar is still green on data sync

This is with the background paremeter:

Progress bar is still green on data sync

jmyrtle · May 13, 2021, 2:23pm

I found the solution using my Inspect Element. I had to use my snipping tool since I only had a few seconds to see it.

.mainwp-ui .ui.green.progress .bar {
	background-color: #0366d6 !important;	
}

.mainwp-ui .ui.progress.success>.label {
	color: #0366d6 !important;	
}

kwcjr · May 13, 2021, 10:02pm

@jmyrtle Glad you found the correct tags to target.

system · May 14, 2021, 10:03pm

This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.