Jump to content

kmdesign

Circle Member
  • Posts

    35
  • Joined

  • Last visited

Reputation Activity

  1. Love
    kmdesign got a reaction from IXStudio in Ninja Kit Typewriter effect   
    Works like a charm - was also able to adjust line-height!
    You are the best!  Thank you so much!! 
  2. Like
    kmdesign 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
  3. Like
    kmdesign reacted to Beyondspace in Changing paragraph style in accordion blocks.   
    Can you share your site with the protected password so we can take a look?
  4. Like
    kmdesign reacted to tuanphan in Where 'Use Existing Gallery' in 7.1?   
    SS bring back Gallery Block in 7.1
  5. Like
    kmdesign reacted to paul2009 in Apply custom CSS to scheduling block   
    I completely agree.
    I spoke to Squarespace about this last week and their response was "It's true that CSS..is currently only available on the Powerhouse plan. I'll definitely take this back to the larger product team as we work to make customization easier for everybody."
    I recommend that you also contact them by submitting a feature request for this with the Scheduling team.
  6. Like
    kmdesign reacted to DPruitt in Does Version 7.1 support a Search Bar/Icon for the site's header?   
    Anyone using Font Awesome wanting the search icon within the DIV Social Icon Wrapper of the header, here you go:

    1. First enable your social links in your header.
    2. Add a Link to the beginning of your Social Link List https://www.yourdomain.com/search
    3. Add your Font Awesome Script to your Header Injection.
    4. Include this Javascript within the Header to make the first link open in the same window:
    <script src="//ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function() { $('.header-actions-action--social a:first-child[target="_blank"]').prop("target", "_self"); $('.header-menu-actions-action--social a:first-child[target="_blank"]').prop("target", "_self"); }); </script>
    5. Add your css:
    /*Custom Search Bar*/ .header-actions--right .header-actions-action--social .icon:first-child {visibility:hidden} .header-actions--right .header-actions-action--social .icon:first-child:after { content: '\f002'; font-family: FontAwesome; position: absolute; margin-left:-1vw; margin-top: 3px; font-size: 15px; color:lightgray; visibility:visible} .sqs-svg-icon--list a:first-child {display:none} /*Mobile*/ .header-menu-actions-action.header-menu-actions-action--social:first-child {visibility:hidden} .header-menu-actions-action.header-menu-actions-action--social:first-child:after {content: '\f002'; font-family: FontAwesome; display: inline-block; position: absolute; margin-left:-15px; margin-top: -25px; font-size: 22px; color:#0db14b; visibility:visible} /*END Custom Search Bar*/ If you're wanting to have it within the navigation instead of the social links, just write your CSS accordingly and leave out the nasty javascript.
  7. Like
    kmdesign reacted to sharine in Add Category to Breadcrumbs on Product Page   
    For the product page, I am looking for this answer as well. Currently it only show Shop Page > Item, instead of Shop Page > Category > Item
  8. Like
    kmdesign reacted to tuanphan in Removing underline from navigation on 7.1   
    Add to Home > Design > Custom CSS
    .header-nav-wrapper a { background-image: none !important; }  
×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.