Need help understanding styles and themes

[Burner918]

Hi all,

I’m new to Wappler and so far I’m loving it. Forgive me because this is going to sound really basic and stupid, but I need some help understanding the Theme Manager vs. the Design pane vs. the Styles pane.

I set up my brand colors and fonts in the Theme manager and made sure everything looked great in the Theme preview page. Then I created a nav bar on my page and in the properties set the Text color of the nav items to ‘Primary’. It was a bit misleading at first, because the interface still showed the default blue for primary so I assumed that the purple I had set as my primary in the Theme manager wasn’t saved. I decided to select the text color as Primary nonetheless and was happy to see that my nav items turned to the purple I had set in the Themes manager. So far so go.

However, when I open the page in the browser, all my nav items seem stuck to the left right (when in fact they should be on the right – only the logo is supposed to be on the left) under my brand logo. Furthermore, all the nav items have what a default serif look with an underline (Times New or something) despite me setting my Base font to ‘Inter’ in the Themes manager.

I looked at the Design tab and see “No user style file attached” and after reading the documentation about the Design panel I understand that this is only for attaching an external css file if I choose to do so. The CSS Styles panel as I understand it would allow fine control to all CSS properties on the page.

I’m more comfortable with sticking to the easier App Structure properties panel but what I thought I set there doesn’t seem to show up when I open my page in a browser.

I’ve taken the Getting started with Wappler course by Ken Truesdale (which is an awesome course by the way), but I haven’t been able to find any tutorials explaining styling in a lot of detail. Appreciate any help on this aspect. Again, apologies if this is very basic – I’m just starting out with Wappler.

Thanks once again.

[mebeingken]

Hey Sean,

A couple things in using the Theme manager.

You must have your framework set to Boostrap 4/5 local. If you use a cdn, it will not work.

Next, make sure to clear your cache in the browser (or better yet, disable it using the dev console and always have it disabled while developing)

If that doesn’t help, come on back.

[Burner918]

Thanks a bunch, Ken. I’ll give this a go and come back if I need more help. Much appreciated.

[Burner918]

Hi Ken,

No luck. Reset my framework to Bootstrap 5 local (removed and added again) and cleared my browser caches as well as disabled it in the chrome dev tools.

Here are some screenshots that may explain what I’m seeing.

Here’s what I see in Wappler

and here’s what I see in the browser

Also, not sure why I’m getting an underline on my nav items.

[brad]

Looks to me like you haven’t uploaded your theme to your server.

Also be sure that you have the same bootstrap source (BS Local) on both your project settings and on your page.

[Burner918]

Thanks, Brad. I believe I did.

Also, when you be sure to have the same bootstrap source on both the project settings and on the page, what does that mean?

I checked the project setting and it is bootstrap 5

and my page styles has this

[brad]

Be sure that bootstrap 5 local is also selected at the page level.

Do you have a live link you can share?

[Burner918]

Bootstrap 5 local is selected in the page frameworks.

Sorry, no link. Today is day 1 using Wappler developing on localhost.

[brad]

Hmmm, those were the most common problems for what you are experiencing. I’m out of ideas.

Maybe try a full publish? Shouldn’t make a difference if you are using local.

Hmmm, I just noticed that you are using Node.js. Also try saving your main.ejs file. I see you haven’t saved that one.

[Burner918]

Thanks a ton, Brad. I really appreciate all the help. I just saved the main.ejs file too. Still no luck.

I guess I’ll tinker around and perhaps just delete the project and start a new one and try again.

[brad]

In my opinion if you are just doing a testing/learning project I would use PHP instead of Node. Less layout/include stuff to deal with. Even I find node projects finnicky to deal with.

However with PHP, I’m not sure, you may need a local server such as WAMP or MAMP. I use MAMP Pro for years. Not sure if Wappler has a local server for PHP.

[George]

Make sure the main layout page is saved … I see a blue bullet indicating it isn’t saved.

And further about general Theme manager usage see:

Theme Manager

[Burner918]

Thanks, George.

[Burner918]

Thanks, Brad. I’ll give that a try. Yes, this was a test project and I just started a new one. Strangely it seemed to work just fine. The nav bar in the browser looks just as it does in Wappler so maybe I ended up breaking something along the way previously when tinkering around. Once again, thanks for all your patience and help.