Multiple themes on a page

Wappler General Need Help
1

I have a project for create some restaurants menus to read via a QR codes.

The functionality to retrieve the information for menus is the same for all. But the layout for each menu is different (colors, typo, footer, header etc).

Is any way to load the layout page dinamically? Or to load a different css file with conditions depending on url ??

What is the best approach to make this ??

Is like 50 different layouts.

Thanks like always.

2

Is this info dynamic? How is it stored? Is it in a database? Have you already styled these 50 pages via css classes?
Please provide some more details.

3

The menus dishes data is on the database and is dynamic get the information via the URL variable.

I already have 50 css files for one for each menu. Major changes on clases each file. What I use to have on dreamweaver is the Dynamic Template selection. Now I am migrating all of this to Wappler. I am open to hear any advice.

4

So the page has the same classes, but you are loading a different CSS file based on the url param?

5

Yes. I think this is the easier way. What do you think?

6

You can set the app root to Page:

Screenshot 2023-12-15 at 18.04.12

Which will allow you to use dynamic data in the page <head> tags, so you can do things like:

<link rel="stylesheet" dmx-bind:href="'/css/' + query.style + '.css'" />

for your css files. So this code looks for query param named code. If you load:

https://site.com/index.hteml?style=style1

the page will load '/css/style1.css'

Just adjust this as per your needs.

1 Like
7

I forgot that you can change the app root.

Can I use for name de css a data storaged on database too??

Thanks for your help.

One last question what happen if one theme dont have a special css only the base one. Is possible to add or remove the entire link tag? remove conditionally?

If exist —> <link rel="stylesheet" dmx-bind:href="'/css/' + query.style + '.css'" />

if not --> add nothing

Is that posible @Teodor??

8

Sorry to barge in, after all @Teodor’s solution is a great one.

Another method is to encapsulate the menu in a div similar to <div id="styleA" class="menu">.

You will need just the one stylesheet like:

.menu {
  background-color: yellow;
}
.menu h1 {
  color: black;
}
.menu p {
  color: black;
}
#styleA.menu {
  background-color: greenyellow;
}
#styleA.menu h1 {
  color: red;
}
#styleA.menu p {
  color: blueviolet;

Where the style ID has not been set:

image
image1607×279 24.4 KB

And where it has been set:

image
image1597×285 25.4 KB

9

I forgot that you can change the app root.

Can I use for name de css a data storaged on database too??

Thanks for your help.

One last question what happen if one theme dont have a special css only the base one. Is possible to add or remove the entire link tag? remove conditionally?

If exist —> <link rel="stylesheet" dmx-bind:href="'/css/' + query.style + '.css'" />

if not --> add nothing

Is that posible @Teodor??

10

Hey @Chackmool,

I suppose you can do it but inside the dmx-bind:href
Set in there the condition and create an empty/generic css file to be assigned

*I don’t know if you can just include the whole stylesheet link definition inside a Conditional region and check if there is a stylesheet related… If not don’t render the link at all
(Give it a try to see…)

11

Is that possible @Teodor? Using conditional region on head?

12

I haven’t tried that but just saw this answer from George and I suppose that something like what I suggested would ‘break’ the code