Problem with Theme Manager and different versions of Bootstrap

Wappler General Bugs
#1

======== TEMPLATE BUG FORM ========

Wappler Version : 3.7.3
Operating System : Windows 10
Server Model: PHP
Database Type: MySQL
Hosting Type: custom

Expected behavior

Making a change in Theme Manager should not replace the version of Bootstrap, removing a custom theme.

Actual behavior

bootstrap.min.css was replaced

How to reproduce

I’m not sure exactly how to reproduce this. It seem to behave differently on different sites - perhaps depending on when they were created and what version of Bootstrap was used.

I noticed a problem with a site I hadn’t worked on for about a year. The custom styles were missing*. Theme Manager showed the correct changes, but they weren’t reflected in the pages - probably because the version of Bootstrap had been updated automatically to the current version.

I downloaded the good version from the live site* and now everthing works as it should. The styles are correct, Bootstrap (4.4.1) is not automatically updated when I make changes and Theme Manager works correctly. I had to do the same with another site but a site I’m working on (also using 4.4.1) works fine - Bootstrap wasn’t replaced and Theme manager works.

What’s meant to happen with custom themes when a new version of Bootstrap is released and incorporated into Wappler? Should the old version, used for the custom theme, be retained? What’s the procedure if you want to upgrade to the new version but keep the style changes? Is it necessary to re-enter them or can the changes in theme.json be used to make the changes?

(This is one of those cases where I’m so pleased about the change which means saving a file can’t automatically update the live site. Once before I did this when bootstrap.min.css was replaced automatically. The results were very unfortunate.)

#2

The custom styles are saved in this json file, so the UI loads them. Just click the generate button and the CSS file will be generated again.

#3

Thanks Teodor. I think I tried that to sort out the problem but it didn’t work. I’ll try again. Should Wappler ever update/replace the Bootstrap css file if a new version is integrated? I’m quite sure it has done this but hopefully it’s not doing it any more.

#4

New versions of Bootstrap 4 will be added in your local folder. You just need to regenerate the theme and upload it.
Nothing is auto uploaded as of version 3.7.3

#5

I’m still not clear about how this is meant to work. As far as I can see, if you use a CDN, the Bootstrap 4.5.3 is used. If you use a custom or local version, it’s version 4.4.1. I’ve tried using a custom theme, making changes to Theme Manager etc, but it remains on 4.4.1. This was also on a new test site. Should it be switching to 4.5.3?

Something else which seems odd:

image
Given ‘custom’ is also ‘local’, I’m not sure what the difference it. Using a new site, I changed some styles with Theme Manager. I then chose a predefined style from the dropdown list. Whatever I did Bootstrap 4 Local remains as the framework. Perhaps this doesn’t mean anything.

#6

Just scroll down and choose bootstrap 5 local.

#7

Sorry, I meant update to v.4.5.3 from 4.4.1. I haven’t tried v5 yet. These are a couple of old(ish) sites. I don’t really want to change the Bootstrap version. As 4.5.3 was added to Wappler in 3.6.0, I assumed this would be used for new sites - or to update existing v4 sites, but I think perhaps this only applies if you use a CDN. Or should 4.5.3 but used for custom/local version of Bootstrap?

#8

In theory, there should be no ill effect on the style rules when changing the version of Bootstrap 4 because, as @Teodor has stated, the modifications are neatly placed in a JSON file as per

image
image1450×948 54.5 KB

There is no practical difference between versions 4.4 and 4.5.

#9

Thanks Ben. I assumed that the reason the styling had disappeared from one of my sites was that Wappler had updated the version of Bootstrap automatically, following an update and perhaps triggered by my making some tweak to the site. I thought if I updated Bootstrap to the most recent version (of v4), I would prevent this happening again.

I’m sometimes slightly confused about why such things happen and what triggers them, but they are at least much less of a problem since the last update and the change to the save/upload behaviour. Ideally it should be possible to come to a site years after it was developed, make a minor change, and upload it, and be confident that nothing else will happen/ be uploaded, potentially breaking the site. I think this is now possible, though I don’t think you could be entirely confident that the local version of the site would be left in tact.

1 Like
#10

Trying to be lighthearted, I once wrote that the problem was between the computer screen and the back of the chair. I got blasted with the threat of being removed from the forum for life.

However, the statement still holds true, especially in my case where I am gradually sliding down the other side. The problem is usually caused by a lack of knowledge. And don’t I know it!

In your case, I have a suspicion that there are other factors rather than a change in a minor version of Bootstrap that caused the issue.

I fully concur!

PS: Please read this as coming from a grumpy old fool that means no harm. :older_man:

#11

I think what is more often apparent is your abundance of knowledge - and generosity in sharing it.

#12

Tom, if you want to use the Theme Manager you should be using Bootstrap local option. This means the bootstrap css will be created in your local site folder, and not included from the CDN. Theme manager requires Bootstrap local, that’s mentioned in the documentation.

When a new Bootstrap 4 version is available, when you save a page using it, the new CSS file will be copied to the bootstrap/css folder.*
In your case if you save a page using Bootstrap 4.4.1 the new 4.5.3 will be added there. Then just go to the Theme Manager and click the Generate Theme button. This will apply your customizations to the new css file inbootstrap/css/folder.
Then upload this file to your server and you are done.

*Note - this is how all the components files (js/css) are updated. When you save a page using them, thew new files are copied to your local site folder.

#13

I’ve used the Theme Manager since it was released so I expect that’s what I’ve always done. I just happened to notice the ‘custom’ option yesterday when I was investigating the problem. I’m not sure what the custom option is for but obviously it wasn’t relevant in this case.

I think this is perhaps Wappler’s greatest flaw (IMO). For some sites it may not be a problem - eg sites which are regularly updated or being developed. For sites which are rarely updated and may be years old, it could mean it won’t be advisable to keep them as Wappler projects at all. I have some sites which are essentiallly unchanged since they were developed, some more than 10 years ago. They may certainly be in need of redeveloping - and Wappler’s the tool for the job of course - but the owner may not want to pay for this work and is happy for them to remain as they are. In such cases, it may be important that the all the PHP, JS and CSS files etc remain as they are, perhaps to be compatible with old versions of the software on the server. Updating these files could cause easily break such a site, and in ways which means it’s difficult to fix.

Perhaps I should make a feature request in relation to this. It will be become more of a problem in the future, but it has already caused problems. The change to the save/upload behaviour is a great help but it’s not a solution.

#14

That’s been one of our top requests:

#15

Thanks - I remember what’s it’s for now. I appreciate it’s potentially a very useful option. I’ve haven’t used or needed it - or at least didn’t think I needed it. Could I use this to prevent Wappler changing the version of Bootstrap (with a theme developed with Theme Manager)? Or will it do this regardless of the path/location of the files?