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

yellowsnow · July 14, 2021, 10:59am

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…

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??)
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??

Teodor · July 14, 2021, 11:15am

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:

yellowsnow · July 14, 2021, 11:43am

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

Teodor · July 14, 2021, 11:48am

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.

yellowsnow · July 14, 2021, 11:54am

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

CSS

Teodor · July 14, 2021, 11:55am

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

yellowsnow · July 14, 2021, 12:04pm

yes

Teodor · July 14, 2021, 12:27pm

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:

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

all working as expected.

yellowsnow · July 14, 2021, 2:18pm

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?

Teodor · July 14, 2021, 2:20pm

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.

yellowsnow · July 14, 2021, 2:35pm

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

Teodor · July 14, 2021, 2:37pm

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

yellowsnow · July 14, 2021, 2:38pm

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

yellowsnow · July 14, 2021, 2:38pm

are you running on a docker setup?

Teodor · July 14, 2021, 2:39pm

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

yellowsnow · July 14, 2021, 2:40pm

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

Teodor · July 14, 2021, 3:02pm

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

yellowsnow · July 15, 2021, 11:05pm

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

Teodor · July 16, 2021, 7:00am

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?

nickneustroev · July 16, 2021, 10:22am

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.”