Search the Community
Showing results for tags 'transparency'.
Found 45 results
-
How can I make my Site Header background transparent?
scholarsayze posted a question in Coding and Customization
Site URL: https://bluebird-porcupine-yzdg.squarespace.com/config/ Hello, I want to make the background of my Header transparent so that it looks like my logo is 'floating' above all of the page content as attached. Is this possible? My site page is here: https://bluebird-porcupine-yzdg.squarespace.com/config/ Pword = squarespace Many thanks, Best, Faiz -
Hi, I've added an image that has no background, yet it shows up with a 10%-ish tinted background. I'd like to keep the webpage background either green or white but this image won't cooperate. Any help would be appreciated. Thank you 🙂 -
Fixed AND transparent header/menu. How?? (SS 7.1)
peterbjerg posted a question in Coding and Customization
Site URL: https://amal-testsite.squarespace.com Hi all In Squarespace 7.1, there is already build in options to choice both “fixed position” and “transparent” in EDIT SITE HEADER. BUT, it doesn’t work. When header is fixed, then transparency doesn’t work. Instead Is has default or choosen background color. so how do I set or code to get transparent header/navigation menu when it’s also fixed? test site: https://amal-testsite.squarespace.com password is: abcabc -
Site URL: http://nicetrycreative.com Hey guys, I can't seem to change the Image Overlay to transparent for my images, specifically in the Project Page template during Link Hover. I've already gone into the Section Themes and changed every singe Image Overlay to White with the Transparency bar to the left side. It seems like in the Squarespace Help url here "In version 7.1, the left side is a very light tint, while the right side adds a darker tint" which to me, seems like you then can never have true transparency since the left side still gives you a "very light tint". I've attached a photo of the page. Also it's viewable at nicetrycreative.com/packages Password: nicetry Confirmed that I'm running version 7.1 I've also scoured for past posts on Custom CSS fixes but none of them have worked. Does anyone have any insight on how to fix this? -
Help with transparent border and background gradient
angefriesen posted a question in Coding and Customization
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?? -
I'm trying to use image stacks with PNGs, but Squarespace is adding a faint color behind them. I tried testing all of the different image blocks and inline was the only one that didn't put a color behind the images (but it squished them). What is the issue here? Just a bug?
-
Hi there, I've used the code below to set up a transparent mobile header for my site which uses the Brine template. The mobile nav header now sits nicely over each index page banner image: @media only screen and (max-width: 640px) { .Mobile-bar--top { background: hsla(0,0,0,0) !important; position: relative; z-index: 1 !important; } .Index-page--has-image:first-of-type { margin-top: -100px !important; position: relative; z-index: 0 !important; } .sqs-block-content:first-of-type { margin-top: 50px !important; position: relative; z-index: 0 !important; } } However, this code only works for index pages and I've come to a problem when my pages sit under a folder. The mobile banner for these pages is located below the nav header so that the mobile header is now white and illegible because the logo and nav icons are white too (please see image). Is there any way to fix this, other than adding a background colour to the mobile bar of these particular pages? I'd really like to have the banner image sit behind the mobile nav menu, as it does with the index pages. Any advice would be greatly appreciated! Thanks very much 🙂 -
Site URL: https://www.realbizmoms.com/ Is it possible to change the opacity/transparency of text on an image like this website did, https://amothersmovement.com/
-
Transparent Header won't turn to solid colour on scroll
dutchengels posted a question in Coding and Customization
Site URL: https://www.thirty-square.com I'm trying to figure out how to set my header section to change from transparent to a solid colour but only when the page is scrolled. Can anyone help? -
Site URL: https://www.cutnfill.com/ How to i make the banner transparent for only one page? The Services Page -
Site URL: https://www.ralphrodriguez.work Hello, was wondering if it was possible to get the footer of my website to be transparent? Also, in my portfolio section of the homepage, how do I remove the underline on the links and change link color on hover? My website is www.ralphrodriguez.work. Thanks in advance!
-
York: Freeze Hamburger Menu + Create Transparent Header
GSehr posted a question in Coding and Customization
Site URL: http://www.openonabeach.com Hi, I'd like to create a transparent header with a frozen hamburger menu on desktop -- in the York template. What I'd like it to look like, for reference: www.astegutierrez.com Is that possible? Have tried code from other forums for other templates and they didn't work for my site. Thanks in advance! -
How to make my desktop header transparent and my mobile black
Jack17 posted a question in Coding and Customization
Site URL: https://www.tuscanseagrillbar.com/ How to make my desktop header transparent and my mobile black Or make it so when you click the mobile drop down menu...there is background to easily read the menu options -
Site URL: https://bulldog-perch-zdly.squarespace.com Hi! I'm trying to customize my dropdown menu in the 7.1 template Matsuya, and have combined various bits of coding that I found online - but am getting syntax error messages in the Custom CSS. What I would like is for my site header dropdown menus to: have all folder items adhere to a LEFT alignment on the dropdown menu (I think the default is right when you have a right header item alignment) have a colour selection on hovering on a menu item be half transparent, at least in terms of the menu background I've included the code bits here. I suspect that some of the code is specific, while some parts of it is not specific enough, and that's the reason it's not working. Supergrateful for any help on this! /Vic Password: 2020Go /* Nav item color */ .header-nav-item a { color: #000000 !important; } /* Nav item hover color */ .header-nav-item a:hover { color: #336699 !important; } /* Nav item active color */ .header-nav-item--active a { color: #336699 !important; } //-----dropdown menu alignment----- .header-nav-folder-item { text-align: left !important; } a.header-nav-folder-title:hover + div, .header-nav-folder-content { text-align: center !important; position: absolute; left: 50% !important; right: unset !important; -webkit-transform: translatex(-50%); -o-transform: translatex(-50%); transform: translatex(-50%); background: rgba(76, 175, 80, 0.6); !important; } //-----Dropdown menu styling----- ..header-nav .header-nav.item— folder .header-nav-folder-content { padding: 0; .header-nav-folder-item { padding : .5em 1em: } .header-nav-folder-item:hover { background: 000; a (color: #fff;) }} -
Site URL: https://www.theduophotography.com Hello, Ive being trying to fix the transparency of my header but i cant find any solution. I want to add in the first section a gallery but then the headers transparency doesnt work. Im not so familiar with coding but ive tried some solutions ive read in the forum here but nothing works. Does anyone know what i can do? Thank you!
-
Add a transparent gradient overlay to individual sections?
skabir91 posted a question in Coding and Customization
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)? -
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
-
Site URL: https://kangaroo-polygon-sn6z.squarespace.com/config Hello, I'm trying to do some customization to my pagination. I'd ideally like it to be transparent instead of the automated white block that gets dropped behind it. Additionally, I'd like the right side of the pagination to be white text instead of black text. Lastly, I'd love for the pagination text to scale down for mobile. If anyone can help with this, I'd appreciate it! Thanks!
-
Site URL: https://tarpon-lavender-jbyy.squarespace.com/ Password to the site is: TEMP I'm having problems making the header opacity appear semi-transparent. The options when editing the header are simply solid colour, or fully transparent. What I'm trying to achieve is a semi-transparent header, that has an opacity of 50%. The site is on the Eldridge template, so Squarespace 7.1
-
Site URL: http://www.matteosmozzarella.com When hovering over a product on my shop page, the product dissapears. I suspect it has something to do with the transparency %, but I don't know how to change it. I already tried the default reset, but the problem remains.
-
Site URL: https://grape-plum-jrlb.squarespace.com I'm working with a difficult (busy) logo. I'm trying to find code for a transparent gradient behind the header. I've mocked it up in Illustrator to show what I'm looking for (attached). Has anyone been successful using custom code for this? I'm using the Grape Plum template. Site password is: PreviewER
-
Site URL: https://tuna-raccoon-f8cp.squarespace.com I am looking to make several pages in the main nav with transparent headers. I located the code to make the home page transparent, but how can you code other pages? Specifically I want "solutions," "resources," "partners," "about" to have the transparent headers (and potentially other pages) all so that I can keep the solid blue header on product pages, blog pages and staff/team pages (which is many pages so makes more sense to custom code the transparent headers since there are only 4-5 of them). Thanks for any help!
-
How can I make the site header solid on blog post only?
Mountainmint posted a question in Coding and Customization
Hello, I'm building a site using Bedford. I set the site header to transparent. And I removed the header image on blog pages as I didn't like the design. I used this code for that: /* don't show thumbnail as banner image behind blog post title (hard to read) */ .collection-type-blog .banner-thumbnail-wrapper {display: none !important;} .collection-type-blog .entry-title {display: block !important;} But now I can't see the site header or navigation on a blog post page b/c it's white and the background is transparent. Is there any way to set the background color for the site header for blog posts only (including all future posts)? Or to change the color of the logo and navigation for blog posts only? Thanks! -
Hi All- I'm working to make my image title backgrounds transparent so that I can apply a section background without having a weird box: I'm using an Image Card block and found out how to make the image portion of the block and content section have a transparent background, but cannot figure out how to make the Card title have a transparent background. Happy to provide any additional information. Thank you in advance. Greg
-
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
