I’m assuming this is a database thing, let me know if I’m wrong.
Here’s what I’m trying to do: Google slides allows you to choose templates and themes, how would I do this on Bubble?
For design theme: Ex. I want a user to choose a design template they like so it’ll have the colors from the theme.
For template theme: Basically the position of the text, what the thing looks like.
Only thing that comes to mind is if user selects: Template 1, the page layout will change, but I’m not sure if that actually will impact the display of it when others look at it after it’s published.
If you can tell me how you’d approach letting someone create power points with those 2 options above (Theme & template/structure), that would be super helpful!
Note: I’m not actually trying to create Google Slides, just using it as an example!
I’ve implemented this type of thing before. It’s only been partially successful in my view, but for what it is worth here’s what I did.
Colour schemes - easy - as long as you don’t use styles you can dynamically set the colour value of text, backgrounds, etc etc etc. This works quite nicely - and you can use a colour picker to let Users select their own colours.
Layout templates - what I did which I wasn’t especially satisfied with but worked well enough for my purposes, is have multiple groups, hidden and collapsed, each group being each various “template” (all the same content, just cosmetically different) - Then depending on which “template” the User selected - display that group (while hiding all the others).
The problem I had was how to dynamically add new templates easily - because I had effectively hard coded the templates into the app. I toyed with the idea with using embedded HTML - having that HTML in the DB - as a way to manage templates - but it wasn’t the direction I wanted to go.
I realise bubble is “no code” but there are somethings that can not be done with no code.
I have implemented dynamic templates easily by using CSS in the SEO header section. That said, these are not completely user definable. Rather I created a number of choices the user could select from. This also allow us to ensure all elements would look good. For example elements with a black outline with a black background… no go.
Step 1.
Create CSS in the SEO section (example) #temp01-body { background-color: blue; } #temp01-header {background-color: red; }
Step 2.
Create a Thing = Theme
The thing should have fields for each element CSS attribute you want. For example, header, body, button, text box, …
Step 3.
Create a row for each them variation. In this example I would have two rows.
Step 4.
Add a field in the User Thing: Theme Index (type number).
Step 5. (Optional)
Create a Custom state on the page (or each page) you have called User-Theme of type Theme. (from step 2). I do this so that the Theme table is loaded once for the page, since I have created a single page app if the user changes themes it is instantaneous. But, you can Do Search with a theme is change. >> Since I have created a custom state I load the theme names (not the CSS) into this custom state.
Step 6. When the user changes the theme they are actually only changing the User->Theme Index
Finally. Step 7
For each element you want a part of the theme applied add the ID. For example:
index->User-Theme:Item# CurrentUser->Theme Index.
This code effectively changes the CSS ID of the element to match the theme definition in the SEO section from Step 1.
Voila — dynamic themes. The number of themes you can create this way is endless. However, you have to create the color combinations in advance. I stopped at 8 for now. BUT, our app will offer upgrades which can incude more themes or even “custom” themes.
