Successes Applying Custom Bootstrap Themes to Existing Wappler Site?

[umadmin]

Has anyone had success applying a custom Bootstrap theme (like one purchased here https://themes.getbootstrap.com/) to an existing Wappler BS5 site? I've seen this guide: Custom themes in Wappler 7 but changing the framework from local to custom and updating the paths updates the project settings, but doesn't seem to update my layout pages. If I modify the layout manually, saving the layout page results in the local bootstrap files being auto-added back to the head:

Page Includes: Asset add to head: /bootstrap/5/css/bootstrap.min.css
Page Includes: Head node changed successfully

Thanks for any tips/tricks on doing this! I'm sure it's easier to apply to a fresh project than a 3+ year old one, but am trying to update the look/feel without a significant rewrite

[kfawcett]

Themes typically bundle their own versions of bootstrap files and additional js/css files, so you're somewhat on your own when using them (i.e. you cannot add the Wappler boostrap components without having conflicts). This also means some of the Wappler-designed bootstrap elements will not play well with the custom theme because they always include the Wappler bootstrap js/css when you add them.

Also, the Elements panel will not show any of the bootstrap elements without the Wappler Bootstrap js/css being added. This doesn't mean you can't manually add the bootstrap elements, but it's just one of those areas where you have to rely on manual insertion. Typically the themes give you examples of elements that they've designed for you to insert.

That said, it is doable, but your mileage may vary for when you start to run into challenges and need to work around the Wappler editor limitations.

[umadmin]

Thanks and that makes sense. What I’m really looking for is just an upgraded stylesheet, and not any of the appconnect components. Any thoughts on where to source just the style updates?

[kfawcett]

I may not be understanding your ask correctly. Stylesheets, by themselves, are like having an engine (CSS) without a car (HTML). The HTML tags need relevant classes for the styles in the stylesheet to be applied. So you can't use it without the HTML from the theme. Additionally, the javascript used in the theme's design is important as well.

If you want to use a theme, it's probably best to start with new pages in your project to add the theme's HTML, CSS files, and JS files, and then port over any functionality (i.e. server connects, element you've built like tables. etc.) from the existing page to replace the existing page. If you are creating a web server project, you'll mostly likely be taking the theme's code and slicing it up into the content and layout pages anyway (i.e you don't need the header on every page that's in the theme. You'll only have it on the layout page).

[umadmin]

Perhaps I need to spend more time examining the theme. My original thought was that a custom bootstrap theme would customize standard bootstrap classes (e.g. a “card” class would still be a “card”, it would just be styled like the custom theme and not like standard bootstrap). I was hoping I could basically just swap bootstrap.min.css for the theme style sheet that would be compatible with minimal retrofitting required. I’ll continue to investigate. Thanks for the responses!

[kfawcett]

It will, but most likely will also have it's own styling on top of the base bootstrap framework.

[ben]

To enable the template to be workable in Wappler:

1. create a new project called mizzle or similar. It should have its own server and no server model.
   

2. copy all of the files from the template folder and paste these in the root folder of the new project.

Under Files you will now see the assets, css and docs directories as well as all of the HTML files.

You are now ready to use Wappler to modify the files. Starting with index.html:

1. Remove all of the script under <!-- Dark mode -->, including the remark.
   

   

2. Remove the following lines:
   

   

3. Add App Connect, Bootstrap 5 local, Font Awesome 6.5.2 local and Bootstrap Icons local.
   

   

4. Save the document and it will come up with this dialog:
   
   Click on the Yes button. This will add links to the swiper and to the navigation script.
   
   

These actions will have messed the page up to a certain extent. These problems can be easily fixed down the track. First, we will tackle the theme button.

1. Delete everything between <!-- Dark mode option START --> and <!-- Dark mode option END -->
   

   

2. Then click the plus button in App and add the Theme Manager
   

   

3. For the button, click on the plus button in Nav List, and choose Theme Switch
   This will add the switch to the code, replacing the original switch.

4. Configure the switch as shown
   

   

From here on, going forward, it will be easy to modify the page using Wappler and Bootstrap.

Any further problems, please start a new discussion for each problem.

Edit: I would have preferred starting a NodeJS project, this will make it a lot easier to maintain, while also being able to use Server Connect. If you are up to it, let us know.

2nd Edit: A great template, lots of care has been takem by the author. Wel worth the $.

3rd Edit: To make it easier, replace bootstrap/5/css/bootstrap.min.css with assets/css/style.css:

1. Copy assets/css/style.css and paste it in bootstrap/5/css/
2. Delete bootstrap/5/css/bootstrap.min.css and rename style.css to bootstrap.min.css

This is a workaround that I do not like. In my opinion, bootstrap.css should never be touched. Additional styling should be placed in a separate style sheet.

[umadmin]

Wow, thanks for digging into this! I am at day-job now but will dig in later tonight. I will probably start with a new node project to get it working and then make another attempt to get apply to my existing project. Thanks again! Will DM you about opportunities to buy you a beer