Problem with Theme Manager - no change to Bootstrap files

Wappler General
#1

I haven’t used Theme Manager for a while - not since Wappler v3. As far as I can see, it doesn’t seem to be working, but I could be doing something wrong. When I last used it, I didn’t give much thought to using - it just seemed to do work as I expected. However, looking at it again, I don’t really know what the various buttons/icons are meant to do.

I wanted to make a change to the h2 font size - to change from the default $font-size-base * 2 to something like $font-size-base * 1.8. I tried this and nothing seemed to change, even after a restart. I tried deleting boostrap.min.css to see if that might result in a new file being created, but it didn’t. Restarting after that, a new default Bootstrap css file was created. The only thing that does change is theme.json which looks correct. I’m pretty sure it’s a bug but I realise I don’t know what the options are for and I could be missing something basic.

I would have thought this would make the changes, whatever else I clicked. It didn’t.

image

I’m not sure of the difference between the first button:
image
… and the third:
image
If you open Theme Preview, perhaps you need to click Quickly Generate Design Theme to update it - but I don’t know.

The middle button is obviously an upload button (after the ‘Build Design Theme for Production’ has been clicked?).

I would be grateful to hear if anybody has used Theme Builder recently, and for any advice on how it should work.

#2

Is this a specific variable in advanced mode not working for you Tom?
Have you tried changing anything in the basic mode?

#3

Yes, I’ve tried other changes - using the basic options - but it didn’t make any difference.

#4

Are you sure your site is using bootstrap 4 local include and not cdn? :slight_smile:

#5

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

#6

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.

#7

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.

image
image562×560 38.6 KB

#8

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.

#9

<link rel="stylesheet" href="bootstrap/4/css/bootstrap.min.css" />

#10

Is the Bootstrap 4 include on your page recognized by Wappler? Do you see Bootstrap 4 local selected in the menu:

Screenshot_1
Screenshot_1944×701 176 KB

#11

Yes:

image

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.

#12

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.

#13

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:

image
to:
image

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:

image

This seems to be a bug. If so, is there a way round it, apart from compiling a new version outside Wappler?

#14

Add the $font-size-base variable first and then add the H2 font size after it.

Screenshot_2

1 Like
#15

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.

#16

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.

#17

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
#18

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
#19

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
#20

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.