Skip to main content

Folks, I need help.  I got a guy who wants his page to have a gradient background and I have never been able to get custom scripts to do anything functional and sometimes it doesn’t like the script so won’t save it.  I put this in there as an example to share and it does absolutely nothing.  Thoughts? Suggestions?  There is not a single page of documentation on this, and I have not in nearly 6 years heard of anyone pulling anything off with this option on a custom page, but I do see people with page backgrounds.  Help plz.

 

I don’t have anything to help, Charles, but I do want to follow this so I can see any responses. Good luck!

​@charles.zimmerman this would be much easier with CSS. JS is just overcomplicating it. 

if its only for 1 page just add a HTML widget and add the following code:

<style>
.container{
background: rgb(34,193,195);
background: linear-gradient(0deg, rgba(34,193,195,1) 0%, rgba(253,187,45,1) 100%); }

</style>

 

Note: Additional CSS may be required to fully make this pretty! 

Hi ​@charles.zimmerman 

Can you please confirm that the code provided by Phil above gives you what you need for your gradient pages?

 

Thanks a lot

 

Jon

​@Philcahill87 ​@Community Team I am just getting to this and the HTML widget didn’t change anything but I did make my own cool custom learner advertisement.  :) 

I can’t show it as a GIF or attachment because files are now limited to 5mg.  Let’s see if a screenshot works but you are missing so much in that it is inline and follows you up and down the page until you close it.

 

 

Hi ​@charles.zimmerman 

I will let ​@Philcahill87 look at the CSS/ HTML element for you

But I’d love to see what you have done with your Advertisement, can you record a quick Loom of you showcasing it. I know there are probably lots of ppl in the community who would love to see this too.

Or if you want to arrange a zoom call I can record it and share here too.

Thanks a lot

Jon

​@jonsynnott  I’d love to.  Thank you for the honor.  I will take you up on your offer for a loom or a zoom this week if you don’t mind to set up the opportunity to share.  I am East Coast and morning are best.  Contact me via email and we can set it up charles.zimmerman@interplaylearning.com  Very best for now, CZ

Here is the code.

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {font-family: Arial, Helvetica, sans-serif;}

.callout {
  display: inline-block;
  position: fixed;
  bottom: 20px; /* Keeps it visible when scrolling */
  right: 10px;  /* Ensures it stays right-aligned */
  max-width: 250px; /* Prevents it from being too large */
  text-align: center;
  border-radius: 10px;
  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2);
  background: white;
  padding: 10px;
}

.callout-header {
  background: #911313;
  font-size: 16px;
  color: white;
  padding: 10px;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}

.callout-header img {
  max-width: 80%;
  height: auto;
  display: block;
  margin: 0 auto 5px;
}

.callout-container {
  background-color: #ccc;
  color: black;
  padding: 10px;
  font-size: 14px;
}

.closebtn {
  position: absolute;
  top: -5px;
  right: -5px;
  width: 25px;
  height: 25px;
  font-size: 18px;
  color: white;
  background: #911313;
  border: 2px solid white;
  border-radius: 50%;
  cursor: pointer;
  text-align: center;
  line-height: 22px;
  font-weight: bold;
  z-index: 100;
  box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
}

.closebtn:hover {
  background: white;
  color: #911313;
  border: 2px solid #911313;
}
</style>
</head>
<body>

<!-- Floating Inline Box (ONLY ONE INSTANCE) -->
<div class="callout">
  <button class="closebtn" aria-label="Close" onclick="this.parentElement.style.display='none';">×</button>
  <div class="callout-header">
    <img src="https://d36ai2hkxl16us.cloudfront.net/thoughtindustries/image/upload/a_exif,c_fit,w_800/v1/course-uploads/c50f33e0-665b-4906-a26e-7d18bc3b9c5e/2bcho7fib3hz-DUAL_ThinLogo.jpg" alt="DUAL Logo">
    <p>Coming Soon!</p>
  </div>
  <div class="callout-container">
    <p>NBIS has some big news coming! The RMSS Insured Portal will be unavailable Saturday, February 15th – Monday, February 17th for scheduled system maintenance.</p>
  </div>
</div>

</body>
</html>

 

​@Philcahill87 ​@Community Team I am just getting to this and the HTML widget didn’t change anything but I did make my own cool custom learner advertisement.  :) 

I can’t show it as a GIF or attachment because files are now limited to 5mg.  Let’s see if a screenshot works but you are missing so much in that it is inline and follows you up and down the page until you close it.

 

 

This works for me with out any issues

Thanks ​@Philcahill87 .  The trick is you have to impersonate a Learner.  It doesn’t show in edit or preview modes.

Thanks ​@Philcahill87 .  The trick is you have to impersonate a Learner.  It doesn’t show in edit or preview modes.

Correct it will not show in edit or preview modes, but just viewing the page will show it, no need to impersonate but impersonate will aslo work. 

Reply


Terms & ConditionsCookie settings