Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search


Circle Member
  • Content Count

  • Joined

  • Last visited

  • Days Won


Reputation Activity

  1. Like
    AlexSantos got a reaction from christyprice in Nav Menu logo color change   
    <!-- invert your logo, paste this in, page settings, advanced section on a per page basis --> <style> .header-title img {     -webkit-filter: invert(100%);     filter: invert(100%);   filter:progid:DXImageTransform.Microsoft.BasicImage(invert='1');   } </style>
    Christy, thank you for the inspiration, works great in v7.1 (on any 7.1 template of course)
  2. Like
    AlexSantos 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 Header
    Header: header#header Sticky Header: header.shrink Header (not include sticky header): header#header:not(.shrink) 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 Dropdown: .header-nav-folder-content Navigation Dropdown Items: .header-nav-folder-item a Mobile Navigation Items: .header-menu-nav-item a Mobile Menu Icon: .header-burger Mobile Burger 3 lines: .burger-inner>div Mobile Menu X icon: .burger–active Header Social Icons: .header-actions .icon Cart Icon: header#header span.Cart-inner Cart quantity: header#header .icon-cart-quantity 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 Title: .cart-title Item: .CartTable-itemLabel-3zzV1 QTY. .CartTable-itemLabel-3zzV1 span Price Name: .CartTable-itemPrice-XgjsO span X icon: .item-remove div Product Thumbnail: .item-image Product Name: .CartTableRow-itemTitle-1MDgZ a Quantity input: .CartTableRow-itemQuantity-LwuRx.item-quantity Price: .CartTableRow-itemPrice-26eXS.item-price Subtotal: .CartTable-subtotal-2nJjm Subtotal Price: span.CartTable-subtotalPrice-2JFeD Checkout: .CartFooter-checkout-28MW2.checkout Checkout Text: .CartFooter-checkout-28MW2.checkout span Variant Text: .CartTableRow-variant-1ihcF.variant Blog List
    Blog List: .collection-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: .collection-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 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 Checked & Wrote by tuanphan
  3. Like
    AlexSantos reacted to rwp in Stop Mobile Fallback Image From Showing on Desktop   
    Try putting the jQuery code above the code in the header injection block.
  4. Like
    AlexSantos reacted to rwp in Stop Mobile Fallback Image From Showing on Desktop   
    jQuery url is incorrect.  Needs to be https://
    Use the link in my signature to generate a new script block and replace.
  5. Like
    AlexSantos reacted to rwp in Stop Mobile Fallback Image From Showing on Desktop   
    Your script tag is incorrect for the jquery file.
    You also need to replace blank.gif with a url to a blank image.

  6. Like
    AlexSantos got a reaction from rwp in 7.1 Anchor Links - FREE!!!!   
    Sent a PM, sounds exciting !
  7. Like
    AlexSantos reacted to ulf.kollross in Adding anchor links in 7.1   
    Another way to set anchor links:
    Set a code block above the point on the site you want to jump at (e.g. above a Headline, …). Fill the code block with an empty div: <div id="your-anchor-name"></div> Then set the link to jump to the anchor like this: /pagename/#your-anchor-link Hope that helps
  8. Thanks
    AlexSantos reacted to tuanphan in Multilingual site on Squarspace version 7.1   
    Try these guides
  9. Like
    AlexSantos got a reaction from HenryWilliams in Underline all body links   
    You can isolate code to a single page's header by clicking on the cog wheel next to the page. This will trigger a window to open where you should click advanced and finally you can add code to just that page.
    Step 1

    Step 2 (Enter your code into the page header injection)

    Hope this helps.
  10. Like
    AlexSantos got a reaction from BarbaraD in Should I use 7.1 or Brine?   
    Hello Kerstin, I am as delighted as you are. So far I haven't seen anything that I don't like. It's easier to use with a very simple yet interesting user interface and this version is really built for ease of use. I think clients will be able to cope easier with 7.1.
    Squarespace made the bold and wise decision to pin all their templates to a single code base, a brilliant strategy. Metaphorically, it's like one single operating system with each template behaving like an app. This can help development focus on stamping out bugs, adding features and integrations at a much faster pace, thereby expanding the scope of the platform. It may even give them an opportunity to contemplate specific technology packages — layered parallax scrolling, animations and other considerations such as how to deliver a proper SVG import mechanism and maybe even a proper method to create recurring calendar events.
    I look forward to this new version with a keen eye.
    v7.0 templates are still available at the end of the templates page you mentioned.
    Thanks for providing your perspective.
  11. Like
    AlexSantos reacted to tuanphan in Underline all body links   
    Add to after the above code in Custom CSS
    body#collection-5b8c2f426d2a7323d92e2f47 .entry-title a { border: none !important; }  
    Can you share link to img?
  12. Like
    AlexSantos reacted to tuanphan in Underline all body links   
    Add to Home > Design > Custom CSS
    section#container a { border-bottom: 1px solid #817e7f !important; }  
  13. Like
    AlexSantos got a reaction from tuanphan in Red dot badge icon Indicator on menu   
    I found this ewebdesign article, it is not Squarespace specific but it outlines the process. If you have some coding knowledge this might be the ticket. 
  14. Like
    AlexSantos got a reaction from tuanphan in Image into text box?   
    Here is a code pen that use the <strong> tag as a trigger to place an stroked underline that looks like a brush stroke. So instead of a class it affects the text where the <strong> tag lives in the html.
    The only thing I don't like is that the SVG gets masked (cut off). A solution to stretch it might be more desirable if it doesn't stretch it too far. For long underlines or strokes you may want to rely on a secondary image. This is why I prefer creating a class but it's yet one more method.

  15. Thanks
    AlexSantos got a reaction from tuanphan in Image into text box?   
    Hi Cassie, what a brilliant idea. I love the graphics, colors and text, your mockup looks wonderful.
    Rather than provide a long answer, I skimmed through this article on A List Apart and it looks promising indeed. It involves using some stying, perhaps, underlines, italic and bold to target words in a paragraph, stripping that style from being displayed and then respond to the areas of the text that are styled (but not visibly so) with your graphics.
    Here is another resource on Andy Hooke's page.
    After reading part of this thirty-eight visuals article I imagine that you could take some of Andy's approach and create three or four classes, one for each PNG and add 4 of these, one per stroke type to the global CSS.
    First you need to upload the images, PNG or otherwise to your site, find their respective URLs and then …
    In a code block you might add something like
    <h1><span class="purple_underline">kids</span>express their emotions.</h1> and for the classes to trigger the image load you could add this CSS to the same code block or insert the CSS in Design>Custom CSS if you intend to use it in several places across the site.
    .blue_underline { background: url(your image URL); background-repeat: no-repeat; background-size: 100% 95%; padding: 8px 0; } .circle { background: url(your image URL); background-repeat: no-repeat; background-size: 100% 95%; padding: 8px 0; } .purple_underline { background: url(your image URL); background-repeat: no-repeat; background-size: 100% 95%; padding: 8px 0; } I think this will get you going. I've never done this before nor have I tested it but I believe that conceptually I am not far off. If you are truly stuck I can test it out.
  • Create New...