Forum Discussion

LARROQUEFREDERI's avatar
LARROQUEFREDERI
Community Member
2 years ago

Text color "Ressource tab"

Hi there,

I need to change the default color of the 'Resources' tab (only this one) of the Storyline 360 modern player.

Do you know if it's possible (with Java Script for example)?

Thanks !

Fred

  • Hi LARROQUE, and thanks for reaching out!

    I see you've connected with my teammate, Mcgem. That was a great call!

    For anyone wondering about the same question, the Modern Player colors are set by default and only change depending on the selected player color (Dark, Light, or Custom). Hopefully others in the E-Learning Heroes community can jump in with a way to achieve this using JavaScript!

  • with this script you can modify the background and the text color of the resourse panel

    if( window.cssPatchResourcePanel !== "done") {
      style = document.createElement('style');
      style.textContent = `
        #resources-panel {
          background-color: red !important;
          border-color: white !important;
        }
        #resources-panel .panel-arrow-path {
          background-color: red !important;
          border-color: white !important;
        }
        #resources-panel .cs-listitem:hover {
          border-color: white !important;
        }
        #resources-panel .file-name {
          color: blue;
        }
      `

      document.body.appendChild(style);
      window.cssPatchResourcePanel = "done";
      
     console.log("Resourse Panel patched");
    }

    you could add a javascript trigger in the Slide Master

    result:

    https://360.articulate.com/review/content/e6f0aa6a-6c24-4177-a146-0be293a5ac52/review

     

  • Merci beaucoup Jürgen d'avoir pris le temps de me répondre !
    Je me suis peut-être mal exprimé mais ce que je veux faire c'est changer la couleur du texte de l'onglet "Ressources" du menu (mais pas le texte du document à télécharger)

  • (in english, sorry :-))
    Thank you very much Jürgen for taking the time to answer me!
    I may have expressed myself badly but what I want to do is to change the color of the text of the "Resources" tab of the menu (but not the text of the document for download)

  • Brilliant !!!
    thank you very much, Jürgen... you're the boss :-)
    Have a good day

    Fred

    • Jürgen_Schoene_'s avatar
      Jürgen_Schoene_
      Community Member

      no problem - this is the new global script for the slide master -> on timeline starts

      if( window.cssPatchResourceButton !== "done") {
      style = document.createElement('style');
      style.textContent = `
      body.green #resources-link {
      color: #00AB4F;
      }
      body.red #resources-link {
      color: #FF2E17;
      }
      body.yellow #resources-link {
      color: #FFEB3D;
      }
      `

      document.body.appendChild(style);
      window.cssPatchResourceButton = "done";

      console.log("Resourse button patched");
      } else {
      document.body.classList.remove('yellow');
      document.body.classList.remove('red');
      document.body.classList.remove('green');
      }

      and for the three slides -> trigger on timeline starts

       document.body.classList.add('green');
       document.body.classList.add('red');
       document.body.classList.add('yellow');

      result:

      https://360.articulate.com/review/content/09d03857-ac71-4322-b7bd-0d77495e7812/review

       

  • Now I know: "JS" does not mean Java Script, but Jürgen Script :-)

    Thank you very much again.
    I wonder how you know how to do all this...

    I would love to help you in the future...maybe one day? !

    Have a good day

    Fred