• Resolved JboyJW

    (@jboyjw)


    I have an existing site that uses Bootstrap 3 as a base and all of our button colours and sizing are set through that in our theme’s style.css. BoldGrid’s custom-styles.css overrides all of that… Is there an easy way to not use BoldGrid’s button styles other than putting body in front of all of our theme’s button stylings?

Viewing 11 replies - 1 through 11 (of 11 total)
  • Plugin Author Rafael Ramos

    (@rramo012)

    Thanks for reaching out. The custom stylesheet enqueue includes any color palette modifications that you make while editing. It also includes the base buttons styles which override bootstrap button styles.

    Currently, the only way to remove all button styles would be to dequeue the custom styles. However, this will disable the builders color palette functionality and I don’t recommend it.

    You can do this by adding the following to your themes functions.php

    add_action( 'wp_print_styles', function() {
        wp_dequeue_style( 'boldgrid-custom-styles' );
    }, 100 );

    A better approach would be to disable the button styles from being added to the sheet. Unfortunately, we don’t have an easy way for you to do this. I will work adding an override to the plugin for you and reply back with an update within the next day.

    Thread Starter JboyJW

    (@jboyjw)

    Agreed, the latter would be preferred. Thanks very much! I’ll keep an eye out for your reply.

    Plugin Author Rafael Ramos

    (@rramo012)

    Okay, I just released version 1.10.4 of the Post and Page Builder. The release includes the ability to disable the buttons component with a WordPress filter. By disabling it, the button CSS will no longer be saved into the custom stylesheet when making color palette changes. Also, you will no longer be able to insert the button component with the UI since it depends on the CSS.

    Here’s what you’ll need to do.

    1. Add the following to your themes functions.php

    
    add_filter( 'BoldgridEditor\PageBuilder', function ( $configs ) {
        $configs['components']['buttons'] = false;
        return $configs;
    } );
    

    This will update the configuration that we use to control the way the builder behaves.

    2. Reapply your saved color palette.

    – Within the Post and Page Builder, change your color palette any other color palette. For help see: https://www.boldgrid.com/support/boldgrid-post-and-page-builder/configuring-your-color-palette-with-3rd-party-themes/
    – Change your Color Palette back to the original
    – Update your page or post

    Since the override prevents the button styles from being saved into the custom styles, we need to regenerate the saved file. An easy way to do this is by toggling your current color palette. Saving will apply the changes. Don’t worry if the button styles don’t disappear at first after you save the button styles will be gone.

    Let me know if you have any issues. I’m sorry you ran into conflicts with a Bootstrap theme. We will continue to improve theme compatibility and make integration easier.

    Thread Starter JboyJW

    (@jboyjw)

    Thanks! But I’m having trouble following your instructions. Can’t find anything to do with colour palettes.

    1. In the Dashboard, navigate to Pages or Posts → View All
    2. Edit a Page or Post (and edit the page with the Post and Page Builder)
    3. Click the Globe in the drop tab

    I don’t see a globe anywhere. Perhaps I’m not understanding what the drop tab is but I’m editing the page with the Post and Page Builder, I’ve clicked everywhere and nothing that drops down has a Globe…

    Plugin Author Rafael Ramos

    (@rramo012)

    The Drop Tab should appear at the top of the post. Here’s a screenshot: https://imgur.com/aisng0P .

    Thread Starter JboyJW

    (@jboyjw)

    Hmm… that’s not showing up for me. I don’t have the Page and Post Builder turned on globally. I have Classic Editor as the default and then I select Page and Post Builder from the top on specific pages that I want to use it on. Is that why?

    Not seeing any Javascript errors. I can add blocks with the orange Add Block button and I can edit the content and columns and such, but no drop tab at the top.

    Plugin Author Rafael Ramos

    (@rramo012)

    The drop tab should be visible even if you have another editor set as the default. As long as you have the Post and Page Builder set as the active editor for the current post, it should display. You may have encountered a bug, perhaps due to a conflict with another plugin within the editor.

    Do you have another plugin active that may modify the WordPress editor?

    If you’re familiar with the browsers console, you can open the Color Palette panel manually. Simply open up the console and enter the following command from a post with the page builder set as the current editor.

    BOLDGRID.EDITOR.Service.colorPalette.openPanel();

    This command will open the color palette panel, without needing the drop tab.

    • This reply was modified 5 years, 7 months ago by Rafael Ramos.
    Thread Starter JboyJW

    (@jboyjw)

    Aha! Yes, we use the TinyMCE Advanced plugin. I deactivated that and the drop tab worked. Updated the palette and updated the page and now our buttons work. Great!

    Let me know if you’re able to make the drop tab compatible with TinyMCE Advanced or if there’s anything I can do in TinyMCE Advanced to make it work.

    Thanks very much for your help.

    Plugin Author Rafael Ramos

    (@rramo012)

    Awesome! Yes I will address any compatibility issues with tinyMCE advanced and roll them out with the next release, sometime next week. Glad I could help.

    Plugin Author Rafael Ramos

    (@rramo012)

    @jboyjw – I’ve just released a new version of the Post & Page Builder. Version 1.10.5 has addressed a conflict with the TinyMCE Advanced plugin which causes the DropTab to be inaccessible.

    Thread Starter JboyJW

    (@jboyjw)

    Awesome! Thanks so much!

Viewing 11 replies - 1 through 11 (of 11 total)
  • The topic ‘Overrides Bootstrap Buttons’ is closed to new replies.