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
2
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.
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
4
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;
}
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
7
Hi @jmyrtle ,
Yes, it should be doable.
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
9
This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.
bogdan
May 12, 2021, 8:13pm
11
Hi @jmyrtle ,
Have you considered changing the .green class color to your preferred one so all “green” items show as blue?
1 Like
kwcjr
May 13, 2021, 7:29am
12
@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.
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
14
Hi @jmyrtle ,
Can you you please show me a few elements that are still green after you added this custom rule?
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
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;
}
2 Likes
kwcjr
May 13, 2021, 10:02pm
17
@jmyrtle Glad you found the correct tags to target.
2 Likes
system
May 14, 2021, 10:03pm
18
This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.
