Yes, I’ve tried other changes - using the basic options - but it didn’t make any difference.
Are you sure your site is using bootstrap 4 local include and not cdn? 
Yes. I created a custom theme for it, with custom fonts and colours. It’s just possible I created this theme before Theme Manager was added to Wappler, but I don’t think so. I’ll do some more investigating tomorrow.
Thanks
Not sure what you mean by this.
In order to customize your Bootstrap 4 layout using the theme manager you need to include bootstrap 4 using the “local” option in Wappler.
I don’t understand what do you mean by custom theme and what exactly did you do on your page.
I mean a theme which is not the default Bootstrap theme - eg a theme with custom colours and fonts etc. The theme is more or less as I want it - I just want to make some changes to the theme.
I’m obviously using a local version of Bootstrap css (because the theme is applied), but is there a setting ‘local’ somewhere? I think perhaps I did created this theme before the Theme Manager was available, but the styles appear in the Theme Manager correctly. I may have recreated the theme when TM was released.
A screenshot may explain the issue better. Here, you can see the theme is applied to the Theme Preview. I’ve changed the background to #000 and clicked the space rocket icon. I would expect the preview to change accordingly; it doesn’t. While I’ve been trying to make changes, I’ve had File Explorer open to check for changes to bootstrap.min.css; whatever I do, the file is not modified. The file is not read-only.
Was Bootstrap 4 included on your page using the Wappler frameworks menu?
Please paste the exact code of your bootstrap css include from your page.
<link rel="stylesheet" href="bootstrap/4/css/bootstrap.min.css" />
Is the Bootstrap 4 include on your page recognized by Wappler? Do you see Bootstrap 4 local selected in the menu:
Yes:
I would have thought Wappler must recognise the Bootstrap include as all the pages look fine. I’ve only come across an issue since I wanted to make a change to the theme.
Can you try making some simple change on some other project/page where bootstrap 4 local is included - just to test?
Everything looks fine in your setup. Also i tested the theme manager and it’s working perfectly fine.
I’ve found the problem. When things didn’t work, I switched from the Advanced screen to the Basic, to try some simple changes but I had left my initial change in place.
I wanted to change the default:
to:
I don’t know if I just didn’t notice before, but in any case, now I see this when trying to apply this change:
This seems to be a bug. If so, is there a way round it, apart from compiling a new version outside Wappler?
Add the $font-size-base variable first and then add the H2 font size after it.
1 Like
Great - that fixed it. Thanks!
Is this a bug or are there other similar steps which need to be taken when using the Advanced tab? In this case, no change needs to be made to the $font-size-base variable, so I wouldn’t have though it should be necessary to choose it.
The variable needs to be added there before the change is applied to another one using it, so it’s like declaring it before you use it.
Not sure if this can be improved in some way (to include it automatically?) - @George will check this.
That makes sense, and that’s fine now that I know. I wouldn’t very often change these variables, so it’s not much of a problem to find out what the variable is called and then adding it - it’s just an extra step. If it can’t easily be improved, perhaps a message could appear if you choose variables, explaining what needs to be done.
1 Like
No we can’t improve that because of the include order. Just have to be mentioned indeed in the docs that if you want to use any bs4 variable you have to add it first.
1 Like
This is the sort of thing that’s easily forgotten because the process isn’t done very often (at the start of a project only I suspect) so could a paragraph of text on that form be added to remind us? Or a ‘?’ icon which shows the info on hover like you have in other places?
1 Like
In the examples in the docs it’s actually mentioned that:
In order to use a specific variable as a value for the Primary Color variable we need to add it here first.
It’s probably that this use case is too specific, will change the docs accordingly with an example which is not so specific.
I agree with @sitestreet, that some indication on the UI would be most helpful and doubtless save people (like me) a lot of time.
There are of course many issues which can be resolved by referring to the docs. On the other hand, one of the great things about Wappler is that most of it is very intuitive (once you’ve got over the initial hurdles). You could happily use Theme Manager without guessing you need to refer to the docs - because it seems so easy to use and intuitive; generally, it works as you expect.
It didn’t occur to me to look in the docs to explain why Theme Manager appeared to have stopped working. I assumed it was an issue with the new version or something peculiar in my setup or code. A little note or ? as suggested would be a better solution (or an additional one).
2 Likes
‘?’ icons all over Wappler can actually negate most of the need for docs. Yes, docs are vital for the learning process but as a reference I would much rather have a tooltip in Wappler. eg. I use the tooltip shown for date formatting all the time. And this issue is another perfect example.
3 Likes