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

Search the Community

Showing results for tags 'transparency'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • Forum
    • News and Announcements
    • Getting Started With Squarespace
    • Coding and Customization
    • Commerce
    • Selling & Scheduling Your Services
    • Feedback on Your Site
    • Images and Videos
    • Pages and Content
    • SEO and Marketing
    • Site Design and Styles
  • Colorado Designers's Topics
  • Squarespace Forum Club Guidelines's Topics
  • Austin, TX Designers's Club Discussion
  • New York City Designers's Club Discussion
  • Berlin Designers's Club Discussion
  • SEO Experts's Club Discussion
  • Photographers's Club Discussion
  • Graphic Designers's Topics
  • London Designers's Topics
  • Podcasters's Club Discussion
  • Custom Coding Help's Club Discussion
  • Atlanta, GA Designers's Topics
  • Seattle, WA Designers's Topics
  • San Diego, CA Designers's Topics
  • Dallas, TX Designers's Topics
  • Australia Designers's Club Discussion
  • Minnesota Designers's Topics
  • Minnesota Designers's Topics
  • Copywriters's Topics
  • France Designers 🇫🇷's Topics
  • France Designers 🇫🇷's Topics
  • Portland, OR Designers's Topics
  • Canadian Website Designers's Club Discussion
  • Los Angeles Designers & Devs's Club Discussion
  • South African Designers's Club Discussion
  • Brazil Designers's Club Discussion
  • Developers's Club Discussion
  • German Circle Members's Topics

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start



About Me




