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


  • Posts

  • Joined

  • Last visited

Everything posted by Alexg77

  1. Sorry for the clog. Finally figured this out. See code here if helpful ( I know I've seen other incomplete/ unsolved threads with similar questions) .blog-side-by-side{ background-color: #1E1E24 !important;} .blog-side-by-side .blog-title, .blog-excerpt, .blog-date{ color: #ffffff !important;} .blog-side-by-side .blog-meta-primary{ color: #ffffff !important; } And then depending on your blog style, replace .blog-side-by-side with whichever blog type is relevant: Alternating Side by Side .blog-alternating-side-by-side Basic Grid .blog-basic-grid Masonry .blog-masonry Side by Side .blog-side-by-side Single Column .blog-single-column
  2. Site URL: https://apple-drum-7nk8.squarespace.com/perspectives I'm trying to figure out how to make my blog summary page one color palette (dark minimal), and my individual blog posts as my light minimal palette. I've managed to adjust simply the background color of the summaries page, but can't manage to adjust all other aspects of the section. Any ideas here? Page is at: https://apple-drum-7nk8.squarespace.com/perspectives and password is: p3akt3ch Thank you!!!
  3. Site URL: https://apple-drum-7nk8.squarespace.com/experience I can't seem to figure out the correct unique identifier to remove the display of titles and categories in just one of my blog summary pages. I have two separate blogs using side-by-side grids for their summary pages. How can I remove the title and category display on just this one blog collection (the one on the "EXPERIENCE" page)? How do I find the unique identifier for this specific collection? Page URL: https://apple-drum-7nk8.squarespace.com/experience // Password: p3akt3ch My code: #block-yui_3_17_2_1_1611685336323_126 .blog-basic-grid .blog-title { display: none; } #block-yui_3_17_2_1_1611685336323_126 .blog-basic-grid .blog-categories { display: none; } Thank you!!
  4. @Matt_Steinke did you figure this out? I can't tell exactly which text you're trying to adjust. But I think you can do this without code. When in edit mode on the block you're trying to edit, then simply click colors on the editing window dropdown, and click edit next to your selected palette. Detailed preferences for your color palette should appear on the right. Click on the hyperlink text to auto-locate the color preferences for hyperlinked text. You should be able to adjust it in that detailed color palette dropdown -- but note this will be for all pages with that palette. If you're looking to do this with just the unique block of text, you'll need it's unique ID. Can you share a screen grab of which text you're trying to adjust?
  5. @Alcjcbs Can't see the site as you have restricted permissions. Are you in 7.0 or 7.1? Either one of these guides should be helpful depending on what you're after. If you're just looking to go from white to black, you can add this via a code injection at the top of each page. So basically set the logo how you want for most pages (sounds like you mostly want it black). And then on the individual pages where you want it to be inverted (from black to white or vice versa), click the settings wheel at the top right of the page while you're in editing mode. Then click Advanced > Page Header Code Injection. Insert the code based off this guide (varies depending on what version/ template you're using): https://christyprice.com/squarespace-tips-tricks/how-to-invert-logo-single-page-squarespace And if you want to use a logo in different colors, you might be better off using this as your guide (like if you also want to upload an orange or yellow or whatever colored-logo) : https://www.maryphilip.com/the-blog/how-do-you-change-the-logo-on-a-single-page-squarespace Both were straightforward, easy to use, and worked for me! Hope this helps.
  6. @MarcWatson@LaurenLeader I think I actually found a solution! You can purchase the Universal Filter plug-in from the same resource: https://www.squarewebsites.org/products/universal-filter. I had taken the filter off while I tried to figure out the infinite scroll issue, but when I turned it back on (and read the fine print), I realized the filter actually loads all blog posts and enables infinite scroll, so to speak. The only catch is you'll need to enable some kind of filter on your blog page -- but there are some clean and minimal ways you could work this in if that's the trade off. Anyway I'm still working through customizing the filter's design, but it's pretty great!
  7. Looking for solution to same issue! Let us know if you found anything @MarcWatson. I found this for extending post limits on summary blocks https://www.squarewebsites.org/products/lazy-summaries#showReviews, but I'd like to find a way to make infinite scroll (or at least get to 60-70) blog posts on the side-by-side grid page.
  8. @tuanphanyes! Site url: https://apple-drum-7nk8.squarespace.com/ Password: p3akt3ch So my CSS is currently: // blog image block bw: inactive #block-yui_3_17_2_1_1607119205190_12427 .sqs-block-summary-v2 .img-wrapper img{transition: filter .5s ease-in-out; filter: grayscale(100%);} //blog image block color: active #block-yui_3_17_2_1_1607119205190_12427 .sqs-block-summary-v2 .img-wrapper img:hover { filter: grayscale(0%);} But I'd like to find a way to make a blend mode -- either "multiply" or "screen" with overlay color #1E1E24. So trying to make same animation that's currently working, but instead of a grayscale, the filter would be one of the blend modes.
  9. Site URL: https://apple-drum-7nk8.squarespace.com/perspectives I created a code injection to style two different font types and colors within a single text box, so to speak. In demo mode, it's working perfectly, but for some reason when I test the live version of the site, there's an extra line break appearing between the orange number and the title text (see screen grabs for reference). Within my html code injection, how can I either reduce the vertical space of the line break, or minimize the line height between the number and the chapter title. The first screengrab (in demo mode) shows how I want the live version (see second screengrab) to function. Site page: https://apple-drum-7nk8.squarespace.com/perspectives Password: p3akt3ch My HTML code injection: <span style = "p2"> <p2 style="color:#f95624"> 01. <h3>Build Your Story</h3>
  10. Thanks @bangank36! Current site: https://apple-drum-7nk8.squarespace.com/ // password: p3akt3ch Trying to get an overlay color of #1E1E24 to blend with those blog thumbnails currently in the middle of the page. I can get them to greyscale, but not sure how to create other filters/ blend modes
  11. @creedon are you able to share css for how we can achieve a hoverable blend mode for summary block images? So similarly, I'm looking to create a "multiply" or "screen" blend mode (tbd) with a single color background for all summary block images, so they blend with the color #1E1E24 in normal state, and then when hovering, the blend mode eases out to disappear. Make sense? I can't seem to figure out how to execute for a whole set of summary block thumbnails.
  12. @LYDIAPALESCHI which version of Squarespace are you using? If you're in 7.1, select each blog post and click "Edit." Once in editing mode on each blog post, click that white horizontal bar at the top of the specific blog page. A window will pop up. Click "Options" and then "remove image." If you don't have an image uploaded in "thumbnail image," then you won't have any thumbnail images on the top-level view. You can also access this by going to "manage blog posts." You'll see the list of all your blogs on the left-hand menu. Click the three dots to the right of the specific blog you want to edit, then "settings" > "options" > "remove image" Make sense?
  13. @ayupchap1 you can try putting spacers on the left and right sides of the images. Expand the spacers horizontally, and your images should resize accordingly (in that the spacers will be taking up more of the horizontal width of the page). No code needed.
  14. How can I create a colored blend mode as a hover effect for my summary block thumbnail images? So I'm essentially trying to create the "multiply" or "screen" blend mode effect (from photoshop) where each image is blended with a background color, in this instance using hex #1E1E24 to blend with images on static state. And then on hover I want the blend mode to ease out/ disappear. I've found a few CSS snippets to apply the multiply blend mode to an individual image, but I can't seem to figure it out for all the thumbnail images on a summary block. Thanks!
  15. @rwp Thanks again for all of your amazing help with this. I'm still playing around here, and while I've swapped out "opacity" for alternatives like "brightness" or "contrast" in the latter half of the code for figure.gallery-grid-item, I can't seem to figure out how to basically reverse the image fade hover effect. So rather than becoming slightly more transparent on the hover, I think I'd alternatively like it to either be at full opacity on the hover (and maybe like .85 opacity in default state) OR have images at full opacity at default state and then get slightly darker on the hover. I realized I need a little more contrast against the white title text that appears. Any suggestions? Thanks again for your patience and time here!! Site: https://okra-swordfish-w2kf.squarespace.com/film // PW: Asg77! Current code is: //film hover titles figure:hover .gallery-grid-image-link::before { opacity: 1;} .gallery-grid-image-link::before { opacity: 0; z-index: 999; position: absolute; bottom: 0%; left: 3%; color: white; transition: opacity 1s;} figcaption.gallery-caption.gallery-caption-grid-simple { display: none;} figure.gallery-grid-item.has-clickthrough:hover img { opacity: .85;} figure.gallery-grid-item.has-clickthrough img { transition: opacity 1s;} /* THIS NEEDS TO BE DONE FOR EACH LINK */ .gallery-grid-image-link[href="/cuttlefish"]::before { content: "cuttlefish"; font-size: 7vw; } .gallery-grid-image-link[href="/undercovered"]::before { content: "undercovered"; font-size: 7vw; } .gallery-grid-image-link[href="/howdoyouknow"]::before { content: "how do you know"; font-size: 7vw; } .gallery-grid-image-link[href="/fried"]::before { content: "fried"; font-size: 7vw; }
  16. @rwp Got it, thanks, that worked! And then for mobile, I tried the following, but it's not working. I think the issue is with how I'm identifying the caption text, but what should I swap in instead? Thanks so much for your patience here! I'm clearly a real newbie... @media only screen and (max-width: 725px){.gallery-grid-image-link[href="/cuttlefish"]::before { content: "cuttlefish"; font-size: 30px; }
  17. @rwp got it, thanks. Swapped "top" and "left" with "bottom" and "right" and now it's all wonky -- the adjustments only seem to work for first project description text, and subsequent project type isn't changing. Thanks again for your help.
  18. @rwp Sorry, quick follow up as I play with styling -- First, I increased the font size and moved the text to the bottom right of each photo, but now the project titles are beginning outside the frame. I tried to insert a "text-align: left;" line but that didn't help much, and when I tried "margin: 0px 75px 20px;" it made the alignment inconsistent across titles. Do I modify the numbers in the transform? How do I ensure the titles are contained within the parameters of the image? Screengrab below. Second, for mobile/ tablet, what else will I need to adjust outside of "font-size" to ensure the alignment is consistent? And the hover effects would take place on the tap, I imagine. Latest code, below (my tweaks in orange)-- //film hover titles figure:hover .gallery-grid-image-link::before { opacity: 1; } .gallery-grid-image-link::before { opacity: 0; z-index: 999; position: absolute; top: 75%; left: 25%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); color: white; transition: opacity 0.5s; } figcaption.gallery-caption.gallery-caption-grid-simple { display: none; } figure.gallery-grid-item.has-clickthrough:hover img { opacity: .85; } figure.gallery-grid-item.has-clickthrough img { transition: opacity 0.5s; } /* THIS NEEDS TO BE DONE FOR EACH LINK */ .gallery-grid-image-link[href="/cuttlefish"]::before { content: "cuttlefish"; font-size: 150px; margin: 0px 75px 20px; } .gallery-grid-image-link[href="/undercovered"]::before { content: "undercovered"; font-size: 150px; } .gallery-grid-image-link[href="/howdoyouknow"]::before { content: "how do you know"; font-size: 150px; line-height: .9em; } .gallery-grid-image-link[href="/fried"]::before { content: "fried"; font-size: 150px; }
  19. @rwp Amazing! This works beautifully! Thank you so much!! The manually adding of each project name is no problem at all -- and this also gives me a pretty straightforward way of adjusting the text/ hover effect as needed. Huge thanks!!
  20. @rwp Thanks for reply! Password: Asg77! Page/ image block is currently at: https://okra-swordfish-w2kf.squarespace.com/film
  21. Site URL: https://okra-swordfish-w2kf.squarespace.com/ I'm trying to enable image descriptions to appear atop the center of each image upon hover. While I've managed to create a nice ease in/ out effect with making the image slightly more white (essentially so the text can stand out), I can't seem to get description text to appear on each image with the hover. I've gone through a number of threads, but for some reason every version of code I've found isn't working for me. To note, I need to maintain clickthrough abilities, as each image links to its own respective project page I'm working with a gallery block, simple grid on Squarespace 7.1. Here's the code I have so far: //IMAGE BACKGROUND ON HOVER figure.gallery-grid-item .gallery-grid-item-wrapper:before { background-color: white; content: ""; display: block; position: absolute; top: 0; bottom: 0; left: 0; right: 0; z-index: 999; opacity: 0; transition: all 0.5s; } figure.gallery-grid-item:hover .gallery-grid-item-wrapper:before { opacity: 35%; transition: all 0.5s; } Do I add something to this specific segment of code, or is there a different block of code I should add for the descriptions to also appear on the hover? I'm new to CSS and would be so grateful for some insight! With gratitude! Alex
  22. Yes, @krizbell looking for solution for same problem here. Please post solution if you find one! 🙏
  23. @paul2009 I'm trying to figure out how I can integrate a paywall for both individual videos and also video bundles on my Squarespace page. Does Vimeo On Demand require customers to log in to Vimeo or have pre-existing Vimeo accounts, or can the random lay person simply click on the video embedded into the Squarespace site, pay on the spot, and subsequently watch the content? Second, do you know if there's a way to integrate subscriptions (or membership) to access multiple videos? Thank you! I've been looking into all sorts of solutions here, like Podia or Zype, but can't seem to figure out what the most seamless, simple paywall integration for online webinars and courses is for our Squarespace site.
  24. Hello, I'm trying to figure out a clean solution to enabling a pay-per-view + subscription option for online video content. We're looking to include webinars and teaching videos on our website, and I'm wondering if anyone has found a clean way of enabling visitors to either a) pay-per-view or b) create a subscription to access video content. I've found a few outside platforms, but they appear to be quite costly, and we'd like a clean integration into the Squarespace site. Any suggestions would be much appreciated!
  • Create New...