I found a java script with a falling snow effect, and I was wondering, is it possible to put this script in the theme? I tried to insert where I put CSS, but the site bugged lol, is there another place I can insert it or does discourse not accept these types of scripts?

Hi, script tags go in the Head tab of your theme/component. :slight_smile: [image]

Can you insert any kind of javascript code in the head? And when there is HTML code combined with CSS, do I put it in normal CSS or combined CSS???

Can you show the code you want to insert so we can understand better what you want to achieve?

html is 176 times and CSS is body { height: 100vh; background: radial-gradient(ellipse at bottom, #1b2735 0%, #090a0f 100%); overflow: hidden; filter: drop-shadow(0 0 10px white); } @function random_range($min, $max) { $rand: random(); $random_range: $min + floor($rand * (($max - $min) + 1)); @return $random_range; } .snow { $total: 200; position: absolute; width: 10px; height: 10px; background: #fff; border-radius: 50%; @for $i from 1 through $total { $random-x: random(1000000) * 0.0001vw; $random-offset: random_range(-100000, 100000) * 0.0001vw; $random-x-end: $random-x + $random-offset; $random-x-end-yoyo: $random-x + ($random-offset / 2); $random-yoyo-time: random_range(30000, 80000) / 100000; $random-yoyo-y: $random-yoyo-time * 100vh; $random-scale: random(10000) * 0.0001; $fall-duration: random_range(10, 30) * 1s; $fall-delay: random(30) * -1s; &:nth-child(#{$i}) { opacity: random(10000) * 0.0001; transform: translate($random-x, -10px) scale($random-scale); animation: fall-#{$i} $fall-duration $fall-delay linear infinite; } @keyframes fall-#{$i} { #{percentage($random-yoyo-time)} { transform: translate($random-x-end, $random-yoyo-y) scale($random-scale); } to { transform: translate($random-x-end-yoyo, 100vh) scale($random-scale); } } } }

I had tried to use this javascript, but it didn’t work

I wouldn’t recommend linking an external javascript if you don’t know how reliable it is. If the remote script change, it could break your forum. I suggest you create a new theme component in your admin panel instead. Name it something like “snowflake effect”. Edit this new theme component. In the Head tab, copy-paste the javascript code inside a HTML tag. In the CSS tab, paste the CSS code, without the height: 100vh; part in body {. In the Footer tab, paste 176 times :grimacing: . Enjoy your snow. [image] :warning: Note that this effect was created by someone in their own HTML environment, isn’t “Discourse-compatible” out of the box and thus it may cause issues on your forum.

You really ought to read this @danielabc if you haven’t done so already: [image] Developing Discourse Themes & Theme Components Developer Guides Discourse Themes and Theme Components can be used to customize the look, feel and functionality of Discourse’s frontend. This section of the developer guides aims to provide all the reference materials you need to develop simple themes for a single site, right up to complex open-source theme components. This introduction aims to provide a map of all the tools and APIs for theme development. If you prefer a step-by-step tutorial for theme development, jump straight to: Themes vs. Theme Compon…

You might use this as a model: Winter snow theme component :snowflake:

I found this snow effect and I really liked it, but it only works on desktop, on mobile it doesn’t, why? Will I have to activate something on the mobile to work? if(typeof jQuery=='undefined'){document.write(' ');document.write(' ')} if(!image_urls){var image_urls=Array()}if(!flash_urls){var flash_urls=Array()}image_urls['rain1']="https://static.tumblr.com/wt4apym/gG6mxfzjz/lakeside_snowflake.png";image_urls['rain2']="https://static.tumblr.com/wt4apym/gG6mxfzjz/lakeside_snowflake.png";image_urls['rain3']="https://static.tumblr.com/wt4apym/gG6mxfzjz/lakeside_snowflake.png";image_urls['rain4']="https://static.tumblr.com/wt4apym/gG6mxfzjz/lakeside_snowflake.png";$(document).ready(function(){var c=$(window).width();var d=$(window).height();var e=function(a,b){return Math.round(a+(Math.random()*(b-a)))};var f=function(a){setTimeout(function(){a.css({left:e(0,c)+'px',top:'-30px',display:'block',opacity:'0.'+e(10,100)}).animate({top:(d-10)+'px'},e(7500,8000),function(){$(this).fadeOut('slow',function(){f(a)})})},e(1,8000))};$(' ').attr('id','rainDiv') .css({position:'fixed',width:(c-20)+'px',height:'1px',left:'0px',top:'-5px',display:'block'}).appendTo('body');for(var i=1;i ').attr('src',image_urls['rain'+e(1,4)]) .css({position:'absolute',left:e(0,c)+'px',top:'-30px',display:'block',opacity:'0.'+e(10,100),'margin-left':0}).addClass('rainDrop').appendTo('#rainDiv');f(g);g=null};var h=0;var j=0;$(window).resize(function(){c=$(window).width();d=$(window).height()})}); if(typeof jQuery=='undefined'){document.write(' ');document.write(' ')} $(document).ready(function(){var a=$(' ').attr({'src':'https://static.tumblr.com/wt4apym/gG6mxfzjz/lakeside_snowflake.png','border':0});$(' ').css({position:'absolute',right:'0px',top:'22px','z-index':'90'}).attr({'href':'http://tutorialuntukblog.blogspot.com/2011/10/tutorial-kelopak-bunga-berguguran-di.html'}).append(a).appendTo('body')});

How to put javascript in Discourse theme?

Development

danielabc (Daniela) November 20, 2022, 9:40pm 16

Thanks for clarifying my doubts, one thing I didn’t understand is that the effects work on the site for desktop, but not for cell phones, why is it???

Topic		Replies	Views
Adding a javascript in a post? Product Support	1	1646	October 2, 2019
How to add Javascript to Footer Of Posts? Product Support	3	993	October 10, 2021
Javascript code snippet injection for cookie tracking Product Support	3	969	April 8, 2021
How do you add custom JS to a theme? Product Support	1	2185	March 27, 2019
What's the fastest and easiest way to add a persistent javascript file or snippet Development	4	1781	August 5, 2020

How to put javascript in Discourse theme?

Related topics