Skip to main content
Solved

Custom Scripts Custom Pages

  • January 23, 2025
  • 10 replies
  • 358 views
charles.zimmerman
Forum|alt.badge.img+3

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.

 

Best answer by Philcahill87

​@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! 

Lifelong Learner

    10 replies

    L
    Forum|alt.badge.img
    • LisaRollins
    • Inspiring
    • 275 replies
    • January 24, 2025

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

    Lisa Rollins - Unite Us
    Philcahill87
    • Philcahill87
    • Community Manager
    • 62 replies
    • Answer
    • January 27, 2025

    ​@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! 

    Stay Educated!
    Thought Industries

    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

    charles.zimmerman
    Forum|alt.badge.img+3

    ​@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.

     

     

    Lifelong Learner
    jonsynnott
    • jonsynnott
    • TI Employee
    • 424 replies
    • February 7, 2025

    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

    charles.zimmerman
    Forum|alt.badge.img+3

    ​@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

    Lifelong Learner
    charles.zimmerman
    Forum|alt.badge.img+3

    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>

     

    Lifelong Learner
    Philcahill87
    • Philcahill87
    • Community Manager
    • 62 replies
    • February 12, 2025

    ​@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

    Stay Educated!
    charles.zimmerman
    Forum|alt.badge.img+3

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

    Lifelong Learner
    Philcahill87
    • Philcahill87
    • Community Manager
    • 62 replies
    • February 14, 2025

    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. 

    Stay Educated!


    Terms & ConditionsCookie settingsAccessibility statement