Jump to content

SodaCreekDigital

Circle Member
  • Posts

    70
  • Joined

  • Last visited

Reputation Activity

  1. Like
    SodaCreekDigital reacted to Ziggy in move logo to the right side of page   
    Can you share your website URL?
    If you set the logo to be on the left and the navigation on the right, then add this code (which swaps the order of the elements) to Custom CSS:
    .header-title-nav-wrapper { flex-direction: row-reverse; } .header-layout-nav-right .header-nav { text-align: left; padding-left: 0vw; padding-right: 2wv; }
  2. Like
    SodaCreekDigital reacted to Beyondspace in Title/description not showing up on mobile lightbox view for grid gallery   
    try this css
    @media only screen and (max-width: 640px) { .yui3-lightbox2 .sqs-lightbox-meta { opacity: 1; background: #00000033; bottom: 0 !important; } }
  3. Like
    SodaCreekDigital reacted to tuanphan in Anchor Link to List Section (People Block was Used as Basis)   
    Edit text >> Add this anchor url for Private Chefs
    #63d8e1a2dbc47b7eba8827f4 Do similar for Foodies Activities
    #63d8e4f6e43e0862a504d18f and similar for Experiences
    #63d8e5ea059ccd0fb256b411  
  4. Like
    SodaCreekDigital reacted to tuanphan in Custom font to list carousel section (new)   
    Your font code is invalid. Use this new code
    @font-face { font-family: 'BonVivant'; src: url('https://static1.squarespace.com/static/5f0da22686be2a6c0047f7a8/t/6099912f84f7763ccc204f42/1620676911823/Nicky-Laatz---Bon-Vivant-Serif-Bold.woff2'); } h2.list-item-content__title { font-family: 'BonVivant' !important; }  
  5. Like
    SodaCreekDigital reacted to tuanphan in How do I stop the gallery slideshow from cropping the images & just scale down instead?   
    Add to Home > Design > Custom CSS
    @media screen and (max-width:767px) { .gallery-fullscreen-slideshow[data-width="full-bleed"] { height: 15vh !important; } }  
  6. Like
  7. Like
    SodaCreekDigital reacted to paul2009 in Indexed though blocked by robots.txt   
    This is completely normal, and you can ignore the message. Your site has been indexed by Google.
    Squarespace use a robots.txt file to ask Google not to crawl certain pages because they’re for internal use only or display duplicate content. For example, you would not want them to index the /config/ url that you use to administer your website.
    For more detailed information see Understanding Google SEO emails and console errors.
  8. Like
    SodaCreekDigital reacted to tuanphan in Google Translate script works in 7.0 but not 7.1   
    Hi. The code worked, however header overlaps Google Translate button.
    Don't remove above code & add this to Design > Custom CSS
    header#header:not(.shrink) { top: 41px; }  
  9. Like
    SodaCreekDigital reacted to tuanphan in Custom font on form checkbox   
    Add to Design > Custom CSS
    /* I understand */ .option * { font-family: 'MargoSerif-Regular'; } /* select */ .form-item.select * { font-family: 'MargoSerif-Regular'; }  
  10. Like
    SodaCreekDigital reacted to tuanphan in Custom font for 'image card' title and subtitle   
    .image-title-wrapper * { font-family: tuanphan !important; } .image-subtitle-wrapper * { font-family: tuanphan !important; }  
  11. Like
    SodaCreekDigital reacted to hellothisisjeff in Preventing Navigation Items from Stacking   
    I was having this same issue on a 7.1 site with a centered nav. I wrote this CSS and dropped it into the Custom CSS section which seems to solve the issue.
    // Header Nav Width Adjustment .header-layout-branding-center-nav-center .header-title-nav-wrapper { flex: 2 0 100%; } .header-layout-branding-center-nav-center .header-actions--right { position: relative; right: 4vw; } The first value in the flex property basically tells the div holding the nav to grow to fill the space. However, this seemed to push the right side action buttons (cart icon, in my case) off the screen a bit, so I added the next line of code to move it back into place.
    A little bit of a hack job, but gets the job done.
  12. Like
    SodaCreekDigital reacted to tuanphan in Decreasing Section Padding Squarespace 7.1   
    Try this
    [data-section-id="5e8f4059a780b645bb8468ac"] { min-height: 10vh !important; } [data-section-id="5e8f4059a780b645bb8468ac"] .content-wrapper { padding-top: 2px !important; padding-bottom: 2px !important; }  
  13. Like
    SodaCreekDigital reacted to tuanphan in How do I put 1px border between the header and footer and main body container in 7.1   
    Add to Home > Design > Custom CSS
    /* Add a line to bottom of header */ header#header { border-bottom: 1px solid green; } /* Add a line to top of footer */ footer#footer-sections { border-top: 1px solid green; }  
  14. Like
    SodaCreekDigital reacted to vireshwara in Move Price down on Product Page   
    I got it from someone on fiverr in case anyone else wants to do it, here's the code:
    section.ProductItem-details .ProductItem-details-checkout { 
    display: flex; 
    flex-flow: column; 


    .ProductItem-details .ProductItem-details-excerpt { 
    order: 1 !important; 


    .ProductItem-details .product-variants { 
    order: 2 !important; 


    .ProductItem .ProductItem-details .product-quantity-input { 
    order: 3 !important; 


    .ProductItem-details .ProductItem-product-price { 
    order: 4 !important; 


    .ProductItem-details .sqs-add-to-cart-button-wrapper { 
    order: 5 !important; 


    .ProductItem .ProductItem-additional { 
    order: 6 !important; 
    }
  15. Like
    SodaCreekDigital reacted to aserrao in How can I remove the site title on my homepage?   
    @bmackey, in Pacific, if you're using your Site Title, you can use this in your Custom CSS:
    .homepage #siteTitle {display: none;}
    If you're using a logo, use this;
    .homepage #logoImage {display: none;}
  16. Like
    SodaCreekDigital reacted to tuanphan in BRINE: Add line of text before all Blog posts for disclosure   
    Add to Home > Design  > Custom CSS
    .collection-type-blog.view-item .BlogItem-share:before { content: "tuan phan squarespace freelancer"; display: block; text-align: center; font-size: 16px; margin-bottom: 10px; }  
  17. Like
    SodaCreekDigital reacted to lu.diehl in Change size of specific image when viewing on mobile   
    Hi @doshea Find the unique ID of the image, change "#block-unique-ID" to your image ID and apply the code below:
    /* mobile screens */ @media only screen and (max-width: 640px) { #block-unique-ID{ width: 50%; } } /* tablet screens */ @media only screen and (max-width: 768px) { #block-unique-ID{ width: 100%; } } Let me know if it works 😉 If you need further help, please share a link to your website and pwd if needed.
  18. Like
    SodaCreekDigital reacted to tuanphan in Custom Newsletter Block w/ only First Name & Email   
    Add to Code Injection Footer
    <script> window.Squarespace.onInitialize(Y, function(){ sfSeconds = document.querySelector('.last-name input'); sfSeconds.value = "NA"; sfSecondsField = document.querySelector('.last-name'); sfSecondsField.style.display = "none"; }); </script> code by @paul2009, edited some lines by me.
     
  19. Like
    SodaCreekDigital reacted to tuanphan in [Free template] Pricing Table   
    Some free code to create Pricing Table.
    Table 01.

    1. Add 2 Markdown Blocks with syntax
    #### Standard $19 Per Month * Free custom domain * SS Security * Unlimited Storage * SEO Features * Premium Templates * Contributors * Premium Extensions [Sign Up][1] [1]: https://beaverhero.com 2. Add Code Block & Insert this code
    <style> .markdown-block { background: #F2F5F7; margin-left: 17px; margin-right: 17px; transition: all 0.25s; } .markdown-block:hover { transform: scale(1.04); } /* title */ .markdown-block h4 { font-family: monospace; margin-bottom: 5px; padding-top: 20px; } /* price */ .markdown-block p:nth-child(-n+4) { font-family: monospace; } .markdown-block h4+p { font-size: 2em; } /* list */ .markdown-block ul { list-style: none; padding-left: 0; margin-bottom: 0; } .markdown-block ul li { color: #626262; padding: 5px; } /* Line between price - list */ .markdown-block ul li:first-child:before, .markdown-block ul li:last-child:after { content: ""; background: rgba(255,255,255,0.75); height: 1px; width: 50%; display: block; margin: 0 auto; margin-bottom: 20px; } .markdown-block ul li:last-child:after { margin-top: 20px; margin-bottom: 0; } /* buttons */ .markdown-block p:last-child { padding: 20px; } .markdown-block a { background: #0091CE; color: #fff; border-radius: 3px; padding: 10px 30px; display: inline-block; } /* Center all text */ .markdown-block * { text-align: center; } /* remove text padding */ .markdown-block p { margin-top: 0; margin-bottom: 0; } </style> Table 02.

    1. Add 2 Markdown Blocks with syntax
    #### Standard $19 Per Month * Free custom domain * SS Security * Unlimited Storage * SEO Features * Premium Templates * Contributors * Premium Extensions [Sign Up][1] [1]: https://beaverhero.com 2. Add Code Block & Insert code
    <style> /* title */ .markdown-block h4 { background: #0098D9; color: #fff; padding-bottom: 5px; font-family: monospace; margin-bottom: 0; } /* price */ .markdown-block p:nth-child(-n+3) { background: #00A8EE; color: white; font-family: monospace; } .markdown-block h4+p { font-size: 2em; } /* list */ .markdown-block ul { list-style: none; padding-left: 0; background: #354153; margin-top: 0; margin-bottom: 0; border-top: 1px solid #293341; color: #A0ABBF; } .markdown-block ul li { border-bottom: 1px solid #293341; border-top: 1px solid #424F64; padding: 5px; } /* buttons */ .markdown-block p:last-child { background: #354153; border-top: 1px solid #424F64; padding: 20px; } .markdown-block a { background: #0091CE; color: #fff; border-radius: 3px; padding: 10px 30px; display: inline-block; } /* buttons hover */ .markdown-block a:hover { background: #0082B9; } /* Center all text */ .markdown-block * { text-align: center; } /* remove text padding */ .markdown-block p { margin-top: 0; margin-bottom: 0; } </style> Code by Tuan.
    Table style from Codecanyon
    Will update many other tables soon.
  20. Like
    SodaCreekDigital reacted to tuanphan in Add multiple buttons to header nav in Squarespace 7.1   
    Add to Home > Design > Custom CSS
    .header-nav-item [href*="/login"] { color: #6a92d2 !important; border-color: #6a92d2 !important; background: transparent; border-width: 2px; border-style: solid; -webkit-transition: 0.1s background-color linear, 0.1s color linear; -moz-transition: 0.1s background-color linear, 0.1s color linear; -o-transition: 0.1s background-color linear, 0.1s color linear; transition: 0.1s background-color linear, 0.1s color linear; font-family: Montserrat; font-weight: 700; font-style: normal; letter-spacing: .02em; text-transform: uppercase; line-height: 1.2em; padding: .86em 1.6032em !important; } nav.header-nav-list { align-items: center; }  
  21. Like
    SodaCreekDigital reacted to Trey_SQSP in How can I hide the 'Quantity Select' field on a product page?   
    It looks like the answer offered hides the Add to Cart, and the Price as well. If you only want to hide the Quantity input field but keep all the rest, you can add this to the custom CSS editor:
    .product-quantity-input { display:none !important; }
    This will affect products site wide, so if you need this for only a specific product page, you can add this in style tags via the page header code injection:
    <style> .product-quantity-input { display:none !important; } </style>
  22. Like
    SodaCreekDigital reacted to paul2009 in -Adjusting position of homepage image   
    I didn't notice the solid header 🙂
    The section background (banner image) normally sits behind the header, but when the header is solid instead of transparent, it obscures some of the image. You should be able to lower the image using some CSS, but note that the header height changes with the screen width, so you may need to compromise on the exact position. For example (add to Design > Custom CSS):
    .homepage .section-background:first-of-type { top: 110px } .homepage .header { min-height: 110px!important; background: #000; } Notes:
    The code shifts down the background image in the first section. Ths code is specifically aimed at the homepage only. The code assumes a black (#000) header. It shifts the image down by 110 pixels. This is only for Squarespace 7.1 templates.
  23. Like
    SodaCreekDigital reacted to tuanphan in .sqs-announcement-bar-text, can't increase my announcement bar's font size on mobile   
    @media screen and (max-width:640px) { .sqs-announcement-bar-dropzone p { font-size: 8px; } }  
  24. Thanks
    SodaCreekDigital reacted to tuanphan in Adding custom fonts to the Promotional Popup   
    For future members
    add this code to Home > Design > Custom CSS. Replace Tuan with your font name
    .sqs-popup-overlay * { font-family: Tuan !important; }  
  25. Like
    SodaCreekDigital 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
×
×
  • 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.