Override Dashboard CSS correctly? - Meta Box

This topic has 1 reply, 2 voices, and was last updated 3 years, 8 months ago by Long Nguyen.

Viewing 2 posts - 1 through 2 (of 2 total)

Author

Posts
April 10, 2021 at 6:22 PM #27114

Adam M
Participant

Hi,

I'm trying to style the Frontend Dashboard. I notice it uses the CSS file at /wp-content/plugins/meta-box-aio/vendor/meta-box/mb-frontend-submission/assets/dashboard.css.

When I use the Customizer's "Additional CSS" to enter overrides, I need to mark everything as !important to work, which creates internal conflicts when I need to add multiple, separate styles.

What's the recommended way to override that CSS file?

Add New Note to this Reply

April 10, 2021 at 10:12 PM #27122
Long Nguyen
Moderator
Hi,
- You can still use the Additional CSS in the customizer to override the style of the frontend dashboard. Just need to specificity class, for example, current CSS code of the Add New button in the frontend dashboard
```
.mbfs-add-new-post {
    text-decoration: none;
    padding: .5em 1em;
    color: #fff;
    background: #45cbf7;
    border-radius: .25em;
    transition: .3s;
    display: inline-block;
    margin: 1em 0;
}
```
specificity class is
```
body .mbfs-add-new-post {
    color: red;
}
```
Get more details here https://stackoverflow.com/questions/20954715/how-to-override-the-properties-of-a-css-class-using-another-css-class.
- Or follow this article to create a CSS file without using Additional CSS https://metabox.io/style-meta-boxs-custom-fields-using-css/
Add New Note to this Reply
Author

Posts

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.