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

Search the Community

Showing results for tags 'overlay'.

  • 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
    • Resources
  • 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: https://www.mechele.co.uk/ Hi, Does anyone know how to change the loading colour on a page, I get a flash of green for a split second before my image loads? Also if I scroll very high or very low on my site I can also see a green strip top and bottom. I've followed other threads on here and tried the suggestions with no luck. Thanks in advance. https://www.mechele.co.uk/
  2. Site URL: https://olive-copper-nxmd.squarespace.com/ Hello! I have been working on a site for my employer, I was provided a lot of content for each section and so I decided to put this in a code block with two boxes that slightly overlap and flip in side and colour on each section. On my device, and my colleague also using a macbook, it looks fine (minus a few unfinished adjustments). However, when my manager looked at the site it looked very different. I checked the browser zoom was set to default, but its an issue for all colleagues on windows desktop. Is this just whilst the site isnt live, or will the site display differently for windows desktops? If so, how do i fix this? Of course the sections were messed up on mobile, but i am using media query to replace these with reformatted duplicates which is working fine. Just not sure why mac laptop and windows pc look so different, but i assume this is screen size rather than mac/windows. Attached is a screenshot from my browser, vs a screenshot from one of my colleagues. (You'll notice my colleague screenshot a different section, which is because for some reason the first one is fine for them. But the replica sections (when they flip over and. change colour) are having the issue. I have also attached a screenshot of what i see on that section. Note the text weight seemed to have changed for me too, not sure why... Theres 6 sections in total following this style, and will be a further 9 across other pages. Here is the code for the first one, which is a non issue: <div id= "ServiceNow Platform and Integration SN COE"> <div style="background-color: hsla(154, 27%, 63%, 0.99); opacity: 1; position: relative; top: -180px; left: -100px; width: 70%; height: 800px; border-right: 0px solid hsla(154, 27%, 63%, 0.99); padding: 30px; border-radius: 0px; box-shadow: 10px 10px 10px 0px rgba(0, 0, 0, 0.30);"> <h4 style="color: #000000; weight: bold; position: relative; top: 20px; left: 40px; padding: 30px; width: 50%;"> Customer Problem. </h4> <p> <span style="color: #000000; position: absolute; top: 100px; padding: 30px; left: 70px; width: 50%; font-size: 18px; ""> Many customers design their ESM processes in silos, the Change Management team define the Change process, the Incident Management Team the same; however while those processes may operate effectively – the interaction between them is often forgotten about. <br><br> A failed Change may result in an Incident (or even a Major Incident), conversely an Incident may require a Change to remediate the issue – but without understanding how these two need to operate together a huge amount of time, effort and ability to accurately understand the impact or root cause is often not possible. <br><br> Once the root cause is identified, where does that information get stored – Incident needs to link with Knowledge Management so that it doesn’t happen again, Change needs to be informed of ‘why’ so that future Changes don’t repeat the same issue. </p> </div> <div style="background-color: hsla(214, 0%, 0%, 0.99); opacity: 1; position: absolute; top: -50px; right: -100px; width: 60%; height: 500px; border-right: 0px solid hsla(154, 27%, 63%, 0.99); padding: 30px; border-radius: 0px; box-shadow: 10px 10px 10px 0px rgba(0, 0, 0, 0.30);"> <h4 style="color: #ffffff; weight: bold; position: relative; top: -15px; left: 0px; padding: 30px;"> CSX Capability.. </h4> <p> <span style="color: #ffffff; position: absolute; top: 70px; padding: 30px; left: 30px; width: 80%; font-size: 18px; ""> Our approach is different. Starting with defining the requirements and needs for each distinct ESM process, aligning where appropriate to ITIL V4 model, this is enhanced by then providing cross-process architecture to define a set of required inputs and outputs or ‘hand-offs’ that are mapped against any other ESM process, these include items such as tool usage, data requirements, access, security needs and communication between the people operating the processes. <br><br> Once identified, the hand-offs are discussed and an updated design is defined to ensure each can work successfully with its partner process and ensure a complete and holistic view of end-to-end Service Management. These powerful inter-connects between the processes enables organisations to reduce errors, increase service availability and identify very quickly areas that require additional attention or remediation. Here is the code for the one that is causing an issue (but not on my screen). <div id= "ServiceNow Platform and Integration SN COE"> <div style="background-color: hsla(154, 27%, 63%, 0.99); opacity: 1; position: relative; top: -120px; left: 500px; width: 60%; height: 800px; border-right: 0px solid hsla(154, 27%, 63%, 0.99); padding: 30px; border-radius: 0px; box-shadow: 10px 10px 10px 0px rgba(0, 0, 0, 0.30);"> <h4 style="color: #000000; weight: bold; position: relative; top: +15px; left: 250px; padding: 30px; width: 50%; "> CSX Capability.. </h4> <p> <span style="color: #000000; weight: normal; position: absolute; top: 110px; padding: 30px; left: 285px; width: 50%; font-size: 14px; ""> CSX promote the concept of a single point of truth (SPOT) for IT configuration and asset data. Modern tech (ie ServiceNow) means an automated solution is now possible which reduces the reliance on manual updates, and ensures a comprehensive view. ITIL’s Service Asset and Configuration Management processes can be largely automated, with workflow and ties to access control systems to ensure accountability and service ownership. <br>We focus on creating a CMDB structured on the Customer Service Data Model (CSDM). <br><br> The data and relationships are husbanded through: <br> 1) automated discovery of devices and applications, <br>2) managed processes for the creation and maintenance of services and products, <br>3) controls and reporting to drive compliance and performance. <br> <br>The benefits of a reliable, integrated CMDB are enormous: Operational Resilience planning; reducing MTTR; improved control of assets; managing technical debt, reducing impact of failed changes/releases and staying ahead of the regulatory auditors demands. In addition, the opportunities for automation are increased dramatically as orchestration of workflow can be driven from valid, trusted data. <br><br> Key Elements managed by CSX: ServiceNow ITOM Implementation, Discovery Implementation, Service Mapping, Establish Data model (ie CSDM), IT Controls Dashboards to drive compliance and – describe why important to get this agreed and how it relates to business activities. As with all process and technology improvements, strong comms and training of client stakeholders is an important success factor in adoption. </p> </div> <div style="background-color: hsla(214, 0%, 0%, 0.99); opacity: 1; position: relative; top: -900px; left: -90px; width: 60%; height: 635px; border-right: 0px solid hsla(154, 27%, 63%, 0.99); padding: 30px; border-radius: 0px; box-shadow: 10px 10px 10px 0px rgba(0, 0, 0, 0.30);"> <h4 style="color: #ffffff; weight: bold; position: relative; top: -15px; left: 10px; padding: 30px;"> Customer Problem. </h4> <p> <span style="color: #ffffff; position: absolute; top: 80px; padding: 30px; left: 40px; width: 80%; font-size: 18px; ""> For years, clients have seen the CMDB as a pink unicorn that is unobtainable. Data was not trusted, there was little ownership, and accountability was very hard to pin down. <br><br> To meet their needs for financial, service, procurement, regulatory, audit and even security purposes, they cobbled together lists and ran physical and virtual scans. They kept spreadsheets and registers and pulls from monitoring tools and bespoke apps and more scans. <br><br> There has been very little clarity and an incredible amount of risk piling up around this space. <br><br> Today, many firms are feeling the wrath of the regulator, resulting in career-limiting findings and in, more than a few cases, massive fines. </p> </div> </div>
  3. Hi, Does anybody know how to completely remove the overlay menu from the mobile version? I contacted the support and they informed me that this can only be accomplished by a custom CSS but I don't know how to do it. Many thanks, Inacio
  4. Hi I want a slideshow of images that has an overlay of text that stays still while the slideshow buttons are pressed. i haven't been able to figure this out. the slideshows embedded in the website builder allow you to add a title to each image but the title slides with each image. you can add a title to the slideshow itself, but it sits above the slideshow. I want it to be on top of it.
  5. Site URL: http://www.joshbranton.com Is there any code that would allow me to invert the color of my logo when in the same instances where the tagline adaptively inverts? For example on mobile when I click the hamburger menu and it creates a black overlay, the tagline inverts from black to white text. I'd like my logo to do the same.
  6. Site URL: https://rabbit-primrose-wsww.squarespace.com/ I've looked at the built in style options and don't see the ability to set color overlay opacity for slides within the Banner Slideshow. Is that correct? And if that isn't a built in option, any thoughts on adding such via CSS? Thanks!
  7. I have one specific example that I would like to achieve for my website. Take a look at https://apple.com on mobile, and try opening and closing their menu. Notice how it slides down and up smoothly. Is there any way to achieve something similar on 7.1? I've attached a screen recording of Apple's mobile navigation in action: Screen Recording 2022-01-04 at 16.44.06.mov
  8. Site URL: http://www.gardenclubofoldgreenwich.org I would like to add a shadow to the text used when the banner is the page background (index pages in Brine Template.) I currently use a white font, but I usually have to adjust the image so the text will be readable. If I have white font with a black shadow, it is much easier to read.
  9. Site URL: https://www.goodmonday.se/en/blog Hi, Is there a way to have the blog thumbnails to zoom and show an overlay on hover (for example a white or black overlay in opacity)? I'd like the blog thumbnails to behave the same way as the gallery thumbnails does on the below test page (using code from this forums)? https://www.goodmonday.se/en/blog The first section on this page uses a "gallery masonry grid" and the section below uses a "Summary" that lists my blog page. Many thanks!
  10. I'm using SquareSpace as an art portfolio website and using the "List" section type for my photos so that I can place images across from a description of the title, medium, etc. However, I have the issue that an overlay color is non-optional for these images, and since they are artwork and I want them to look the same as real life, I want to remove the color overlay. Is there HTML I can insert into the custom code area that would eliminate the color overlay? I'm using version 7.1. Thanks!
  11. Site URL: https://steven.squarespace.com Menu items get cut off when scrolling inside nav on desktop. Is there a way to make them NOT get cut off? Screen Recording 2021-12-19 at 11.07.03.mov
  12. Site URL: https://addisonpann.art password: toast Using code provided by these forums, I have been able to initiate a caption overlay on masonry grid images upon hover. It works like a charm on my Graphic Design page, but the Hand Drawn page's captions appear dimmed, and I'm thinking they may be below the partially-transparent overlay. Here's the CSS I'm using: /* ------- GALLERY CAPTIONS --------*/ .gallery-caption-grid-masonry p.gallery-caption-content { font-family: "Helvetica Neue", sans-serif; font-size: 2vw !important; font-weight: 500 !important; text-transform: uppercase; line-height: 1.2em; color: #E19D9D; margin: 1.5em !important; } /*---- CAPTION HOVER OVERLAYS ------*/ .gallery-caption-grid-masonry { opacity: 0; z-index: -1; transition: all .2s; position: absolute; top: 50%; transform: translateY(-50%); left: 0; text-align: center; color: #fff; height: 100%; max-width: 100vw; padding: 0; } .gallery-masonry-item:not(.has-clickthrough) .gallery-caption-grid-masonry:before, .gallery-masonry-item a:before { background-color: rgba(0,0,0,.5); content: ""; display: block; position: absolute; top: 0; bottom: 0; left: 0; right: 0; z-index: 999; opacity: 0; transition: all .5s; } .gallery-masonry-item.has-clickthrough:hover .gallery-caption-grid-masonry { z-index: 999999; opacity: 1; height: auto; } .gallery-masonry-item:not(.has-clickthrough):hover .gallery-caption-grid-masonry { z-index: 0; opacity: 1; pointer-events: none; } .gallery-masonry-item:hover .gallery-caption-grid-masonry:before, .gallery-masonry-item:hover a:before { opacity: 1; transition: all .5s } .gallery-caption-grid-masonry .gallery-caption-wrapper { display: flex; align-items: center; justify-content: center; text-align: left; } .gallery-caption-grid-masonry p.gallery-caption-content { z-index: 1000; font-size: 2em; font-weight: 400; margin: 2vh 2vw; } .gallery-caption-grid-masonry p.gallery-caption-content { z-index: 1000; } I'll admit I haven't used z-index much in the past, and I'd imagine the issue stems from that. Why do the captions display correctly on the Graphic Design page, but not on Hand Drawn? Thanks in advance!
  13. Site URL: https://www.offpaper.design/portfolio-redo Hello! I'm re-doing a portfolio and need to make the Masonry Gallery grid with opacity overlays with clickable captions. (have made the page temporarily live incase anyone needs to look at the coding) I've found lots of threads on here that has gotten me to a certain stage, but as soon as I add in a link, the overlay disppears? If anyone can help, that would be great, thank you!
  14. Site URL: http://www.chairs.works/ Hello! I would like to remove a low opacity overlay from my lockscreen in version 7.1 I don't know if its because it was for 7.0 or what, but I tried a method I found before and it didn't work. Also, when the site loads the password field is automatically selected, which causes a white rectangular outline to appear around it. I would like to remove this or make the outline black. I don't think you'll need the site password, but if you do it is: chairchair All help is greatly appreciated!
  15. Site URL: https://www.partners.forme.yoga Hey everyone, I am trying to change the overlay opacity of my background image, during a mobile screen size. When the black text is over the top of the picture, I would like the image to have a higher percentage overlay opacity. In desktop mode, its ok, as the text is over the white portion of the image. Can a CSS code fix this? https://www.partners.forme.yoga Matt
  16. Site URL: http://www.maggiebrz.design Hi everyone! I just switched from 7.0 to 7.1. In the masonry gallery grid, I'm trying to add hover effects to my images- a color overlay and image caption on hover. I talked to customer support, and they told me that 7.1 doesn't support gallery hovers. I'm having trouble with the code, and was wondering if anyone had more luck than I did? I've attached a screen shot of how the site is set up. I'm trying to keep the full-bleed effect. I've been stuck in a rabbit hole working on this all day - thanks for the help!!
  17. Site URL: https://juliennecarrots.squarespace.com Site URL: https://juliennecarrots.squarespace.com Site password: Password Hi there, I need help trying to achieve a few different things. I'm currently working on a split landing page for my website, in order to choose which half of the website to visit. Here's what I'm having trouble doing: I'm trying to have two images bleed to the extents of the page. I've got them as image blocks side by side, but right now there's still space between the images and around them. I'm trying to have them be right next to one another, and fill the extents of the screen. (The images of the ladies are the ones wanted in the background) I'm trying to have the images be in grayscale, but then revert to color when the mouse is hovering on them. Below (the list) is the CSS I'm using to try to achieve this, but with no success. I also want two other images (the two logos) to be overlayed over the background images, and act as link buttons that bring you to the respective split homepages. I have the link/button functions working fine, but I can't seem to figure out how to overlay these logos over the two images below that I want in the background. Also, I can't seem to find a way to change the sizing of these images. I'd like them at about 50% of what they are now. Custom CSS for grayscale to color hover: #block-yui_3_17_2_1_1636006346935_2766 { transition: .5s ease-in-out; filter: grayscale(1); } .image-block img:hover { filter: none; } #block-yui_3_17_2_1_1636006105660_3251 { transition: .5s ease-in-out; filter: grayscale(1); } .image-block img:hover { filter: none; } I would love help figuring these things out. Thank you so much! I really appreciate it.
  18. 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)?
  19. Site URL: https://synthesizer-broccoli-5mar.squarespace.com/ Hi there, wondering how I can add little divider lines between the menu items on my overlay menu to spice things up. Thank you!
  20. Site URL: https://www.simonguillemin.com/blue-lava Hey guys ! I would like to replace a specific image when I go on it with the mouse. In fact I would like the second one being over the first one (in the same block then) when the mouse goes over the image. Thanks a lot ! The page concerned is : https://www.simonguillemin.com/blue-lava password : 0009 under the two images there is a image block which can be used to be the target if never 🙂 cause ì used CODE BLOCK for my example like in this tutorial : https://www.youtube.com/watch?v=7WC906n4t5c
  21. Site URL: https://sarahroseheld.work I want to keep the hand drawn images static and not have a hover to the title or show the title below. How do I remove these? I have attached what I want this to look like and what it currently does with titles below Thank you! Sarah PW: JerryRueben
  22. Hi, When I click on my hamburger on my desktop site it opens a white block on the right side as well. Any chance it can be removed? Thanks!
  23. Hi, I am trying to reduce the size of my overlay menu on mobile. It is reduced on the desktop but I'd like to achieve the same result on the mobile site. Any tips? Thanks! https://wolverine-polygon-atzy.squarespace.com/config/design/custom-css password: jewellery21
  24. Site URL: https://ibighit.com/ Hello, I am a musician that is creating an artist landing page for new albums that I am pushing, similar to link tree, I would like to have fans land on a page of my current work, where they will be able to go the listening platform of their choice. I was going through the new lay outs of the SS designer, and I was wondering how I can have multiple click through links on an image show up as a menu overlay? I have an attached website and reference images. I have no prior experience with code, so any resources I could learn would be great. thanks, B
  25. Due to the colours of the logo and the backgrounds on each page, my website requires different version of my logo on some pages than others. The most challenging part appears to be on mobile, when you enter the overlay menu, the background is white, so I need to use a black version of my logo rather than the white version used on most pages, including the homepage. How can I do this? I'm using the Colima template.
  • Create New...