Jump to content

doverkohl

Circle Member
  • Posts

    18
  • Joined

  • Last visited

Reputation Activity

  1. Like
    doverkohl reacted to annie_mwm in Embedded Video Rounded Corners   
    I found this snippet code here and it works fabulous!

    https://codepen.io/Repkit/pen/PzJqZe

    Just add the HTML as an embed block where you want your video to appear:
     
    <div class="container"> <iframe class="media" width="560" height="315" src="https://www.youtube.com/embed/rk16JND1kOY" frameborder="0" allowfullscreen></iframe> </div>  
    and then this part goes in the custom CSS 

     
    #block-id-here .media{ -webkit-box-shadow: 10px 10px 61px 6px rgba(0,0,0,0.75); -moz-box-shadow: 10px 10px 61px 6px rgba(0,0,0,0.75); box-shadow: 10px 10px 61px 6px rgba(0,0,0,0.75); } #block-id-here .container:before { content: ''; z-index: 2; position: absolute; width: 560px; height: 315px; -webkit-box-shadow: 0 0 0 7px rgba(0,0,0,0.75); -moz-box-shadow: 0 0 0 7px rgba(0,0,0,0.75); box-shadow: 0 0 0 10px rgba(0,0,0,0.75); /* box-shadow: 0px 0px 61px 6px rgba(0,0,0,0.68); */ pointer-events: none; -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px; }
    Here is the final result in a Squarespace web page:


  2. Thanks
    doverkohl reacted to tuanphan in Squarespace 7.1 - Linking navigation folder to first item in the folder   
    Add to Design > Custom CSS
    /* Hide All in Services folder */ a.header-nav-folder-title[href="/services"] + div>div:first-child { display: none; }  
  3. Thanks
    doverkohl reacted to lahero in Squarespace 7.1 - Linking navigation folder to first item in the folder   
    @snorkelcookislands - just do the following steps (the script is taken from @RyanDejaegher).
     
    Get the slug you assigned to your folder (e.g. "/folder") Add the following script to how @RyanDejaegher mentioned: Settings -> Advanced -> Code Injection -> Footer <script> (function() {window.addEventListener("load", function () { var tours = document.querySelector('[href="FOLDER SLUG COPIED FROM STEP 1"]'); tours.addEventListener("click", function () { window.location = "PAGE SLUG OR FULL URL"; }); })} )(); </script>    3. Replace "FOLDER SLUG COPIED FROM STEP 1" with your slug copied from step 1 🙂 Make sure you leave the double quotes there.
       4. Replace "PAGE SLUG OR FULL URL" with whatever page slug you want! Make sure you leave the double quotes there.
     
    This solution worked for me! Thanks @RyanDejaegher for the inspiration.
  4. Like
    doverkohl reacted to dp1 in Add video to promotional popup   
    Site URL: http://www.bostoncreativeheadshots.com
    I would like add a welcome video to my promotional popup. Is that possible?
    Thanks,
    Darren
  5. Like
    doverkohl reacted to tuanphan in 7.1 Background image size and background colour sizing   
    Add to Home > Design > Custom CSS
    @media screen and (max-width:767px) { .homepage #page section:first-child { min-height: unset; height: 50vh; } }  
  6. Thanks
    doverkohl reacted to tuanphan in Lock Screen Styles   
    Add to Settings > Advanced > Code Injection > Lock Screen
    <style> .sqs-slice-group.group-copy * { color: white !important; } </style>  
  7. Like
    doverkohl reacted to thephilberg in Change Field Error Wording   
    Is there a way that you can change the wording of the error language for a form? When you don't fill out a required section and hit submit, that dialogue that comes up when it says error.
    Is there custom code to change that wording?

  8. Like
    doverkohl reacted to tuanphan in How to change field descriptors on forms - 7.1   
    Add to Page Settings > Advanced > Header
    <style> /* First name */ .field.first-name span.caption-text { visibility: hidden; } .field.first-name span.caption-text:before { visibility: visible; content: "New first"; } /* last name */ .field.last-name span.caption-text { visibility: hidden; } .field.last-name span.caption-text:before { visibility: visible; content: "new last name"; } </style>  
  9. Thanks
  10. Thanks
    doverkohl reacted to tuanphan in Make Lock Screen Logo Bigger on 7.1   
    Remove your code & use this new code to increase size
    <style> .sqs-slice-image img, .sqs-slide-wrapper[data-slide-type="lock-screen"] [data-compound-type="logo"][data-slice-type="image"] { max-height: 300px !important; } </style>  
  11. Thanks
    doverkohl reacted to tuanphan in How do I hide navigation the menu icon on mobile devices?   
    If you use SS 7.1. add this to Design > Custom CSS
    @media screen and (max-width:767px) { .header-display-desktop { display: flex !important; } .header-display-mobile { display: none !important; } .header-burger { display: none; } .header-title-nav-wrapper { flex: 1 0 100% !important; } .header-nav { display: flex !important; width: 70% !important; flex: 1 1 70% !important; } .header-title { flex: 1 0 30% !important; } }  
  12. Thanks
    doverkohl reacted to tuanphan in Disable event item pages   
    Difficult to help without checking site url.
    To disable event title links, add to Home > Design > Custom CSS
    h1.eventlist-title { pointer-events: none; }  
  13. Like
    doverkohl reacted to Yari in Automatically display text when summary block is empty   
    Hi! I'm wondering if this solve works with either version of Squarespace. Tried it on 7.1 and having no luck (with either the Ajax and non-Ajax code). Still tinkering but thought I'd ask in the meantime.
  14. Like
    doverkohl reacted to Yasheng in Automatically display text when summary block is empty   
    It also doesn't work for my 7.1 site. 
  15. Like
    doverkohl reacted to AtomicTangerine in Change header background color   
    Hey @tuanphan I actually figured it out. This is what worked for me:
    <style>
    .header-announcement-bar-wrapper {
      background-color: transparent !important
      }
    .header-announcement-bar-wrapper.shrink {
        background-color: #533181!important;
      }
    </style>
  16. Like
    doverkohl reacted to tuanphan in Dropdown Menu colour Squarespace 7.1   
    @StephenWise1999 Add to Home > Design > Custom CSS
    /* Change dropdown menu background */ .header-nav-folder-content { background: #febf00 !important; }
  17. Like
    doverkohl reacted to MrBerlin in Dropdown Menu colour Squarespace 7.1   
    and solved 😂
     
    .header-nav .header-nav-item--folder .header-nav-folder-content {
        width: 300px;
    }
  18. Like
    doverkohl 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
  19. Like
    doverkohl reacted to NewGlue in Before-After Slider Code HTML/CSS/JS   
    Does this apply to squarespace 7.1 aswell?
  20. Like
    doverkohl reacted to paul2009 in How do I remove previous / next links in the new Squarespace 7.1 blog posts?   
    It should be possible to remove the pagination by adding this to Custom CSS:
    section.item-pagination.item-pagination--prev-next {   display: none; } If you find that it doesn't, please provide a working link to the page on your site.
×
×
  • 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.