Jump to content

want to change color of audioblocks to red or black Help I'm a total newby

Recommended Posts

Can you share your website URL and the page the audio block is on? Thanks!

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment
  • 2 weeks later...
On 3/4/2023 at 9:52 PM, DanielaAcitelli said:

Hi Ziggy, Sorry it took me so long to see your reply. My website url is https://www.danielaacitelli.com/ I hate the grey background behind my audiosamples I'd like to make it navy at least. I'd be grateful if you can help. Regards, Daniela

 

Add to Design > Custom CSS

.sqs-widgets-audio-player.dark {
    background-color: navy !important;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
On 3/4/2023 at 2:52 PM, DanielaAcitelli said:

I'd like to make it navy at least.

You've got a solution above to make the audio block navy, is there anything else you want to change?

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment
56 minutes ago, DanielaAcitelli said:

Hi Ziggy & tuanphan, Unfortunately I'm so new at this I can't figure out how to add that code to the website. I don't even know how to find the code area. 

@DanielaAcitelli Follow this:

4 hours ago, tuanphan said:

Add to Design > Custom CSS

.sqs-widgets-audio-player.dark {
    background-color: navy !important;
}

When you log in to your website, in the dashboard on the left of your screen, click on Design then Custom CSS, and paste the code, then click save.

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment

Add this CSS:

.sqs-widgets-audio-player.dark {
    background-color: #000033 !important;
}

Notice where the change from the previous, and where you can change the colour.

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment
2 minutes ago, DanielaAcitelli said:

It WORKED! Thank you sooo much for your help!! Regards, D

Looks great! Can you mark @tuanphan post as the solution to your question, and give a thumbs up?

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.