Expert ID

  1. Site URL: http://uppercutdanseteater.squarespace.com Hi! I would like to have a burger menu on the right side corner of my website, but when clicking on it, it hides the background as if I'm entering a new site. And I would like it to look like this: (transparent when you click on the burger so that you still se the background as well as to be able to use the folders) I am currently using this code: @media screen and (min-width:950px) {.header-nav, .header-actions { display: none!important} .header-burger { display: flex!important;} .header--menu-open .header-menu {opacity: 1; visibility: visible;}} and I only managed to do this to my site: I have searched for DAYS and I'm really a beginner with coding so I would appriciate the help SO MUCH : ))
  2. Site URL: http://www.tsvetienlow.com/portfolio I am having issues with the default image opacity applied to images on the portfolio hover feature. (screenshot attached) I found multiple threads that articulated the same issue I am having, and the custom CSS provided as a solution isn't working for me. I've added the custom CSS in Home > Design > Custom CSS, but the issue still persists. Has anyone else had this issue persist? Any solutions/ideas you'd recommend?
  3. Site URL: http://www.beautifuluseful.co Hi gang, I managed to get this working with CSS but then "broke it" on purpose by taking away some curly brackets, and now I can't get it working again! Essentially I'm trying for a gradient border around the whole site (on 7.1), and succeeded in doing this with code for a transparent border + a background gradient behind, and now I can't get it to work again. I've got the border working (but can't tell if it's actually transparent since there's nothing behind it...). My goal is a border similar to this one: https://aestheticsofjoy.com/ The custom CSS + notes I left for myself look like this (and, yes I did add the curly brackets back and take away the //s): // { background-image: linear-gradient(to bottom right, #F4C6CD, #FAD1CF, #FFCC66); body { border:40px solid transparent; header margin:25px 25px 0 25px; // // neeed to add end curly parenthesis back in for this to work Currently here's what I've got with the border working, but still no gradient: body { border:25px solid transparent; } header { margin:25px 25px 0 25px; } gradient { background-image: linear-gradient(to bottom right, #F4C6CD, #FAD1CF, #FFCC66); } It's driving me mad not being able to figure out why I got this to work a month or so ago and now I'm having ZERO luck with anything on the gradient side. Help??
  4. Site URL: https://moose-hawk-zh87.squarespace.com Dear all, I'd like to change the transparency of the dropdown menu in mobile version to white? The text can't be read now because of the transparency, so it looks awfull. Thank you all very much!
  5. Site URL: https://www.cyclebeatclub.com I would like to place a transparent png or gif on my page and use the Image block "Collage" so I can have my text highlighted by a white background. However, when I place a transparent png or gif image I get a faint transparent grey block where the image resides. Even though the image is completely transparent, the Collage Image block seems to place a grey overlay in its place. Is there a work around or some code that you would share with me to eliminate the grey overlay? Thanks.
  6. Hi, I want to add transparency to header of my website. Currently my logo is not clearly visible, if i add some transparency it will be visible. i have attached a photo of my issue for reference. Please help any way of doing this. thanks.
  7. Hi everybody :-) And Merry Christmas! I am making a webpage. The frontpage (home) is a full image with two sections below. When the visitor enter the page, I wish the font and social media icons in the header on the image to be white, yet when they scroll down I want the header (fixed) has a yellow base and black font. Does any one know how to do this? Make the font change colour depending on background? At first it did it by it self, but now I can't figure it out. I hope someone might be able to help out :-) All the best Tyra
  8. Site URL: https://coconut-triceratops-wpkr.squarespace.com/ Hi there, Can someone please help me make the header transparent only on the homepage and a solid color throughout the rest of the site. Thanks in advance! Best, Erik
  9. Site URL: https://shuvamkabir.net I'm attempting to add a white gradient above my background images. My first thought is to add an additional element that serves as an intermediate layer. I've tried the following, which I copied from here : [data-section-id="xxxxxxxxxxxxxxx"]{ .section-background::after{ content:""; display:block; position:relative; width:100%; height:100%; /* in hsla color format (below), the last number is between 0 and 1 and changes the opacity */ background-color:hsla(100,20,50,.5) !important; } } And then replace the background-color() with a linear-gradient() instruction. However, the above code doesn't seem to work. I should add that I am also using javascript to create a parallax effect, which I am hoping isn't conflicting. Can anyone walk me through adding an additional element behind my text/image blocks and above my background to which I can add a gradient that shifts from white-to-transparent-to-white? Alternatively, can anyone show me how to make an image block flush with with the top of a section (so I can just stick a small PNG at the top and bottom of my sections and call it good)?
  10. Site URL: https://brunch.co.kr/@greeda/39 Hi, How to hide background image by scrolling page: html, css, js? See https://brunch.co.kr/@greeda/39 to understand the question.
  11. Site URL: https://www.ballihoo.co.za/home Okay, this is a pretty specific question but the use case is actually quite common from a design perspective. To explain: I have a white BG navigation with pink logo (PNG) and text/links. It also uses the Transparent option under Edit Site Header > Colors. This is of course throughout the site and works great for the most part, but... On the homepage only, I want to have the navigation start as white text on transparent (as it sits on top of a darkish full bleed hero image) and then once the BG of the navigation fades in (a built in function of setting the navigation to Transparent) I want the text and logo to change to pink. It's a bit tough to put in words so hopefully the images and link help to covey the request. And this change would have to be able to be applied to the drop-downs from foldered nav items, because this looks awful...
  12. Site URL: https://seabass-maroon-5h8g.squarespace.com/ https://seabass-maroon-5h8g.squarespace.com/ Password: oakpointtest On my current website, I like how my header is transparent at first, and becomes a solid grey when scrolling down. This works for most pages. But on my portfolio "blogs", since the header takes the background color of the first section, the header becomes white. The navigation links and logo don't work with white backgrounds. I would rather for these pages the header is set to dark grey. Example: https://seabass-maroon-5h8g.squarespace.com/config/?frameUrl=%2Foak-point-portfolio%2Fames-department-stores I will have over 900 of these "blogs", so not sure if there is code that only targets these pages. Any help?
  13. Site URL: https://elk-flamingo-2j9s.squarespace.com/config/help Hi everyone My landing page image is to bright and I would like to have the header slightly more opaque so it gets easier to read the menu. Could you please let me know how I can do this and making sure I just change the opacity on this specific page? Thank you
  14. Site URL: https://www.justinpape.com/ Hey, Ive just noticed that my header when scrolling no longer stays transparent. On the main page it turns to a white BG and on a project page it turns Black. I have read a few different treads and tried the different custom codes i have seen but nothing seems to let it stay transparent all the time as it used to. Anyone have this issue and figure it out? Site: https://www.justinpape.com/
  15. Site URL: https://corn-apricot-zn88.squarespace.com/ Hi. I coded my site so that the full bleed images slip under the header and a static text that sits on top of the image. It works perfectly, but in mobile view, I cannot get them to now move back down and I cannot see the text. I am not an expert at mobile coding, so I am hoping that maybe I am just missing something. This is the code for the text overlay and shifting the content up. <style> .gallery-fullscreen-slideshow { margin-top: -205px!important; margin-bottom: 0px!important; padding-bottom: 0px!important; } }</style> <style>#block-4d7c97be77d43ef7bc95 {position: relative; height: 200px!important; max-width: 400px!important!; margin-top: -300px!important; margin-left: -530px!important; pointer-events: none; margin-bottom: -50px!important; padding-bottom: 0px; }</style> <style> #block-4d7c97be77d43ef7bc95 {/*Firefox*/ position: relative; height: 200px!important; max-width: 400px!important!; margin-top: -300px!important; margin-left: -420px!important; pointer-events: none; margin-bottom: -50px!important; padding-bottom: 0px; /*Firefox*/ } </style> <style> @media only screen and (max-device-width: 640px) .gallery-fullscreen-slideshow { margin-top: 100px!important; margin-bottom: 0px!important; padding-bottom: 0px!important; } </style>
  16. Site URL: https://smilodon-tulip-mbea.squarespace.com/synopsis-1 Hi, I have background image I would like to run through the footer, however the footer appears as an opaque color. How can I make the footer transparent. I tried inserting this code into the pages advanced settings, but no cannoli. <head footer#footer { display: none; } } </head> And also the header toggles between opaque and transparent, I would like to make it exclusively transparent. Any and all replies much appreciated. thx
  17. Site URL: http://www.georgiahicks.com Hi, The code for my website is working fine in editor, however when it's live the transparency doesn't work. May I ask for your advice with this? The password to access the site is "portfolio123". Thank you.
  18. Hi All- My images contain transparent backgrounds and I'd like for the background to actually remain transparent on the site. I took a quick screen shot below. The gray area of the image shouldn't be there. It is actually a transparent background. Any way to persist the transparency of the actual image to the image card? Happy to throw some css in there, but not exactly sure what to do. Thanks, Greg
  19. Site URL: https://www.momentephoto.com Hi, I have some troubles with header of my website. I would like to set transparent header because on page with my work (called Naše práce) there is a photo begining on the very top of the page. On this site everything looks fine but the problem shows when I go to the homepage, where is photo set as inset so it has white edges like background of the page and there the transparent header doesn´t work. On the homepage I need the text of the header to be black but it´s light gray (it was even white before but I probably changed it somehow and don´t know how) but I can´t find any option how to change it if the header is transparent. Is there anyone who could help me, please? Password is: momentetest
  20. Site URL: http://clever.cooking I'm wondering how I can make my header non-transparent on all but my main page? I have a graphic on the main page so transparency is perfect there, but I'd like the head to be a non-transparent solid color on the other pages. Any help would be hugely appreciated!
  21. Site URL: https://seal-bagpipe-jk7x.squarespace.com/ I am trying to turn the content block in my collage images transparent. I've managed to achieve this when the Custom CSS tab is open. But when I view my site with another tab open it goes away. Then if I open the Custom CSS tab it works again. Here's the code I'm using: Here's what it looks like when the CSS tab is open: Here's what it looks like when the CSS tab is closed: Any suggestions? Website - https://seal-bagpipe-jk7x.squarespace.com/ Password - Schr0dinger1
  22. Site URL: https://www.cofats.com/contact I created an image with a transparent background, and for some odd reason, I can see the edges of the transparency when I drop it on my "Contact" page. I do have another image taking up the background of the whole page, but I'm not sure why that would affect this smaller image on top. Any help would be wonderful. Thank you.
  23. Site URL: https://www.zealoustravelco.com UPDATE ---> SOLVED Hi! Can anyone help me with my transparent header (w/ blur effect) that suddenly stopped working? Here is the CSS that worked until I randomly checked website today: /*FROSTED GLASS NAVIGATION BAR*/ body:not(.tweak-transparent-header) .dark .header-announcement-bar-wrapper { background-color: rgba(0,0,0,.2)!important; -webkit-backdrop-filter: blur(1px); backdrop-filter: blur(1px); padding-top: 8px; padding-bottom: 6px; transition: background-color .15s ease; .header-title-logo img { transition: max-height .15s ease; } } www.zealoustravelco.com
  24. Site URL: https://bluebird-porcupine-yzdg.squarespace.com/ Hello, I recent had a custom code fix which allowed me to make my site header background transparent (original message here: ) I used the code here: body.tweak-transparent-header:not(.header--menu-open):not([data-menu-overlay-theme-switcher="true"]) .header-announcement-bar-wrapper.dark { background-color: transparent !important; } But I notice now it's not working? The white background on the header still appears on scroll. Perhaps I have broken something? It was working perfectly before. Please help! Page = https://bluebird-porcupine-yzdg.squarespace.com/ Site Pword = bluebird Best, Faiz
  25. Site URL: https://kirkhill.com.au/ Hi all, Like this user below, I’m trying to adjust the size of the headline on mobile only so the text isn’t ridiculously large. I successfully added the css below into the Cover page layout https://kirkhill.com.au/homearchive however it doesn't work with the Card page layout for https://kirkhill.com.au/ <style> @media screen and (max-width: 600px) { h1#sqs-slash-page-header { font-size: 20vw !important; } } </style> Any idea what needs changing? It would be great if I could change the font size to match the Cover page layout size without compromising on layout. Card page layout seems to bump all the links into a vertical layout rather than horizontal as the font size goes up. https://kirkhill.com.au/homearchive Lastly, it possible to change the transparency of the Card centre box/background? Thanks!
  • Create New...