Skip Navigation

[Resolved] Overwrite Classes in "wpt-toolset-backend" CSS File

This support ticket is created 5 years, 4 months ago. There's a good chance that you are reading advice that it now obsolete.

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

Sun Mon Tue Wed Thu Fri Sat
8:00 – 12:00 8:00 – 12:00 8:00 – 12:00 8:00 – 12:00 8:00 – 12:00 - -
13:00 – 17:00 13:00 – 17:00 13:00 – 17:00 13:00 – 17:00 13:00 – 17:00 - -

Supporter timezone: America/New_York (GMT-04:00)

This topic contains 4 replies, has 2 voices.

Last updated by Christian Cox 5 years, 2 months ago.

Assisted by: Christian Cox.

Author
Posts
#1332887
after-update.png
before-update.png

Good Afternoon,

I've updated the Toolset Types plugin from version 3.2.7 to 3.3.4 and realized there has been a new CSS file implemented in the plugin called "wpt-toolset-backend.css". There are classes in that file that has messed up the styling of fields in the admin view such as the "wpt-form-select" class (which changes that field to 100% width when I don't want it to be due to it being stretch across the screen).

I tried to overwrite it by adding in additional CSS in my theme (style.css) but it doesn't apply due to the "wpt-toolset-backend.css" file being implemented in the backend. I've attached a screenshot of what the section looked like before I updated to the newest version (before-update.png), and what it looks like afterwards (after-update.png). The section I am referring to is the "End Date" area and after the update, it's using the "wot-form-select" class.

Is there a way to overwrite those classes or change them within the plugin some way?

Thank you and hope to hear from you soon.

#1332957

Hi, this issue has been pointed out to our developers and we're waiting for a fix in an upcoming version of the software. In the meantime, you could create a new admin stylesheet and enqueue in your theme (or child theme) to override those styles. The general template looks like this in functions.php:

function load_custom_wp_admin_style() {
        wp_register_style( 'custom_wp_admin_css', get_stylesheet_directory_uri() . '/admin-style.css', false, '1.0.0' );
        wp_enqueue_style( 'custom_wp_admin_css' );
}
add_action( 'admin_enqueue_scripts', 'load_custom_wp_admin_style' );

https://codex.wordpress.org/Plugin_API/Action_Reference/admin_enqueue_scripts

You would create an admin-style.css file in your theme directory. Then adding display:flex to the date field item class should fix it for now:

.js-wpt-date .wpt-field-item {
    display: flex;
}
#1343373

Just a quick update to let you know our developers released a fix for this issue in the latest round of updates. An override should no longer be necessary.

#1345117

Hello, I just installed the new update (3.3.5) and unfortunately, the fix is still needed. After the update, the fields still stayed the same as the previous version unless there is something that needs to be adjusted in the settings.

#1369043
Screen Shot 2019-10-24 at 10.32.21 AM.png

I apologize for the confusion here, there was a miscommunication among our internal teams about which version of Types would include the update. It turns out Types 3.3.6 includes the update, not 3.3.5. Thanks for your patience. It seems to be resolved now in my local environment without the need for an override admin stylesheet.