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

Search the Community

Showing results for tags 'overlay'.



More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • Forum
    • News and Announcements
    • Getting Started With Squarespace
    • Coding and Customization
    • Commerce
    • 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

Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


About Me


Website


Location

Found 63 results

  1. Site URL: https://puma-orb-9lss.squarespace.com/work Hi, Regarding the Portfolio page and the overlay titles for project images (in Squarespace 7.1), I was wondering if there is any way I could get a similar effect as illustrated in the example image I attached. Note: I want to avoid darkening the entire image, and instead darken only the background behind the text. Also, there is currently no option to have the title in the middle bottom. Is there a way to do so with CSS? Thanks
  2. Site URL: https://billhoran.com Whenever my site loads on desktop, the mobile default image flashes for a second, then video starts. it's not a big problem because the overlay "dim" is applied the whole time. On mobile (iPhone), the page loads and I see the mobile default image for a few seconds at full brightness, then the overlay dims it. Then, sometimes the video loads. It seems like that setting is loading later than maybe the rest of the page? It's really frustrating because I could make a dim default image, but it would get dimmer once the video loads. Is there perhaps a way I could not use the Squarespace default filters but dim it in code that would load immediately? Thanks!
  3. Site URL: http://www.qualitycupofcoffee.com/french Hello everyone ! I am having a hard time coding stuffs. I trying to align the metadata (tags & categories) of my summary block on the same line as my blog title : - I created a summary blog for my course calendar ( id=floatsection ) that overlay on my previous banner. I am trying to align my metadata tags (date) & category (price) with my title (course name). I would like to display everything on the same line as follows : (secondary metadata) tags - Title - Primary metadata category. However I cannot bring up the tags & categories. How can I do that ? Here is my code so far : /*Dates des formations box Overlay*/ #floatsection { width: 30%; position: absolute; min-height: initial!important; z-index: 30; left: 80%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%,-50%); .Index-page-content { padding: 0em 0em; } & + section { padding-top: 90px; } } /*Fake summary podcast*/ /*LAYOUT & BACKGROUND COLOR*/ .sqs-block-summary-v2 .summary-block-setting-design-list .summary-item { padding-bottom: 0 !important; margin-bottom: 0 !important; } .sqs-block-summary-v2 .summary-block-setting-design-list .summary-item:nth-child(odd) { background: #f5ad9e; } .sqs-block-summary-v2 .summary-block-setting-design-list .summary-item:nth-child(even) { background: #fffce9; } .sqs-gallery-design-list .sqs-gallery-meta-container { padding: 20px; } .sqs-gallery-design-list { max-width: 600px; margin: 0 auto; } .sqs-block-summary-v2 .summary-block-setting-design-list .summary-item.summary-item-record-type-video .summary-thumbnail-container, .sqs-block-summary-v2 .summary-block-setting-design-list .summary-thumbnail-outer-container { margin: 10px; } .sqs-block-summary-v2 .summary-block-setting-design-list .summary-item { padding-bottom: 0 !important; margin-bottom: 0 !important; display: flex; align-items: center; } .sqs-gallery-design-list .sqs-gallery-image-container { padding-right: 0; } /*FAKE PLAY BUTTON*/ .sqs-block-summary-v2 .summary-block-setting-design-list .summary-item.summary-item-record-type-video .summary-thumbnail-container::after, .sqs-block-summary-v2 .summary-block-setting-design-list .summary-thumbnail-outer-container::after { content: 'PLAY'; font-weight: bold; color: #fff; font-size: 14px !important; border: 1px solid #fff; background: rgba(255, 255, 255, 0.3); border-radius: 50%; display: block; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); padding: 10px; height: 33px; line-height: 2.2em; pointer-events: none; } // POSITION CATEGORY OR TAG LABELS // /* Position the category right-corner */ .sqs-block-summary-v2 .summary-block-setting-primary-metadata-cats .summary-item-has-cats .summary-metadata--primary .summary-metadata-item--cats,{ display: block; position: absolute; right: -10%; transform: translate(-50%, -50%); padding: 10px; height: 33px; line-height: 2.2em; pointer-events: none; transform: translate(-50%, -50%); padding: 10px; height: 33px; line-height: 2.2em; pointer-events: none; } /* Position tag in left corner */ .sqs-block-summary-v2 .summary-block-setting-secondary-metadata-tags .summary-item-has-tags .summary-metadata--secondary .summary-metadata-item--tags{ position: absolute; left: 10%; } .sqs-block-summary-v2 .summary-block-setting-primary-metadata-cats .summary-item-has-cats .summary-metadata--primary .summary-metadata-item--cats a, { /* default category labels are White on Magenta */ font-size: 12pt; /* Size of category text */ padding: 4px 9px; /* Size of category label */ color: rgba(18, 17, 17, 0.66); /* default category font colour */ } .sqs-block-summary-v2 .summary-block-setting-secondary-metadata-tags .summary-item-has-tags .summary-metadata--secondary .summary-metadata-item--tags a { /* default category labels are White on Magenta */ font-size: 12pt; /* Size of category text */ padding: 4px 9px; /* Size of category label */ color: rgba(18, 17, 17, 0.66);/* default category font colour */ } .sqs-block-summary-v2 .summary-title a:link { color: rgba(18, 17, 17, 0.66); /* color of title */ font-size: 15px !important; weight: 400; font-family: freight-medium; } 2/ I am trying to disable the link of my secondary metadata tags but my code is not working. I used the following code : /* disable blog links on summary block titles for Date Box*/ #floatsection .summary-item-has-tags-link { pointer-events: none !important; } I am really struggling to move an element around, I have spent several hours trying to fix it but it's a total mess. Thanks in advance ! Manon
  4. 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)?
  5. portfolio 7.1 site mobile view on portfolio page hover overlay text does not appear whatsoever - I really need this text title to display on touch screens mobiles upon scrolling or selecting -how may i fix this? please take a peek at the portfolio page on any mobile view www.nadinenorman.com/artwork sincere thks to anybody who may be of help - nadine
  6. Site URL: http://www.furrylittlepeach.com/ Hi there, I would like to achieve a gallery wall where each images title can be seen when hovering over the image. Does anyone know how to do this where the overlay is transparent white, the caption is opaque and black, and the text is in the center of the image? I provided a link to a website in Supply that already figured it out. Thanks for any feedback.
  7. Site URL: https://www.crxssplatfxrm.com/selected-artists I have successfully used the following CSS to hide the hover text overlay from my portfolio, while keeping the hover colour overlay: .portfolio-text { opacity: 0 !important; } However, I wish to add another portfolio to the site, on which I want to keep the hover text overlay – it seems that the above command affects all portfolios site-wide. Is there an addtion I can make to the CSS to specify the one portfolio?
  8. Hi SS Forum, I am trying to overlay my png. logo file over a slideshow gallery in square space. Does anyone know a code for this? As my logo file is not text but an image, I am having troubles overlaying this onto a slideshow or gallery. Thank you
  9. Site URL: https://www.birdmafia.com/gallery All, I'm not positive what I'm showing is called an overlay, but that's my best guess. On this webpage you can click on any of the first 5 gallery images and see it. I want to change color of text and the overlay itself, but can't seem to find any of those settings in Design->Site Styles. Maybe this template family (Skye) does not allow one to mess with it without CSS code? Any ideas would be appreciated. Can barely read the text as it's black on a close to black background.
  10. Hi all. Please can somebody help me? I want two different font styles on my image overlay... I've looked everywhere for custom css but can't find a solution. I'm looking to have a client name large and then project name smaller underneath in another colour. I've currently got // to separate these two things as it's the only way I can think of. Your help would be massively appreciated! Thanks in advance, Beth
  11. Site URL: https://sarah-ward-interiors.squarespace.com/config/settings/site-visibility Hello, I am wondering how I can modify the CSS on my site to make a full image a hyperlink when I have a full image caption overlay active? I currently have the caption text activated as a link button, but I'd like the whole image to activate as the link. Question is applicable to the Portfolio page only of the site. Password is SWI2020. Thanks!
  12. Site URL: https://sparrow-piano-jh6p.squarespace.com/rewards Hey there! The password to the above site is villamadina. I used this code to make some coloured text boxes. <div id="overlay"><div class ="blue"> <h2><span class= "headeroverlay-white">my text here</span></h2> </div> <style> .blue { background: #005ba9; padding: 10px; text-align: center; } </style> The "headeroverlay-white" is just "colour:white" in my custom css. When I'm in squarespace it looks fine but I just checked the site in incognito and found for some reason all the boxes are getting smaller? How do I fix this? Thanks!
  13. Site URL: https://www.terentyevpublishing.com/ What is the best way to fix the overlapping of the site title and the shopping cart sign? The attached screenshot is from Wav template on iPhone SE.
  14. Hi there, I have a portfolio page where project names run across the screen. When you hover over a name, it shows an image (I'm using the "Hover: Follow Cursor" portfolio layout). However, I notice that the image is darker than what I uploaded. I'm sure it's a dark overlay effect but I can't seem to figure out how to turn it off or change the opacity to be transparent. Any insight? I've inserted a screenshot of what my website looks like. When I hover over "Mock Album Covers," it brings up the image (a series of three squares) which is actually transparent. As you can see, the transparent parts have been darken—leading me to think this is an overlay, which I don't want.
  15. Site URL: https://mwejps3lrkma.squarespace.com Currently on 7.1 the Gallery blocks with links have no hover/interaction on them, so it's quite hard for users to tell they're clickable links. (example: https://mwejps3lrkma.squarespace.com) How easy is it to customise it so that we get a basic hover effect? Even a token 10% opacity on hover? Or even better display the 'Alt' text in the centre to match the styling on the Portfolio gallery blocks (example: https://mwejps3lrkma.squarespace.com/) I thought something like the below would be a quick fix but it doesn't seem to work; .gallery-grid-item img:hover { opacity: 0.9 !important; }
  16. Site URL: https://thetengcompany.squarespace.com How do I remove the overlay for a specific index page's banner? Specifically for the introductory video when people visit my site. PW: 1103E
  17. Hello, White parts of my images are gray in images blocks. See attached images. It seems to be a CSS issue because my imported images are properly white (not gray). Contrary to Squarespace 7.0, Squarespace 7.1 style editor doesn't seem to make possible to directly correct this. How can I fix this? What is the CSS code to correct/cancel this ? Thanks a lot
  18. Site URL: https://www.covid-19connect.com/thankyou Hey all, hoping for some help. When I upload vector images (saved as JPG) with white backgrounds, some come up with a grey-looking overlay. Any ideas on how to remove the overlay? Here's a link - the first image comes up with a clean white background, and the second two do not. How do I fix this? https://www.covid-19connect.com/thankyou
  19. Site URL: https://www.kinandfriendscookbook.com/ I have figured out how to make my blog titles overlay on to the image and want to add an overlay over the image so that the white font pops more. If anyone could help that would be amazing. Thanks everyone!
  20. Site URL: https://www.wouterleduc.com/shop Hi guys, I've started working on my webshop. Template Wells, this is the link: https://www.wouterleduc.com/shop I don't want any hover/overlay when the cursor is on the image/product. I can't find a code/solution to fix this. Does someone know a solution? Thanks in advance! Wouter
  21. Site URL: https://bat-chicken-yhj4.squarespace.com/ I've been trying to make this tweak work for me, which adds blog thumbnails as blog page banners in Brine. However, some images are so light or so busy that I really need a darker overlay over all my blog banners to make it a feasible solution. Does anyone know how to use css selectors to target Brine blog banners without targeting all banners site-wide? Selecting for the class .Intro-content will select all banners site-wide, but I want to target the blog banners exclusively. Thanks!
  22. Hello. I'd like to apply the same background overlay to mobile that appears on desktop when the promotional popup is active. On desktop I see the following CSS which is missing from mobile. How can I add this to the mobile CSS? .sqs-slide-wrapper[data-slide-type="popup-overlay"] .sqs-slide-container[data-slide-type="popup-overlay"] .sqs-slide { position: fixed; } .sqs-slide-wrapper[data-slide-type="popup-overlay"] .sqs-slide { background: #0000008c; } Thanks in advance!
  23. Hi, I'm wondering how I remove the gray overlay from the gallery grid hover. This is built as a gallery page and I don't want it to do anything on hover but can't seem to remove the option. Thanks!
  24. Site URL: https://tangerine-kumquat-nw9z.squarespace.com/ Hi there! I'm having some trouble with the Brine Template. I have applied some CSS to adjust my overlay menu in mobile (center the menu, make it slightly transparent), but when the overlay is active, the header - including the hamburger - disappears. I have played with the z-index, but to no avail. One odd behaviour is that the buttons for the title and menu are still clickable, but not the text / icon. Any ideas out there? Thanks!!
  25. Hey, so I was pretty adept at squarespace 7.0, but 7.1 has me on my heels. Basically I want to add a color overlay to a video that is running (via Vimeo) so that the white type/banner I'll put over the video will pop. In 7.0 this was a snap to do, but now I'm drawing a blank. Also, I'm not that bright, so please make any directions simple. Thanks!
×
×
  • Create New...