Holiday Notice: Support will be provided on a limited scale from December 24th, 2024, to January 2nd, 2025. Happy holidays and a wonderful New Year!


Topic: Way to include only Lightbox or similar modular deployment?

JimNayzium premium asked 2 years ago


Expected behavior Was hoping there was a way with simple javascript or html/front side manual coding to include ONLY a small portion of the MDB deployment?

Actual behavior I have a full on bootstrap template working on the site and the MDB css file is very instrusive in terms of its styling. It changes everything. And if I place the mdb.min.css file near the top before my other bootstrap css template files it wont' work on lightbox instances which is the sole reason I downloaded and paid for it.

Resources (screenshots, code snippets etc.) I was hoping for something maybe like $(".images_mdb").each(function() { // apply lightbox only to these dom elements and don't use the css sitewide });

Something similar to Namespaces maybe.

Or maybe I could just only use the lightbox.js module file somehow? But it seems like the CSS is what I need to make it work correctly.

But the mdb css changes all the bg-primary and everything across the site!

Please help! Thanks.


Grzegorz Bujański staff answered 2 years ago


Styles are essential for our components to function properly. In fact, we also change the default bootstrap styles. So if you want to keep some bootstrap styles original and add only some code from our library you need to create a custom MDB version.

Here's how to do it: https://mdbootstrap.com/docs/standard/getting-started/optimization/#section-custom-version-of-mdb-ui-kit

You have to import those components and styles you want to keep and create a new build.



Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

  • ForumUser: Premium
  • Premium support: Yes
  • Technology: MDB Standard
  • MDB Version: MDB5 4.2.0
  • Device: Apache Server
  • Browser: chrome
  • OS: Mac OS
  • Provided sample code: No
  • Provided link: No
Tags