Hi @itchycode.
Tomorrow I am on a business trip and can check back (most likely) next week.
Really, thanks for your effort, I value this.
Sorry if the answer is a little bit longer…
I guess, this is a conceptual or design limitation of Bricksbuilder, I hope they will fix this with the new components…
Let me first of all explain in a more detailed way:
- If you use swup.js anything inside the #swup container will be transitioned to another page (but it can be any other javascript framework).
- This #swup container can be everywhere on the page - so, it is created below “main”.
- Therefore #swup-div does not include any inline CSS, which is a must-have.
- The CSS must cover all inserted Bricks-elements, regardless if directly inserted or especially inserted via template elements.
- To make my workflow easier, typically I use nested sub-templates to create “html-blocks”, so I do not need to touch other parts of the page again and be flexible.
Therefore, often I use different templates inside of a single template - in this case below the #swup-container.
The overall structure could look like this:
html
head
section-template #nav_header
body
main
section
#top_element
#swup div
** section-template #id123 tpl_a **** on this level I need all 3 template CSS
** section-template #id456 tpl_a1
** section-template #id789 tpl_a2
#any_other element
footer-template #footer
Bricks will auto-generate the inline-CSS inside of the head.
But this will not help me, I need the inline-CSS below the #swup div (marked with **)
Now I have two options:
a) create for each template the inline-CSS (so in each template I put a code block) OR
b) generate all inline-CSS (tpl_a1, tpl_a2 and tpl_a) below the #swup container (so only one code block in the parent template)
To make it very simple:
Please create yourself 2 child-templates (with only a styled div) and put both inside a parent template (maybe next to each other in a grid).
Now create the inline CSS for all these 3 templates and print it out inside of each template or alternatively together in the parent template.
You should now see 3 different CSS: /* TEMPLATE SHORTCODE CSS (ID: xxx) */
Is this possible for you, if so how you did this?
Of course, I tried also, but to answer your question:
[bricks_template id=“xxx”] does in this case not help, as it will not create the CSS inside the template.
I created the above-mentioned 2 child + 1 parent template, but it will not generate all the needed output:
\Bricks\Assets::$inline_css_dynamic_data → yes, gives the CSS, but sometimes 1 CSS sometimes 2 CSS (seems, it loops and appends the next CSS) - so (from my point of view) not a secure way to use, in addition the parent CSS is missing
\Bricks\Assets::$inline_css → array with the elements and the CSS but it is called: template_12345, so -again- I need the template ID, in addition: it appends the template CSS as well
Again, to avoid all this, I ONLY need the template ID.
INSIDE of each template, I would like to put a PHP script to get the ID + the related CSS)…
But how this is possible?
If I am putting the template ID manually all is fine, but this would be anachronistic…