NotAHologram Posted November 14, 2019 Share Posted November 14, 2019 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; } johnbuedel and RiverstoneCreativeCo 2 Link to comment
lu.diehl Posted November 14, 2019 Share Posted November 14, 2019 Hey @NotAHologram, can you share a link to your website and pwd if it is pwd protected? Link to comment
NotAHologram Posted November 17, 2019 Author Share Posted November 17, 2019 Happy to do so ... the site can be reached at nahpods.com (also .. thanks for responding ... i know it took a little bit of time to write back). Link to comment
RiverstoneCreativeCo Posted February 20, 2020 Share Posted February 20, 2020 Was anyone able to figure this out? Link to comment
tuanphan Posted February 22, 2020 Share Posted February 22, 2020 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 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
Claire_auck Posted March 19, 2020 Share Posted March 19, 2020 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 comment
tuanphan Posted March 19, 2020 Share Posted March 19, 2020 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 ✌️ 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
Claire_auck Posted March 19, 2020 Share Posted March 19, 2020 2 minutes ago, tuanphan said: If you share link to your site, I think i can give the code ✌️ @tuanphan you are magic...... ✌️ Thank you for your help!! https://meningitis-foundation.squarespace.com/what-is-meningitis pa33word Link to comment
tuanphan Posted March 19, 2020 Share Posted March 19, 2020 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; } 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
Claire_auck Posted March 19, 2020 Share Posted March 19, 2020 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 comment
tuanphan Posted March 19, 2020 Share Posted March 19, 2020 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? 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
Claire_auck Posted March 19, 2020 Share Posted March 19, 2020 1 minute ago, tuanphan said: Can you take screenshot of your audio block? Sure thing! Link to comment
tuanphan Posted March 19, 2020 Share Posted March 19, 2020 Which space do you want to change color, can you highlight in there? 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
Claire_auck Posted March 19, 2020 Share Posted March 19, 2020 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 comment
tuanphan Posted March 19, 2020 Share Posted March 19, 2020 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; } 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
Claire_auck Posted March 19, 2020 Share Posted March 19, 2020 1 minute ago, tuanphan said: .sqs-widgets-audio-player.dark { background: green; } That worked, however the larger area outside the player is still effected. Link to comment
tuanphan Posted March 19, 2020 Share Posted March 19, 2020 Did you insert both code? Remove first code 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
Claire_auck Posted March 19, 2020 Share Posted March 19, 2020 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!🙂 Link to comment
camilla.ciappina Posted June 11, 2020 Share Posted June 11, 2020 @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! Link to comment
tuanphan Posted June 11, 2020 Share Posted June 11, 2020 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? 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
Dominikbel Posted August 6, 2020 Share Posted August 6, 2020 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. Link to comment
tuanphan Posted August 6, 2020 Share Posted August 6, 2020 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. 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
Dominikbel Posted August 6, 2020 Share Posted August 6, 2020 https://fox-capybera-46ll.squarespace.com/ Link to comment
RiverstoneCreativeCo Posted August 17, 2020 Share Posted August 17, 2020 Thanks guys! I just ended up using a nice code plugin to handle mine . You can see it in action at : https://www.susanniemann.com/ The plugin, I believe, was from squarestud.io ?? Yep - Here - https://legacy.squarestud.io/search?type=product&q=audio I don't work for them and don't receive any kickback. Just liked the result. Link to comment
ashleemundywebsitede Posted October 21, 2020 Share Posted October 21, 2020 Quote Is there a way to make the font bigger inside the audio block as well? Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment