Customising the 'Resource' button

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!

WOW Joshua - this is great - thanks so much for sharing and especially the steps :-)

Hi Joshua, I had a feeling that I had to use coding but I couldn't find anything before. This is exactly what I needed. Thank you so much! And I really appriciate the quick reply too. Cheers :)

Of course Wendy. My joy. Glad I was able to give back!

Jessica, it took a bit to figure out what we could do here but I am glad to have found a solution which meets your needs. It was a fun challenge. (◔‿◔)

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";

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:

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!

Thank you so much for doing that Joshua - I'm just dipping my toes into this css stuff so I was keen to try out your code - of course a little information can be dangerous - LOL.  Have a nice weekend :-)

I am just stepping into JavaScript so thank you for the opportunity to stretch that muscle.  💪

Have a great weekend!