Sahil007 Posted January 13 Share Posted January 13 URL: mango-silver-m9c6.squarespace.com Password: 1234 Hi there, I want to do some style changes to a google sheet I've embedded. I've made a test site to illustrate the problem. I'm unable to target any ids or classes through the CSS editor. As far as I understand it might be because iframe style is locked in some way. It should be possible to convert the iframe content to divs with a script and then customize the CSS, but I don't know how to do that. I've attached a picture of what the table looks like now and what I want it to look like. If anyone could help me out I'd greatly appreciate it. A bonus would be having the ability to change the color of the border and scroll section as well! Link to comment
Beyondspace Posted January 13 Share Posted January 13 49 minutes ago, Sahil007 said: URL: mango-silver-m9c6.squarespace.com Password: 1234 Hi there, I want to do some style changes to a google sheet I've embedded. I've made a test site to illustrate the problem. I'm unable to target any ids or classes through the CSS editor. As far as I understand it might be because iframe style is locked in some way. It should be possible to convert the iframe content to divs with a script and then customize the CSS, but I don't know how to do that. I've attached a picture of what the table looks like now and what I want it to look like. If anyone could help me out I'd greatly appreciate it. A bonus would be having the ability to change the color of the border and scroll section as well! You can add to the iframe code with <iframe src="xxx&widget=false&headers=false&chrome=false"> </iframe> chrome=false (hide the title above) and widget=false (hide the tabs below): BeyondSpace - Squarespace Website Developer 🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox) 🗓️ Delivery Date Picker (Squarespace Date format) 💫 Animated Buttons (Referral URL) 🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations) 🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates) If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you! Link to comment
Sahil007 Posted January 13 Author Share Posted January 13 40 minutes ago, Beyondspace said: You can add to the iframe code with <iframe src="xxx&widget=false&headers=false&chrome=false"> </iframe> chrome=false (hide the title above) and widget=false (hide the tabs below): I didn't quite understand where to put it within the code. I end up getting errors. Would you mind showing me? This is the code I'm using: <iframe src="https://docs.google.com/spreadsheets/d/e/2PACX-1vSn1lrPGQwk4fOesggRe857RvFh_eCSaZf-GUaEQv0xKki_XJrOnsaOZ_fP0csLndMzHSUrfzhtGxVd/pubhtml?gid=0&single=true&widget=true&headers=false"width="100%"height="400px";> </iframe> I'm able to insert it and have the header disappear, but the white section under the table remains. As well as the background behind the scroll section. Link to comment
Sahil007 Posted January 13 Author Share Posted January 13 8 minutes ago, Sahil007 said: I didn't quite understand where to put it within the code. I end up getting errors. Would you mind showing me? This is the code I'm using: <iframe src="https://docs.google.com/spreadsheets/d/e/2PACX-1vSn1lrPGQwk4fOesggRe857RvFh_eCSaZf-GUaEQv0xKki_XJrOnsaOZ_fP0csLndMzHSUrfzhtGxVd/pubhtml?gid=0&single=true&widget=true&headers=false"width="100%"height="400px";> </iframe> I'm able to insert it and have the header disappear, but the white section under the table remains. As well as the background behind the scroll section. @Beyondspace I realize now that the white segment at the bottom is just leftovers from the white within the excel file. My bad. But do you have a solution to make the scroll area transparent? or perhaps another color such as black? 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