Ad7am
-
Posts
14 -
Joined
-
Last visited
Reputation Activity
-
Ad7am reacted to creedon in Display border around code block in edit mode only
This isn't pretty but should get you started.
.sqs-edit-mode-active .sqs-block-code { border : 1px solid red; } Let us know how it goes.
-
Ad7am got a reaction from Beyondspace in View Full Screen on Light Box
Hi Bangan,
I want to enable images in gallery lightboxes to show at their full width (no matter the height), so I used this code:
.gallery-lightbox-item { height: auto !important; } .gallery-lightbox-wrapper { overflow-x: hidden; overflow-y: auto; } This works, with one issue: The scroll bar is outside the <Next> arrow.
I tried substituting .gallery-lightbox-wrapper with each of these other IDs I found in the page source:
.gallery-lightbox-wrapper .gallery-lightbox-item-wrapper .gallery-lightbox-item .gallery-lightbox-list .gallery-lightbox-item-src .gallery-lightbox-item-img Unfortunately the only one that came close was .gallery-lightbox-list — that put the scroll bar inside the arrow, but for some reason scrolling didn't work.
Any ideas to solve this?
Thanks in advance.
-
Ad7am got a reaction from sfphotogirl in [Share] Squarespace 7.1 CSS ID List
Thanks for posting this list, Tuanphan.
For gallery lightboxes, I've found the following IDs:
.gallery-lightbox-wrapper .gallery-lightbox-item-wrapper .gallery-lightbox-item .gallery-lightbox-list .gallery-lightbox-item-src .gallery-lightbox-item-img I wanted to enable my gallery images to show at their full width (no matter the height), so I used this code:
.gallery-lightbox-item { height: auto !important; } .gallery-lightbox-wrapper { overflow-x: hidden; overflow-y: auto; } It works, with one issue: The scroll bar is outside the <Next> arrow.
I tried substituting .gallery-lightbox-wrapper with each of the other IDs above. But the only one that came close was .gallery-lightbox-list. That put the scroll bar inside the arrow, but for some reason scrolling didn't work.
Any ideas to solve this?
Thanks in advance.
-
Ad7am reacted to Wolfsilon in Add JS effects & SVG effects to Squarespace 7.1 site — server-side code?
If you're looking for fast and simple "scroll reveal" and block animations. You can use ScrollReveal.
-
Ad7am reacted to itsgus in Add JS effects & SVG effects to Squarespace 7.1 site — server-side code?
Hi Ad7am,
The site is live: https://20nelabs.com
All the scroll animations are implemented with GSAP using custom JavaScript
-
Ad7am reacted to itsgus in Add JS effects & SVG effects to Squarespace 7.1 site — server-side code?
Hi Ad7am,
I successfully managed to implement GSAP animations on the client's site. You can see the animations here: 20neLabs site.
It takes a good knowledge of JavaScript to implement these features It would be WAY easier to implement these features if working with a Squarespace 7.0 or legacy project as you can clone the site's code to your local environment and stage changes more quickly Working on the Squarespace environment will involve considerable time spent debugging as you have to go back and forth on styles, scripts, etc... Your site's full wireframe must be set and done before you begin to work; this is due to Squarespace programatically adding `ids` and `classes` to elements in the DOM, all of which you cannot modify I've attached a couple of images so you can see what I mean by injecting the scripts and so on.
The first image shows the GSAP library being injected in the document's <head> globally; this is done through the site's dashboard Settings -> Advanced -> Code Injection; the second image is of page-specific code injection in the <head> tag (meaning it will only inject the code in that specific page's <head> tag). Here you can reference elements from the page and add custom scripting code, external references, etc... To access this you click on the page's Settings -> Advanced panel and add your code there.
I hope it helps.
-
Ad7am got a reaction from itsgus in Add JS effects & SVG effects to Squarespace 7.1 site — server-side code?
Not yet. Very interested to see what you do & how you do it.
-
Ad7am reacted to itsgus in Add JS effects & SVG effects to Squarespace 7.1 site — server-side code?
Hi Ad7am,
I'm currently implementing GSAP animations for a client; you must inject the scripts into the head of the document using the Settings -> Advanced feature (available in Business plan and above apparently), and then add your custom script inside a <script> tag.
One important thing I've noticed: you must wait until the DOM (your site's structure) is completely loaded and parsed for you to reference elements when defining variables. You can achieve this by writing your code inside the following snippet:
window.addEventListener('DOMContentLoaded', () => { // write your code here } Have you gotten this far yet? Once I finish the implementation I might be able to help you.
-
Ad7am reacted to humxahafeex in Add JS effects & SVG effects to Squarespace 7.1 site — server-side code?
Hi, It's 100% possible to add without SERVER SIDE CODING ,it might take a bit time to get it done but it's 100% possible.
-
Ad7am reacted to creedon in Inverted Cursor Hover Effect
@Jprood
I think I have the answer to your issues.
First remove (make a copy) or comment out any code that you added in previous attempts.
Add the following to Design > Custom CSS.
@media ( hover: none ) { .cursor { display: none !important; } } * { cursor: none; } .cursor { --size: 10px; height: var( --size ); width: var( --size ); border-radius: 50%; pointer-events: none; position: absolute; transform: translate( -50%, -50% ); z-index: 99999999999; } .cursor.cursor-dot { background: #ffffff; /* This defines the color of the cursor */ mix-blend-mode: difference; /* Delete this line if you dont want the circle to invert */ transition: width 0.6s, height 0.6s, background-color 0.6s; transition-timing-function: ease-out; } .cursor-dot.active { --size: 50px; background-color: #ffffff; } Add the following to Settings > Advanced > Code Injection > HEADER.
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> Add the following to Settings > Advanced > Code Injection > FOOTER.
<script> $( ( ) => { $( 'body' ).prepend ( '<div class="cursor cursor-dot" style="left: 0px; top: 0px;">' ); $( window ).mousemove ( function ( e ) { $( '.cursor' ).css ( { left: e.pageX, top: e.pageY } ); } ); $( window ).mousemove ( function ( e ) { $( 'a' ).on ( 'mouseenter', function ( ) { $( '.cursor' ).addClass ( 'active' ); } ); } ); $( window ).mousemove ( function ( e ) { $( 'a' ).on ( 'mouseleave', function ( ) { $( '.cursor' ).removeClass ( 'active' ); } ); } ); } ); </script> You will need to change the colors to match your color scheme.
Let us know how it goes.
-
Ad7am reacted to babyface in New Google Analytics Tag
HERE'S THE SOLUTION:
In Google Analytics create a new property. In the new property setup panel there's a link "Show Advanced Options" at the bottom. In Advanced Options there's an option "Create a Universal Analytics property". Using this option will give you the option to either create both a GA4 and a UA id in which case it creates 2 properties and links them or you can just create a single UA id.
-
Ad7am reacted to IveGotQuestions in Zooming in on images in either gallery, lightbox, or image blocks
So I found a workaround: Creating a new page for each individual photo (and adding custom CSS to reduce side padding on each individual photo page). Now the photos on the gallery page each link to the individual photo page so that when clicked you see a larger version. Not perfect, but it works!
-
Ad7am reacted to alxfyv in I can't get my google sheet to be responsive! What am I doing wrong?
Do not set attributes in the
<iframe> tag, especially width and height. Do it in CSS. All that's needed in the
<iframe> tag is the src= attribute.
You will find all the HTML and CSS needed to have a responsive
<iframe> in the pen Responsive Iframe - REF on CodePen. See the comments (comments button on the lower left) for further explanation. The
<iframe> is responsive in that at narrower window sizes it scrolls horizontally.
Put the HTML in an embed block. Put the CSS in Design > Custom CSS. Keep or discard the CSS general styles setting border, box-shadow, padding, etc.
If you have questions, leave a comment. In any event, please let me know whether it works and satisfies your needs.
-Steve
-
Ad7am reacted to brandon in Slideshow - Swipe or flick through/Horizontal scrolling
Hi @VLabrie.
I have implemented Flickity on multiple Squarespace websites, and it's a great library. However, it's really more of a developer's gallery tool/module than something you implement on top of a Squarespace gallery. In other words, it's its own gallery module in itself. It could be used without developer mode, but would likely be more cumbersome than would be reasonable to implement.
For slideshow gallery blocks (and other blocks and contexts too), I created Swipeable Galleries for Squarespace. Now, to clarify, it does not alter the transition of images (as in, if your gallery fades, it will still fade...but gestures will trigger the transition) nor does it add touch/track-pad swiping (such as two-finger swipe for horizontal scroll). It focuses on touch devices (tablets, phones, most Windows-based laptops these days, etc.), and adds swipeability to those. So, it doesn't check all your boxes, but it may suffice.
I hope that helps.
-Brandon
-
-
-
Ad7am reacted to Sensebellum in Allow pinch-to-zoom for Lightbox images on mobile?
For the record here is another plugin. "Pinch Zoomer jQuery Plugin"
Not sure on how to integrate with Squarespace but it seems like it gets at the issue.
https://codecanyon.net/item/pinch-zoomer-jquery-plugin/6623080
-
Ad7am reacted to vernistage1 in Allow pinch-to-zoom for Lightbox images on mobile?
Hey, I was trying to figure out why Squarespace wouldn't add what seemed like such a simple responsive feature request. I started isolating my lightbox classes in Chrome dev tools and noticed a "yui" id. I couldn't find "yui" anywhere in the template source code, so I started Googling. It appears that Squarespace may be fully relying on this library: https://yahooeng.tumblr.com/post/96098168666/important-announcement-regarding-yui, which was abandoned years ago. I saw someone posted this issue about updating touch zoom features for Google Chrome, and my worst fears were confirmed: https://github.com/yui/yui3/issues/1997. Squarespace, did you build this entire site on an abandoned codebase? Are you building off a fork somewhere? If you're still maintaining a fork, why are you not keeping touch actions up-to-date with contemporary UI and browser capabilities?
-
Ad7am reacted to tuanphan in Hamburger Menu Nav across all devices (version 7.1)
You can replace burger with three lines icon
Add to Home > Design > Custom CSS
.burger-box div { display: none; } .burger-box { background-image: url(https://image.flaticon.com/icons/svg/876/876207.svg); background-size: contain; background-repeat: no-repeat; background-position: center center; }
-
Ad7am reacted to tuanphan in Hamburger Menu Nav across all devices (version 7.1)
You can replace burger icon with custom three lines (here is an example img)
Add to Home > Design > Custom CSS. Replace current image with three lines icon url
.burger-box div { display: none; } .burger-box { background-image: url(https://static.thenounproject.com/png/3143942-42.png); background-size: contain; background-repeat: no-repeat; background-position: center center; }
-
Ad7am reacted to JOHNMD in Hamburger Menu Nav across all devices (version 7.1)
@MartyMeh To style on version 7.1.
Link Alignment:
.header-menu-nav {text-align: left!important; margin-left: 15%!important;}
Page Background color:
.header-menu-bg {background: red!important;}
Add image as background to Page: (replace with your image.)
.header-menu-bg {background-image: url('https://static1.squarespace.com/static/5e04314e1e03733084a0d51a/t/5ece9831d9f131439a22411a/1590598888064/Cork-City-Centre-at-Night.png');
background-repeat: no-repeat;
background-size: cover;}
Space between links:
.header-menu-nav-item {line-height: 20px!important;}
Link text :
.header-menu-nav-item > a {color: green!important;}
Floating header is set in the Header Edit option. Select Style > and toggle to Fixed.
- John
-
Ad7am reacted to tuanphan in [Share] Squarespace 7.1 CSS ID List
Some CSS Class/ID for Squarespace 7.1
Announcement Bar
Announcement bar: .sqs-announcement-bar-dropzone Announcement bar text: .sqs-announcement-bar-dropzone p Announcement bar link: .sqs-announcement-bar-dropzone a Announcement Bar Close Icon: .sqs-announcement-bar-close OR .sqs-announcement-bar-close:after Header
Header: header#header Sticky Header: header.shrink Header (not include sticky header): header#header:not(.shrink) Header (when burger menu is open): body.header--menu-open header#header Header (when burger menu is close): body:not(.header--menu-open) header#header Site Title: a#site-title Site Title (when overlay menu open): .header--menu-open a#site-title Site Title (when overlay menu close) body:not(.header--menu-open) a#site-title Navigation: .header-nav Navigation Items: .header-nav-item a Navigation First Item: .header-nav-item:nth-child(1) a Navigation Second Item: .header-nav-item:nth-child(2) a Navigation Dropdown: .header-nav-folder-content Navigation Dropdown Items: .header-nav-folder-item a Navigation Folder Title: a.header-nav-folder-title Mobile Navigation Items: .header-menu-nav-item a Mobile Navigation First Item: .header-menu-nav-folder[data-folder="root"]>div>div:first-child Mobile Navigation First Item (text): .header-menu-nav-folder[data-folder="root"]>div>div:first-child a Mobile Navigation Second Item: .header-menu-nav-folder[data-folder="root"]>div>div:nth-child(2) Mobile Navigation Second Item (text): .header-menu-nav-folder[data-folder="root"]>div>div:nth-child(2) a Mobile Menu Icon: .header-burger Mobile Burger 3 lines: .burger-inner>div Mobile Menu X icon: body.header--menu-open .burger-inner>div Header Social Icons: .header-actions .icon Cart Icon: header#header span.Cart-inner Cart quantity: header#header .icon-cart-quantity Header Button: header#header a.btn Header Desktop Button: .header-display-desktop a.btn Header Mobile Button: .header-menu-cta a a Footer
Footer: footer#footer-sections Footer Social Icons: footer#footer-sections .sqs-svg-icon–outer Footer Links: footer#footer-sections a Product List
Product List: .collection-type-products.view-list Product Name: .grid-title Product Price: .grid-prices Product Image: figure.grid-image Product Currency: body.native-currency-code-usd .sqs-money-native:before Sold Out Text: .product-mark.sold-out Product Detail
Product Detail: .collection-type-products.view-item Product Breadcrumb: .ProductItem-nav-breadcrumb Product Pagination (Previous/Next): .ProductItem-nav-pagination Gallery: figure.ProductItem-gallery Thumbnails: .ProductItem-gallery-thumbnails Big Image: .ProductItem-gallery-slides Product Name: h1.ProductItem-details-title Price: .ProductItem-product-price Currency: body.native-currency-code-usd .sqs-money-native:before Excerpt: .ProductItem-details-excerpt Add to Cart Button: .sqs-add-to-cart-button-wrapper Add to Cart Text: .sqs-add-to-cart-button-inner Variant Dropdown: .variant-option Variant Title: .variant-option-title Variant Options: .variant-select-wrapper option Quantity Text: .quantity-label Quantity Input: .product-quantity-input Cart Page
Cart Page: body#cart Cart Page Title: .cart-title Product Name: a.cart-row-title Product Thumbnail: div.cart-row-img Qty minus: .cart-row-qty-dec Qty plus: button.cart-row-qty-inc Qty number: input.cart-row-qty-input Price: .cart-row-price X icon: .cart-row-remove or .cart-row-remove svg Sub total text: .cart-subtotal-label span Sub total price: .cart-subtotal-price Checkout Button: button.cart-checkout-button Item: .CartTable-itemLabel-3zzV1 QTY. .CartTable-itemLabel-3zzV1 span Price Name: .CartTable-itemPrice-XgjsO span X icon: .item-remove div Blog List
Blog List: [class*="type-blog"].view-list Thumbnails: article.blog-item img Date: time.blog-date Category: span.blog-categories-list Title: h1.blog-title Excerpt: .blog-excerpt Read more: a.blog-more-link Blog Posts
Blog Posts Page: [class*="type-blog"].view-item Blog Items: .blog-item-entry Categories: .blog-meta-item–categories Date: time.dt-published.blog-meta-item.blog-meta-item–date Author: .blog-meta-item.blog-meta-item–author.p-author.author Title: .blog-item-title Content: .blog-item-content-wrapper Pagination: .item-pagination Pagination Arrows: .item-pagination-link .item-pagination-icon Pagination Title: h2.item-pagination-title Author Box: .blog-item-author-profile-wrapper Author Image: a.author-avatar.content-fill Author Name: .author-name Author Site: a.author-website Post Comment: .squarespace-comments Post Comment Button: .comment.btn Comment Input: .squarespace-comments .new-comment-area Preview: span.btn-text.preview-comment.top-level-preview-btn Subscribe via email text: span.subscribe.subscribe-control Blog Grid
updating
Blog Masonry
updating
Event List Page
Event List Page: .collection-type-events.view-list Event Thumbnail: a.eventlist-column-thumbnail.content-fill Event Time: .eventlist-datetag Event Date: .eventlist-datetag-startdate.eventlist-datetag-startdate–day Event Month: .eventlist-datetag-startdate.eventlist-datetag-startdate–month Event Title: h1.eventlist-title Event Hour: li.eventlist-meta-item.eventlist-meta-time.event-meta-item Event Description: .eventlist-description Event Detail Page
Event Detail Page: .collection-type-events.view-item Event Title: h1.eventitem-title Event Date: time.event-date Event Hour: li.eventitem-meta-item.eventitem-meta-time.event-meta-item Event Description: .eventitem-column-content Event Pagination: section.item-pagination.item-pagination–prev-next Previous/Next: .item-pagination-link .item-pagination-prev-next Event Pagination Title: h2.item-pagination-title Portfolio
title: h3.portfolio-title item: .portfolio-grid-basic portfolio image: .portfolio-grid-basic .grid-image pagination: [data-collection-type=“portfolio-grid-basic”].item-pagination pagination text: h2.item-pagination-title pre text: .item-pagination-link–prev .item-pagination-prev-next next text: .item-pagination-link–next .item-pagination-prev-next List Simple
List Simple: .user-items-list-simple Image: .user-items-list-simple img First Item: .user-items-list-simple li:nth-child(1) Second Item: .user-items-list-simple li:nth-child(2) List Content: .user-items-list-simple .list-item-content Title: .user-items-list-simple h2.list-item-content__title Description: .user-items-list-simple list-item-content__description OR .user-items-list-simple p List Slideshow
List Slideshow: .user-items-list-banner-slideshow Image: .user-items-list-banner-slideshow img First Item: .user-items-list-banner-slideshow li:nth-child(1) Second Item: .user-items-list-banner-slideshow li:nth-child(2) List Content: .user-items-list-banner-slideshow .slide-content Title: .user-items-list-banner-slideshow h2.list-item-content__title Description: .user-items-list-banner-slideshow list-item-content__description OR .user-items-list-banner-slideshow p Arrow Circles: .user-items-list-banner-slideshow .user-items-list-banner-slideshow__arrow-button Arrow Icons: .user-items-list-banner-slideshow .user-items-list-banner-slideshow__arrow-button svg Button: .user-items-list-banner-slideshow .list-item-content__button List Carousel
List Carousel: .user-items-list-carousel__slides Image: .user-items-list-carousel__slides img First Item: .user-items-list-carousel__slides li:nth-child(1) Second Item: .user-items-list-carousel__slides li:nth-child(2) List Content: .user-items-list-carousel__slides .list-item-content Title: .user-items-list-carousel__slides h2.list-item-content__title Description: .user-items-list-carousel__slides list-item-content__description OR .user-items-list-carousel__slides p Arrow Circles: .user-items-list-carousel__arrow-button Arrow Icons: .user-items-list-carousel__arrow-button svg Button: .user-items-list-carousel__slides .list-item-content__button Fluid Engine
Fluid Block (text block, image...): Each block is wrapped by the same class name .fe-block and a unique id. And All .fe-blocks will be wrapped by a parent tag with a class name of .fluid-engine
Checked & Wrote by tuanphan
