[Resuelto] Bootstrap broken with recent DIVI theme update

[Autor]

Mensajes

[Rita]

Hi there
I have been using DIVI theme with Toolset TYPES, VIEWS, ACCESS and CRED.

To make the DIVI theme work Toolset so that all VIEWS are responsive 'you' gave me instructions to:
1. download 'Layouts for Bootstrap 3'
2. copy the folder called 'Bootstrap' into my parent theme (not my child theme) via ftp
3. click the box in Views settings called 'Bootstrap 3'
4. add the attached php code to the functions.php in the child theme.

This has been working great.
Then today I updated all the plugins, wordpress and DIVI to the latest versions.
DIVI upgraded and lost the bootstrap folder.

I went to your website, then downloads, and looked for the 'Layouts for Boostrap' theme. Its gone. So I downloaded Toolset Bootstrap. Pulled the 'Bootstrap' folder from this theme and dropped it into my updated DIVI parent theme.

Result: Nothing. Its doesn't work anymore. And CSS I had before is no longer responding either... My site looks aweful...

Examples:

1. These thumbnails should be in a responsive grid, 3 across each row - hidden link
2. The headings should NOT be bold, and on mouse hover the link text should change to a gold colour and not be underlined - hidden link
3. The footer should have NO background... In my child theme stylesheet I have, amongst other things:
#main-footer { background-color: #e8e8e8 !important; }
#footer-bottom { background-color: #e8e8e8 !important; }

Can someone advise me on what seems to have gone wrong? Have I forgotten something or neglected to do something?

Thanks for any help in advance.

Rita

[Rita]

I forgot to attach the php in my child theme functions.php. Attached now!

[Beda]

Thank you for contacting us here in the Support Forum

May I ask, if you still have the link to the Support Forum where you have received this former instructions?

Let me explain the background a bit.

1. DIVI theme is not using Bootstrap, which is a Framework to ensure "mobile first" design.
hidden link

2. Toolset does not require Bootstrap, but Layouts (a component of Toolset) does.
Also, some Views features like the Bootstrap GRID does require Bootstrap.

3. Bootstrap can be enqueued in any custom theme or child theme so to use it's CSS and JS, which allow you to style your site in a more responsive mode.
This does not happen automatically, but I am sure you know that:
You must use as example HTML classes and tags so to call the Bootstrap CSS.

4. Now, since you updated the DIVI theme, of course the non-default Bootstrap Folders have been removed. from your parent theme.

Let's solve this issue the proper way, shall we?

1. Download the Bootstrap Framework from here:
hidden link > Download > Download Bootstrap (button)

2. Open that folder and put (only) the bootstrap.min.css file in your Child's Theme CSS folder
3. Open that folder and put (only) the bootstrap.min.js file in your Child's Theme JS folder

4. In your child's theme functions.php, if not already present, include a wp_enqueue_scripts function as this:

function child_theme_scripts() {
    
       wp_enqueue_style( 'bootstrap-styles', get_stylesheet_directory_uri() . '/css/bootstrap.min.css', array(), '3.3.4', 'all' );

	wp_enqueue_style( 'your-child-theme-style', get_stylesheet_uri() );

        wp_enqueue_script( 'bootstrap-js', get_stylesheet_directory_uri() . '/js/bootstrap.min.js', array('jquery'), '3.3.4', true );

}
add_action( 'wp_enqueue_scripts', 'child_theme_scripts' );

As you see, we use get_stylesheet_directory_uri().
This calls the CHILD theme's style first:
http://codex.wordpress.org/Function_Reference/get_stylesheet_directory_uri

This should properly enqueue Bootstrap Styles, your child theme style sheet, and the Bootstrap JS.

Also, it will avoid complications when the Parent is updated, as everything is safely in your Child Theme.

Please let me know if you have further questions regarding the issue mentioned in this Thread
and do not hesitate to open a new thread if other issues or problems arise

Thank you for your patience.

[Rita]

Hi Beda

The previous support thread is at:
https://toolset.com/forums/topic/responsive-grid-layout-2/

Thankyou for the explanation!
I have done all that you have said, to the letter, but still no response...

Attached are:
1. the updated php file now in my DIVI child theme
2. an example of a view titled 'recent paintings grid' which is displayed, with the shortcode, on this page: hidden link

I have 'Bootstrap 3.0' ticked in under Views/Settings/Development...

I have Toolset CRED, VIEWS, TYPES and ACCESS plugins all up to to date... all plugins and wordpress are completely up to date...

I can't think what else I am missing / haven't done...

Rita

[Beda]

Thanks for the Details

You have still the "old" script register function in your Theme.

I would need to request temporary access (WP-Admin and FTP) to your site
- preferably to a test site where the problem has been replicated if possible -
in order to be of better help and look to implement this correctly on your end

Your next answer will be private which means only you and I have access to it.

❌ Please backup your database and website ❌

✙ I would additionally need your permission to edit the FTP functions.php file and add files to your Child Theme.
This is also a reason the backup is really important

Please could you provide me the additional Infos, and as well permit me to perform the required steps?

Thank you for your patience.

[Beda]

I have adjusted your Child theme code.

Please see that if you want to have bootstrap CSS more "priority" you should move the line that enqueues the Bootstrap CSS below any line that should have less priority.

Bu as far I see, it is working as expected now?

See also the screenshots.

Please let me know if you have further questions regarding the issue mentioned in this Thread

Thank you for your patience.

[Rita]

Thank you
Goodness.. thank you very much
Rita