Customising the 'Resource' button

Hello all,

I am wondering if there is a way to customise the 'Resource' button, specifically how to make the resource button look like a button.

I have basically tried to hide my player by making everything white, as that is the look I am going for. But because of this, I have my eLearning module and a floating word on the top right hand corner that says 'Resources'. I will attach a screenshot example.

Any advice, suggestions?

9 Replies
Ari Cohen

Hi there Jessica!

I am loving the nice clean look of your player. Nice work! I am happy to help get you the rest of the way to the finish line here.

As I am not seeing a way to customize this in along with the other player elements you will need to apply a little bit of custom CSS to the element to achieve this. The way I found to apply the CSS is to set a slide trigger which executes some JavaScript which then applies the CSS styles to the tab-resources element when the timeline starts.

Here is the JavaScript I tested out to make this look a bit more like a button. You may wish to style this differently to meet your design guides:

document.getElementById("tab-resources").style.borderRadius = "10px";
document.getElementById("tab-resources").style.backgroundColor = "lightgray";
document.getElementById("tab-resources").style.color = "black";
document.getElementById("tab-resources").style.width = "100px";

I have made a super quick video to walk you through how to set this up and what the results are. Here is a link to this: https://360.articulate.com/review/content/c6e90018-dcf5-4648-a863-6e01b4bc92b3/review

You can take this and apply some roll-over styles and so much more if you wish all via CSS as well. I would point you to W3 schools website for more on that side.

Let me know if this gets you moving in the right direction!

 

 

Wendy Farmer

Hey Joshua

noob question here.  I'm trying to do the same for the menu tab. When I do the Inspect element I don't see a button id for the menu so I tried to use tab-menu but it's not working - I'm using Chrome.  

In the Inspect element when I click the resources I can see the Div Class and then button Id below it but when doing the same for Menu the Button Id doesn't show.

but when I add the JS to your code it's not working.

document.getElementById("tab-resources").style.borderRadius = "10px";
document.getElementById("tab-resources").style.backgroundColor = "red";
document.getElementById("tab-resources").style.color = "white";
document.getElementById("tab-resources").style.width = "100px";
document.getElementById("tab-menu").style.borderRadius = "10px";
document.getElementById("tab-menu").style.backgroundColor = "red";
document.getElementById("tab-menu").style.color = "white";
document.getElementById("tab-menu").style.width = "100px";

Ari Cohen

Hey there Wendy!

So sorry inspect element in chrome was not giving you what you needed here. I don't have chrome on my machine at the moment but was able to find the proper element for the Menu button to be #tab-outline.

Here is where I found this in the DOM:

Screenshot showing element ID

I added just a smidgen of CSS in developer tools to test this.

Your updated code should read as:

document.getElementById("tab-resources").style.borderRadius = "10px";
document.getElementById("tab-resources").style.backgroundColor = "red";
document.getElementById("tab-resources").style.color = "white";
document.getElementById("tab-resources").style.width = "100px";
document.getElementById("tab-resources").style.margin = "0 3px";

document.getElementById("tab-outline").style.borderRadius = "10px";
document.getElementById("tab-outline").style.backgroundColor = "red";
document.getElementById("tab-outline").style.color = "white";
document.getElementById("tab-outline").style.width = "100px";
document.getElementById("tab-outline").style.margin = "0 3px";

You will notice I added a margin of 3px to the left and right of the both buttons. This is to ensure they don't touch. You can refine this as you desire.

Hope this helps!