-
Posts
-
What format or syntax should I be using to add custom code to the code box?
Specifically, I wanted to recreate a snow fall effect from this coder (link below), who wrote the effect in CSS & JS. The referring site uses no switches, but when I wrap her code in the <style> and <script> tags, nothing works.
Things tried: Add two code blocks, one for the CSS and one for the JS. I’ve alternated the order of the two code boxes. I’ve also combined the code into one box and alternated the order there.
Ideally, I’d like to keep the code just for the landing page and not on a global setting. I’m looking for general guidance in using this tool, but if there is specific guidance to this example, we would be grateful. I’ve read the documentation on your site, but I didn’t see how to apply the code into the code box in the proper format. Is the code block a Kriesi code-written tool or a re-implementation from a WP tool function? If the latter, where could I read more?
Kind Regards,
E
Hey ecshopper,
Thank you for the inquiry.
You can use the wp_footer hook or the wp_add_inline_script function to add custom scripts to the site.
// https://developer.wordpress.org/reference/functions/wp_add_inline_script/
Below are a few examples using the wp_footer hook.
// https://kriesi.at/support/topic/slideshow-in-gridrow/#post-1396236
// https://kriesi.at/support/topic/style-inserted-by-layout-architect/#post-1397586
// https://kriesi.at/support/topic/content-slider-not-opened-by-default/#post-1397388The css can be added in the Enfold > General Styling > Quick CSS field.
Best regards,
IsmaelHi Ismael,
Thank you for your response. From the examples you have provided, the script seems to be inserted into the functions.php file. Is this correct? If so, would I localize it by using the code block (Content: empty, Advanced>Developer Settings>Custom CSS Class: insert element tag?
Hi,
Yes, the code has to be added in the functions.php file. And if you want to only apply it on a single page, just look for this line.
const body = document.querySelector('body');Replace “body” with the unique class name of the page.
const body = document.querySelector('.page-id-123');Best regards,
Ismael
- You must be logged in to reply to this topic.