NodeJS, design - frustrating - or we just don't understand it (including theme manager thingy)

Wappler General
#1

Hi Everyone,

here is what we try to achieve with wappler.
A beautiful designed project/job board for the film industry.
While the backend looks like it will do amazing, a lot of explanations, tutorials at that front…

The front-end design - drives us nuts at the moment…

  1. ok there is a Theme Manager but there is nowhere a "save this theme as a template button to be found - or only we can’t find it??)

  2. the NodeJS layout/content page concept… which we understand as a Master page / normal page in design software - makes sense. And yes you are right there is a BUT coming…
    But why are the CSS design tabs are dead? So how can I say - this Button should complete round etc etc etc. as we attached the CSS before - it shows up but nothing works… (3.9 or 4.0 same same)

Are we missing something??

2021: The Year in Review
#2

The theme manager does not generate a template. It creates a new local Bootstrap CSS file, with the options/styles/colors you selected in the theme manager. On clicking the generate button, the new file is created. So this new custom look and feel for Bootstrap will be used for all the pages in your site, instead of the default one.

As for your question 2 i don’t really understand what is the issue here:

#4

Explanation about the NodeJS styling / design tab issue… or misunderstanding :slight_smile:

#5

Have you added the Style file to your main layout page? It should be added there and then the layout page needs to be saved.

As for your custom colors, they are saved in a js file in your project root.

#6

It has - that classes showing up - but don’t do anything …

CSS

Screenshot 2021-07-14 at 15.54.01
Screenshot 2021-07-14 at 15.54.01475×690 41.1 KB

#7

But is this css file included on your layout page, and is your layout saved?

#8

yes

#9

Do you see the changes in the browser? Do you see them when you hit the refresh button in Wappler design view?
I just tested this and it works fine:

  1. On the layout page i open the Design panel and click add style file.
  2. Save the layout page
  3. Open the content page using this layout. Open the design panel, do some changes.

all working as expected.

#10

thanks -
maybe there is a bug in our system…
Just to verify.
After you added the style file to your layout page save it and then refresh the content page should the design modul just show up or you have to connect the style file there again to the content page?

Ah and which version? 3.9 or 4?

#11

Once you add it on the layout page and save it, when you open a content page based on this layout the design panel will show you the options to style the selected element.
Testing this on the latest beta.

#12

We figured it out!!!
It’s if you have the 3.99 and the 4.0.12 parallel installed there is some kind of path issue…

  • we uninstalled 3.99 had to click in the 4.0.12 in the file path on the index.ejs and relink the layout page again AND magic!!! It works superbly!!

conclusion: the note on the Wappler page that you could run 3.99 and 4.00.12 parallel is not true anymore…

Thank you @Teodor for taking the time

#13

I have them both installed, so that’s not an issue.

#14

Thank god it is work as expected now we were already wondering if we got crazy or the design panel is the worst in history :joy:

#15

are you running on a docker setup?

#16

Yes, and there is no problem to have both installed.

#17

It is 100% here - we tried it on 2 machines - btw they are Macs not sure if that has an impact.

#18

Can you explain this please? What was the wrong path? Where?

#20

Hi - we had it running and then it started again to not link the theme - so we gave up - we are reinstalling the machines and try again with 4.8 b13

#21

Can you explain what exactly happens? What do you mean by “not link the theme”?
Can you please provide a step by step explanation so we can recreate the issue?

#22

Teodor, sorry for interrupting, but I was a bit confused about styles in NodeJS too.

Now I see, that I have to open the design panel on the layout page in order to create style.css. And only after that, I can use styles on the content page.
That logic is understandable, but not quite obvious for all newbies. Especially because the design panel is available and “working” even when styles.css is not connected to the layout page.

So, maybe it is better to disable the design panel in content page if the corresponded layout page hasn’t connected style.css?
And if someone tries to open the design panel in this case, show them some tooltip with an explanation like you write here:
“1. On the layout page open the Design panel and click add style file.
2. Save the layout page
3. Open the content page using this layout. Open the design panel, do some changes.”

1 Like