-
Posts
376 -
Joined
-
Last visited
-
Days Won
5
Content Type
Forums
Gallery
Blogs
Events
Store
Downloads
Profiles
Everything posted by RyanDejaegher
-
Changing logo in header while scrolling down
RyanDejaegher replied to a topic in Customize with code
@lieslmaduro do you have a link to the site? I can help you out -
Make items in a menu block clickable?
RyanDejaegher replied to songofeireann's topic in Customize with code
Hey @songofeireann I can see the restaurant menu block. The items are clickable, can you explain more of what you're trying to do? -
/* Add this code to Design -> Custom CSS */ .index-section { scroll-snap-align: start; } .index-list { overflow-y: scroll !important; height:100vh; scroll-snap-type: y mandatory !important; } Result: CleanShot 2020-06-22 at 10.31.58.mp4
-
@justin_phang you can do this with CSS now, it use to require JavaScript but there's a new feature in CSS that makes this easier to implement
-
Vertical lines between each card in a 'Summary' block
RyanDejaegher replied to katiapase's topic in Customize with code
@katiapase It'll depend on what blocks you use on the page, especially if you're wanting to have the borders be consistent across all the blocks on the page. I would put all the elements that you're going to use on the page first and then revisit -
Vertical lines between each card in a 'Summary' block
RyanDejaegher replied to katiapase's topic in Customize with code
@katiapase yes I figured, that would require quite a few overrides to achieve the same effect. Because you have to account for the borders on multiple columns/elements and also the spacing to ensure that any existing text/elements aren't bumping up against the border. -
@Frames_by_Saurabh It looks like Squarespace does some lazy loading on the images that aren't visible yet, so as you scroll and as these images are loaded the layout of the page is "repainted". Repainting can cause a bit of performance lag especially when a lot of elements are being repainted. You could experiment with removing the code altogether and see if you run into the same issue.
-
@ipratt, you'll need to share the site password to help troubleshoot
- 38 replies
-
- logo
- custom-css
-
(and 1 more)
Tagged with:
-
@Frames_by_Saurabh /* Add this code to Design -> Custom CSS */ .gallery-masonry-wrapper { height: unset !important; } This should fix it
-
@RedTrillium, @crockey, if you have links to your sites I can give you hand. Worked on a similar solution below CleanShot 2020-06-17 at 11.25.31.mp4
- 11 replies
-
- css
- brine-template
-
(and 1 more)
Tagged with:
-
Gallery Captions HOVER Squarespace 7.1 Please help!
RyanDejaegher replied to a topic in Customize with code
@Pandagal Is this the effect you're after? If so this could should get you started /* Add this code to Design -> Custom CSS */ .gallery-caption { position: absolute !important; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 102%; text-align:center; opacity: 0; transition: all .3s ease; background-color: white; height: 100%; } .gallery-masonry-item:hover .gallery-caption { opacity: 1; transition: all .3s ease; } .gallery-caption-wrapper { display: flex; place-items: center; justify-content: center; } CleanShot 2020-06-19 at 12.09.19.mp4 -
Change logo colour or header image on blog post 7.1
RyanDejaegher replied to Cattty's topic in Customize with code
@galangster, would something like this work? This is being done with the Summary List and could be used below the main header CleanShot 2020-06-18 at 20.29.52.mp4- 19 replies
-
WIP on a CSS only solution to a Full bleed slideshow. Will share solution when it's ready 🙂 CleanShot 2020-06-18 at 20.29.52.mp4
-
@Frames_by_Saurabh This code will give you a single column on tablet and down. Result: @media(max-width:767px) { .gallery-masonry-item { width: 100% !important; transform: unset !important; position: unset !important; } .gallery-masonry-item-wrapper { height: unset !important; } }
-
Image Description on Hover: Grid: Masonry 7.1
RyanDejaegher replied to Falconer's topic in Customize with code
@Falconer, was there no option to show the title only on hover? -
Vertical lines between each card in a 'Summary' block
RyanDejaegher replied to katiapase's topic in Customize with code
-
Image Description on Hover: Grid: Masonry 7.1
RyanDejaegher replied to Falconer's topic in Customize with code
Hey @Falconer do you have your gallery set to display a caption? -
@Ben_Keeley Yep you can use this code .header-nav-folder-content { background: rgba(0,0,0,.5) !important; }
-
@Ben_Keeley You can use this code. You can change the last value (0.5) between 0 - 1, to adjust how transparent the color is. BTW is this your company? If so super cool 🙂 /* Add this code to Design -> Custom CSS */ #header { background: rgba(0,0,0,0.5); }
-
How to randomize images on page?
RyanDejaegher replied to persimmondevelopment's topic in Customize with code
@bangank36 my bad 🙂 -
How to randomize images on page?
RyanDejaegher replied to persimmondevelopment's topic in Customize with code
Solution that doesn't require jQuery <script> // Add this code to Settings -> Advanced -> Code Injection -> Footer (function(){ function shuffleChildren(parentSelector) { var parent = document.querySelector(parentSelector); parent.children.forEach((item,index) => { parent.appendChild(parent.children[Math.random() *index | 0]) }) })(); // Example shuffleChildren('.index-list'); } </script> Demo CleanShot 2020-06-17 at 11.25.31.mp4 -
Can you define categories with specific colours?
RyanDejaegher replied to JButler's topic in Customize with code
@JButler yes you can customize the style for category links, you'll need to copy the link/url and copy it to the code below. You can do this with blog categories or shop categories. /* Add this code to Design -> Custom CSS */ a[href="/shop?category=tumblers"] { color: red; } a[href="/shop?category=straws"] { color: blue; } Here's an example from another site with this code in place -
@snorkelcookislands // Add this code to Settings -> Advanced -> Code Injection -> Footer <script> (function(){ window.addEventListener('load', function(){ var tours = document.querySelector('[href="/tours"]'); tours.addEventListener('click', function() { window.location = tours.href }) }) })(); </script>
-
remove "from price" in shop product
RyanDejaegher replied to PhilipStewart's topic in Customize with code
Hey @PhilipStewart you'll need to set a sitewide password before anyone can look https://support.squarespace.com/hc/en-us/articles/205815528-Site-wide-passwords