Adjusting the font settings for text in a widget

Hi Helga! I’m excited about working with you and your team! I run a small website for Christian ministries (heavensound.com) and found your system through a Google search. I’ve created a number of Audio Player widgets for use in the artist pages on my website, but I’ve run into an issue. The size of the track titles when I place the widget on the artist page is much too large, so the titles aren’t easily visible. Is there some CSS code I can add to the player code to adjust the text size to a smaller font size, say 12 pt or so?

2 Likes

Hello @HeavenSound, and thanks a lot for all your kind words!! We’re happy to hear that you love our service and our widgets :hugs:

As for the Audio Player widget, I’d be delighted to help, but I didn’t find a widget on your website, unfortunately.

Could you please send me a direct link to the page with the widget so that I can better understand the use-case and provide a solution?

I don’t use the audio player widget but possibly on the bottom left of this screen is an example?
https://heavensound.com/artists/sacredcall.htm

1 Like

Exactly! Thank you so much, @Hugh!

@HeavenSound I’ll ask the developers to put together a CSS code, and I’ll get back to you as soon as I have any news :slight_smile:

Hi John, thank you for your patience!

Here I am with the CSS codes for you:

This one changes the size of the titles in the list, and it is already added to your widget Custom CSS:

.global-style, [class*="PlaylistItem__Title"] {
font-size: 11px!important;
}

.global-style, [class*="PlaylistItem__Duration"] {
font-size: 11px!important;
}

.global-style, [class*="ProgressBar__TimeStart"], [class*="ProgressBar__TimeEnd"] {
font-size: 11px!important;
}

And you can add this one too, in case you’d love to change the size of the currently playing track’s title:

.global-style, [class*="BigImage__Title"] {
    font-size: 11px!important;
}

Please let me know if the codes worked!

2 Likes

My apologies for the delay in getting back to you on your request. I dropped the proverbial ball and I’m really thankful that Hugh picked it back up. Thank you, Hugh!!

1 Like

Helga, this worked perfectly! Thank you so much!

1 Like

Awesome news, thanks a lot for the update, John!

And thank you, @Hugh, for speeding up the investigation :hugs:

See you around!

Helga, is it permissible to ask one additional question through this email, or should I submit it on the site? It has nothing to do with the questions answered in this email previously

You’re most welcome to ask any questions here, I’ll be very happy to assist!

I can move it to the corresponding category in our forum if needed :slight_smile:

I want to utilize your buttons feature to put a button beside each music track that takes the user to a specific URL. I know how to do that with the buttons currently on the site, but is there a way to add a custom button image from an image file?

Hi John, my apologies for the late reply – it seems we’re in different time zones :frowning:

Unfortunately, at the moment there is no option to upload custom icons for buttons, I’m very sorry for the inconvenience!

Your request sounds really nice and reasonable, so I was happy to add it to our wishlist. Please vote for it in order to get updates via email: An option to upload custom images for buttons | Feature Wishlist

If you have any other questions, please do let me know :slight_smile:

Hi Everyone!
Thanks so much for the comments in this post.
I’m wondering if anyone could tell me how to create a increase of †he size of the Rating “Name” and “Caption” If anyone could help me with †his I’d very much appreciate it! CSS text or another method would be great! Thank you so much!

1 Like

Hi @Michael_Ishikawa :wave:

Sure! This code should do the trick:

.es-review-author-name {
  font-size: 15px;
}
.es-review-info-info-block {
    font-size: 15px;
}

Check it out and let me know if it helped :slightly_smiling_face:

Thank you so much Max for the help!
I will try this and get back to you!
Best,
Michael

Michael Ishikawa
mbackup99999@gmail.com

This email, and any attachment, is intended only for the person or entity to which it is addressed and may contain confidential and/or privileged material. Any review, re-transmission, copying, dissemination or other use of this information by persons or entities other than the intended recipient is prohibited. If you received this in error, please contact the sender and delete the material from any computer.

2 Likes

Thanks Matt! This is so cool!
You’re a talented dude. What’s your LinkedIn?
Would love to connect.
Michael

Michael Ishikawa
mbackup99999@gmail.com

This email, and any attachment, is intended only for the person or entity to which it is addressed and may contain confidential and/or privileged material. Any review, re-transmission, copying, dissemination or other use of this information by persons or entities other than the intended recipient is prohibited. If you received this in error, please contact the sender and delete the material from any computer.

2 Likes

Wow, thank you for your kind feedback :grinning:

Unfortunately, I am not using LinkedIn. However, if any questions come up or any assistance is needed, don’t hesitate to contact me here. I’ll be happy to help!

1 Like

Thanks so much again for the code, Max!
Do you know if there’s any way to put a spacer between the star ratings and testimonial text?
Would love if you could come up with a code variation for this as well. Thank you so much!

Michael

Michael Ishikawa
mbackup99999@gmail.com

This email, and any attachment, is intended only for the person or entity to which it is addressed and may contain confidential and/or privileged material. Any review, re-transmission, copying, dissemination or other use of this information by persons or entities other than the intended recipient is prohibited. If you received this in error, please contact the sender and delete the material from any computer.

1 Like

Sure! I’ll check it with the devs and let you know if it’s feasible :slightly_smiling_face:

1 Like

Hey @Michael_Ishikawa, happy to see that the codes worked for you!

We’ll be happy to see you on our LinkedIn page, feel free to follow us: https://www.linkedin.com/company/14051761/ :blush: