Jump to content

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

Recommended Posts

I would love your help. I want to change the colours of the audioblocks to either red or black but I tried to find the section to enter code and it's not like I'm used to in wordpress. I'm afraid to break something. Is this something that's possible to do even with limited tech skills? The grey looks awful on my site. 

Link to comment

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 

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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 

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (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 

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (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 

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (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 

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (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.