Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

CSS CODE FOR AUDIO BLOCKS


NotAHologram

Question

Hello,

I am attempting to change the code for my Audio Blocks in the Fiver template to match my site colors (I use the audio blocks to post episodes of a podcast.)   I was able to change the background color of the main bar and the color of the tile font but can not  seem to change the author text color, play button or progress bar (one trick was to realize the title font was set for the LIGHT setting, not the DARK setting of Audio block).  Was hoping for some suggestions.  Here's the code I've been using and thank you in advance

Tim. 

 

.sqs-widgets-audio-player {
     background:  #2f518f !important;
     background: -webkit-linear-gradient( #2f518f) !important;
     border: 02px solid #fff952 !important;
     border-radius: 0px 0px 0px 0px;
     color:  #fff952;
   }
   .audio-author {
     color: #fff952 !important;
   }
   .audio-title {
     color: #fff952 !important;
   }
   .volume .bar.active {
     border-right-color: #fff952 !important;
   }
   .volume .bar {
     border-right-color: #fff952 !important;
   }
   .progress {
     background: none repeat scroll 0 0 #707070 !important;
   }
   .controls {
     color: #fff952 !important;
}

Screen Shot 2019-11-14 at 10.09.52 AM.png

Link to post
  • Answers 26
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Popular Posts

Hello, I am attempting to change the code for my Audio Blocks in the Fiver template to match my site colors (I use the audio blocks to post episodes of a podcast.)   I was able to change the back

That worked like a charm! Thank you so much!

Posted Images

Recommended Posts

  • 0
On 2/21/2020 at 1:15 AM, RiverstoneCreativeCo said:

Was anyone able to figure this out?

If you share link to your site I can take a look

You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan, work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. 

Link to post
  • 0

I'd love to know if this is possible, did anyone figure this out?
I'm using podcasts for the first time and i'd love to be able to change the colour of the block to match my site.

Fingers crossed someone clever can help 😉 

Link to post
  • 0
1 minute ago, Claire_auck said:

I'd love to know if this is possible, did anyone figure this out?
I'm using podcasts for the first time and i'd love to be able to change the colour of the block to match my site.

Fingers crossed someone clever can help 😉 

If you share link to your site, I think i can give the code ✌️

You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan, work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. 

Link to post
  • 0
2 minutes ago, Claire_auck said:

@tuanphan you are magic...... ✌️ Thank you for your help!!


https://meningitis-foundation.squarespace.com/what-is-meningitis
pa33word

 

Add to Home > Design > Custom CSS

.audio-block {
    background: green;
}

 

You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan, work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. 

Link to post
  • 0
2 minutes ago, tuanphan said:

Add to Home > Design > Custom CSS


.audio-block {
    background: green;
}

 

Thanks!!!
Just added it and it's changing the area outside the block rather than the block itself.
Help!
 

Link to post
  • 0
11 minutes ago, Claire_auck said:

Thanks!!!
Just added it and it's changing the area outside the block rather than the block itself.
Help!
 

Can you take screenshot of your audio block?

You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan, work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. 

Link to post
  • 0

Which space do you want to change color, can you highlight in there?

You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan, work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. 

Link to post
  • 0
Just now, tuanphan said:

Which space do you want to change color, can you highlight in there?

I'd like to change the player itself. The only options in the settings are 'light & dark'. It would be great if the player itself could have a unique colour. 

Link to post
  • 0
4 minutes ago, Claire_auck said:

I'd like to change the player itself. The only options in the settings are 'light & dark'. It would be great if the player itself could have a unique colour. 

.sqs-widgets-audio-player.dark {
    background: green;
}

 

You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan, work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. 

Link to post
  • 0
1 minute ago, tuanphan said:

Did you insert both code?

Remove first code

Rookie error......i replaced it.
Now both sections are in place and it looks amazing! 
You are soooooo helpful and very clever, thank you so much!
🙂

 

Screen Shot 2020-03-20 at 11.38.39 AM.png

Link to post
  • 0
5 hours ago, camilla.ciappina said:

@tuanphan I've tried the second code on my website and it only shows the color and I am seeing as the editor mode. 

Am i doing something wrong?

https://trumpet-tulip-8chj.squarespace.com/the-card-that-means-what-it-says
password: portfolio

 

thanks!

Which code did you use?

You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan, work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. 

Link to post
  • 0
3 minutes ago, Dominikbel said:

Hi, I wondered if someone could help me out with this too. I've got a crazy font for the rest of my headings and wanted something clearer for my audio blocks.

If you share link to page where you use audio block. We can check easier.

You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan, work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. 

Link to post
  • 0

@ashleemundywebsitede

Add the following to Design > Custom CSS.

.sqs-widgets-audio-player .player {

  font-size: 20px;
  
  }

.sqs-widgets-audio-player .title-wrapper .title {

  font-size: 1.2em;
  line-height: 1.1em;
  
  }

Let us know how it goes.

Hello I'm Thomas. I've been getting websites up and running for 26 years. I want to help you at whatever level meets your needs, from as little (if you're a DIYer) to as much as you need.

Link to post

Create an account or sign in to comment

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


×
×
  • Create New...