Change font color of title for audio player widget

Illdy
1

I inserted audio player widgets in the About section of my site (using illdy theme) but the “title” shown above the player is in grey text. It’s hard to read on a dark background. How can I change the color of this font to white. Screen cap is attached. Thank you.

2

Hi there

Hope you are having a good day and thank you for your question :slight_smile: In order to check your question i need to see your live website, please provide url and i will take a look

3

Thanks so much for the quick response. I’m building the site using a subdomain until I go live. Here’s the URL: pjjcomm.jacobsvo.com.

Please let me know if you need more info. Thanks again!

4

hi

Please add this CSS in appearance - customize - additional CSS

.widget_media_audio {
color: white !important;
}
Thanks!
Colorlib Support Team

5

I appreciate the help, but unfortunately, no change. The text is still grey. Here is everything in the additional CSS entry:

.fa{
font-size: 30px;
color: #0073b2;
}
/Reduce font size/
#header .bottom-header h1 {
font-size: 55px;
}
/Logo font size/
#header .top-header .header-logo {
font-size: 25px;
font-family: Biryani;
}
/change jumbotron font and description/
#header .bottom-header h1 {
font-family: Biryani;
}
#header .bottom-header .section-description {
font-family: Biryani;

}

@media only screen and (max-width: 700px) {
#header .top-header .header-logo {
font-size: 15px;
}

/Widget skill bar removal/
#about .widget_illdy_skill:nth-child(1), #about .widget_illdy_skill:nth-child(2), #about .widget_illdy_skill:nth-child(3) {
display: none;
}

img.alignright { float: right; margin: 0 0 1em 1em; }

img.alignleft { float: left; margin: 0 1em 1em 0; }
img.aligncenter { display: block; margin-left: auto; margin-right: auto; }
.alignright { float: right; }
.alignleft { float: left; }
.aligncenter { display: block; margin-left: auto; margin-right: auto; }

.widget_media_audio {

color: white !important;
}

}

6

Just wanted to add - the color for the text is now white on my iPhone, but still not on my computer. I’ve tried several browsers (Chrome, IE, Firefox) and no change). Thanks.

7

Hi there,
Thanks for writing back.
In that case, could you try out the following CSS code:

div#media_audio-12 {
color: #fff !important;
}
div#media_audio-11 {
color: #fff !important;
}

I hope this helps.
Best Regards,
Support.

8

Thanks for trying again. I’m afraid this didn’t work either. I’m going to have to rethink the site or maybe use a different template, unless there’s something else I can edit. Maybe editing the style.css file directly?

9

Hi there,
Thanks for keeping in touch.
In this case, could you perhaps provide us with some temporary access credentials to this site so that we can have a closer look into this.

I look forward to your reply.
Best Regards,
Support.

10

Thank you sticking with this. Here are your temporary credentials:
User: Colorlib1
pw: Ample5Times#

11

Hi there,
Thanks for the access.
In this case, I have properly added that CSS code.
Please check on your site and let us know if you have any more questions.
Best Regards,
Support.

12

That’s fantastic! Thank you so much!

I have one more question – is there a way to adjust the line spacing of my text logo for mobile use? As you can see on the site, the spacing gets very wide when viewed on a phone. Thank you!

13

hi there

yes that’s possible, please add this css:

@media only screen and (max-width: 700px){
#header .top-header .header-logo {
line-height: 22px;
}
}

14

Perfect – thank you!

15

Hello there,

I am glad the solution worked for you.
Please feel free to contact us again in the future regarding any other issues.

Best Regards,
Support