Skip Navigation

[Resolved] Style conflicts with Bootstrap and 3rd Party Plugins or Themes.

This support ticket is created 7 years 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
- - 14:00 – 20:00 14:00 – 20:00 14:00 – 20:00 14:00 – 20:00 14:00 – 20:00
- - - - - - -

Supporter timezone: Asia/Ho_Chi_Minh (GMT+07:00)

This topic contains 52 replies, has 12 voices.

Last updated by CharlesB2907 6 years, 7 months ago.

Assisted by: Beda.

Author
Posts
#598954

Replicating and fixing these issues I have a question:

In standard WordPress posts the Content Template defined with Toolset covers the whole page, however, in a new CPT the Content Template defined with Toolset does not cover the whole page.

In my tests, which use:
- DIVI (vanilla settings fresh install)
- Views
- Types
- Bootstrap is loaded by Toolset

I cannot make the fullwidth work.
It does not apply when I set it either for the single post or the content template.
Left and right sidebar work fine.

If I disable Toolset I see that fullwidth means 80% of maximally 1080px, but I cannot make this work with the above steps, the content is always container size no matter if I load or not the bootstrap.

I believe this is a BUG, where the settings are not respected in Content Templates
Can you confirm this as well?

#599018
imagewithproblem.jpg
contenttemplateposts.jpg
2017-12-14_16-58-30.jpg
2017-12-14_16-50-48.jpg
2017-12-14_16-49-41.jpg
2017-12-14_16-37-26.jpg
2017-12-14_16-34-52.jpg
2017-12-14_16-29-00.jpg

If I have not misunderstood you, my conclusions are the following:
1) A content template for the posts can take the whole width if Bootstrap is not connected. If Bootstrap is connected leaves on both sides (right and left) of the page some small strips. See the screenshots.
hidden link
2) A content template for a new CPT, in my case 'Base de conocimientos', even if it has a configuration similar to the content template of the posts, does not take the entire width of the page regardless of whether Bootstrap is connected or not. This looks like a Toolset Views bug independent of Bootstrap. See the screenshots.
hidden link
Beda, Is this what you asked me?

#599033

I do not see how I could make full width work - as I outlined earlier it does not apply, no matter on what post type.
It always stays container width

It's a missing class in the body class:
et_pb_pagebuilder_layout

I reported this to the Developers.

The margin you saw, are probably the same as elsewhere:
Bootstrap uses paddings of 15 pixel - that is not used by DIVI, so it changes the appearance.
That is also reported.

#599038

Do not forget to tell them all the appearance problems of the header.
Thanks for your help Beda.

#599065

Beda... check out hidden link ... I bought this plugin, and they were able to figure out the full width thing.

#599980

Dear ,

I do not know if this is the place to tell my issue but after installing the toolkit my site is now like garbage and all my efforts are gone. I have to publish my site this week as I promised my fans.
I only purchased this to make a form for adding a product by vendors and now I lost the whole day trying to minuplate with the css file.
I did choose this (This site is not using Bootstrap CSS)
but no lock.
if you can fix my site tomorrow would be great otherwise I have to take my money back and go purchase another one.

Regards

#600141

can you delete my post because it is now fixed by your support.

#600766

Hi,

I'm Mohammed, the Toolset support team leader.

I'm posting here just to inform you that Beda is not working these days.I've asked another supporter to handle your request.

Please wait and we will be in touch with you again very soon.

Thanks.

#603507

Any advance in these problems?
Please, it would be good to already have a solution for all these problems.
Thanks.
Best regards,
Francisco R.

#604454

Nobody says anything? 🙁

#604727

I apologize, as I was on vacation and came back just now.

No, there has been no work so far.
I gathered all issues, showed why they happen and proposed solutions.

I can show you a transcript:

==================================================================================================

Tests made with DIVI from elegant themes (vanilla) and Toolset Types + Views, having the settings turned to "Toolset should load Bootstrap 3.0".

All tests are chronological from install > Visit HomePage > Visit Posts > Visit Pages > Visit Custom Posts.

1. Link Styles overwritten by Bootstrap (especially in the Menu Items):
Example:

.nav > li > a:hover, .nav > li > a:focus  background-color: #eeeeee; 

==> Should be changed in the Theme by adding a custom class to the href elements.

==> Or you need to add custom CSS to re-style the hover text color of DIVI, with an !important .
Not really the best solution.

2. All items added to HTML by DIVI that use the class "container" will be overwritten by the Bootstrap Classes for "container"

==> Should be changed in the Theme by adding a custom class to the containers, not using a vanilla name like "container"

==> This has the effect that if you look at your template with "This site is not using Bootstrap CSS" you will see exactly what DIVI outputs, when you activate "Toolset should load Bootstrap 3.0" things will get margins and paddings added by Bootstrap.

==> The main reason why DIVI should change this and not Toolset or Bootstrap is, they call this "Fullwidth" template.
But they add width: 80%;max-width: 1080px; while they do not pass a padding, which Bootstrap does, hence overwrites it.

3. Divi adds a padding to all "ul" items

padding: 0 0 23px 1em;

which affects for example "wpv-pager-nav-links" since it'll now have a "1em" padding to the left.

4. Select fields are completely overwritten by Bootstrap, through our ".form-control" class.
This should be expected, as we provide a Bootstrap syntax. If you do not want to use that, but theme's, then it can be disabled in the View when inserting the Searches (Legacy code)

We could say the same for pagination elements using bootstrap.

These are the main issues seen, + the ones appearing when you begin to use WooCommerce, but that requires another round of tests.

Then there is a Bug, on Toolset side, where Fullwidth background not applied to Content Templates.
That is reported and has been solved here:
https://toolset.com/forums/topic/documentation-update-request-for-broken-fullwidth-layout-for-custom-post-types/#post-604460

Now, I tried to expedite a decision on these issues, because as you see, they are not solely on Toolset.
They require a careful decision, wether to hack or to not hack, wether to document it or not, etc.

The issue is on the Lead Developer's to do list, and when they reach this task I will get notified with the decisions.

I cannot suggest any thing else but to add Custom CSS to fix the issues, for now.

You may use the feedback form if you wish to enter in contact with the Management about this issue, I can assure that the issue is properly reported and debugged, but I cannot provide you the official decision and fix, as there is none yet.

I apologize the delay, and thank you for understanding.

#604787

Beda,
It has been quite a while since the beginning of all the problems, I hoped that all these problems were already solved.
If the problems are going to be solved in the course of 1 month I could wait, but if the problems are not going to be solved at that time then you should now provide me with a workaround to solve them.

Best regards,
Francisco R.

#605239

A recent version of the AVADA theme introduced "Global" elements, a great feature that allows elements to be easily updated across an entire site. This feature works fine until used on a page using a Toolset layout, or specifically a Woocommerce Product page using a Toolset Layout.

It broke the page.

I changed the setting to Allow the Theme to Load Bootstrap 3.0 and no longer have the problem. Just wanted to post in the event other AVADA/Woocommerce/Toolset users encounter the same issue.

Thanks,
ch

New threads created by Beda and linked to this one are listed below:

https://toolset.com/forums/topic/avada-globals-conflicts-with-toolset-bootstrap/

#605297

I have discovered a conflict with the Total theme (hidden link).
When Bootstrap is enabled, none of the menus on the website will show. Once you change the setting to "This site is not using Bootstrap" or only option apart from "Toolset should load Bootstrap 3.0", the menus reappear.
Configuration.
Wordpress: 3.9.1
Total Theme: 4.5.4.1
Toolset Types 2.2.21
Toolset Layouts 2.1
Toolset views 2.5.1

New threads created by Beda and linked to this one are listed below:

https://toolset.com/forums/topic/total-theme-conflicts-with-toolset/

#606022

There is a permissions issue in your support forum. This is showing as one of my tickets but it's not.