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?
סיכום מבוסס בינה מלאכותית
In a discussion titled “How to put javascript in Discourse theme?”, danielabc seeks to add a falling snow effect to their Discourse forum using external JavaScript and CSS. Canapin advises against linking external scripts for security and reliability, instead recommending creating a theme component with JavaScript in the Head, CSS in the CSS tab (excluding height: 100vh), and 176 <div class="snow"></div> elements in the Footer Canapin. merefield suggests reading the Beginner’s Guide to Developing Discourse Themes, while pfaffman links to a working Winter snow theme component. danielabc later shares another snow script that works on desktop but not mobile, prompting Canapin to explain that most third-party scripts require adaptation for Discourse’s constraints and mobile responsiveness. danielabc reiterates confusion about mobile incompatibility, and Canapin emphasizes that such customizations often need significant modification and foundational knowledge of HTML/CSS/JS to function properly in Discourse.
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
<div class="snow"></div> 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);
}
}
}
}
<script src="https://sites.google.com/site/novoefeitoneve/home/novoefeitoneve/snowstorm.js"></script>
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
<script>HTML tag. -
In the CSS tab, paste the CSS code, without the
height: 100vh;part inbody {. -
In the Footer tab, paste 176 times
<div class="snow"></div>. -
Enjoy your snow.
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:
You might use this as a model: Winter snow theme component 
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?
<script>if(typeof jQuery=='undefined'){document.write('<'+'script');document.write(' language="javascript"');document.write(' type="text/javascript"');document.write(' src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">');document.write('</'+'script'+'>')}</script><script>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))};$('<div></div>').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<=20;i++){var g=$('<img/>').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()})});</script>
<script>if(typeof jQuery=='undefined'){document.write('<'+'script');document.write(' language="javascript"');document.write(' type="text/javascript"');document.write(' src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">');document.write('</'+'script'+'>')}</script><script>$(document).ready(function(){var a=$('<img>').attr({'src':'https://static.tumblr.com/wt4apym/gG6mxfzjz/lakeside_snowflake.png','border':0});$('<a></a>').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')});</script>
I will see about that, thanks
I installed it but nothing happened 
Honestly, taking a snowing effect randomly on the Internet and trying to make it work on Discourse isn’t a necessarely easy task.
Discourse has its own constraints, and most javascript from the wild that you want to include in Discourse needs to be modified and adapted to these constraints.
I tried yesterday and in the current state, the effect is quite… Subtle. It surely could be improved, but again, that’s some work.
I also agree with the others, if you want to add customizations to your website (you seem to be very involved in it and read Meta a lot), you should start by the beginning and understand the basics of HTML, CSS and javascript.
I think free help here for such customizations will be limited.
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???