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

tcp13

Circle Member
  • Content Count

    330
  • Joined

  • Last visited

  • Days Won

    5

Posts posted by tcp13

  1. 9 minutes ago, ConradH said:

    Do you know if there's a way to hide the Print button on mobile screens for multiple pages without targeting the block code for every individual button?

    @ConradH Try adding this in Design > Custom CSS:

    @media only screen and (max-width: 768px) {
      a.sqs-block-button-element[href="javascript:window.print();"]{display:none!important;}
    }

     

    With this expected result:

     image.png.3a69c7667a4dd4feb3d318e931256171.png         image.png.4dc39a8fec24e44a3326a2906c3720ef.png

     

    Hope this helps,
    -Tyler

  2. 1 hour ago, northamrealty said:

    appears to only work on the home page

    Ah, sorry about that @northamrealty! It appears your homepage has a different selector since it's an Index Page. Try modifying it one more time to target .Content-outer instead of .Index

    <!--Skip Link-->
    <script>
      $(document).ready(function(){$("body").prepend('<a href="javascript:skipTrigger();" class="skip-link" tabindex="0">Skip to Content</a>');});
      function skipTrigger(){$(".Content-outer").attr("tabindex", "-1").focus();}
    </script>

    That should work on every page within your template (include the homepage too). Feel free to DM me if you encounter any other issues.

  3. Hey there @melbeestudio and @queerterpreter,

    Skip links are built-it to the newer 7.1 templates, but you have to add them with custom code for the older 7.0 templates. I posted a few different template-specific solutions in another thread here:

    Hope this helps! Feel free to send me a DM if you need further assistance.
    -Tyler

    PS - For whatever it's worth, I've written here about why Userway is a poor approach to accessibility. Sure, it adds a skip link, but the button is super ugly and it does very little to actually improve the user experience for people with disabilities 😉

  4. Hey @GreggP,

    Lighthouse appears to be flagging the empty aria-labels on the social icons in your site footer. This has been a known issue on all Squarespace sites for quite some time.

    image.png.382bc01c6eeab6492e57c6606aa591e7.png

    For a blind person using a screen reader (software that audibly announces the contents of the page), the purpose of these linked icons would be unclear. One way to fix this would be to replace the icons with linked text, as is suggested by Squarespace's accessibility guide here:

    image.thumb.png.77dabd4badd960af7f0799cea0ed5d98.png

    That's a pretty lame solution though, so if you wanted to fix the existing icons, you could add correct aria-labels using custom code. Try adding this within Settings > Advanced > Code Injection > Footer Injection:

    <!-- jQuery -->
    <script src="https://code.jquery.com/jquery-3.5.0.min.js"></script>
    
    <!-- Add aria-label Attributes to Social Icons -->
    <script>
      $(document).ready(function() {
        $("a.linkedin-unauth").attr("aria-label", "LinkedIn");
        $("a.facebook-unauth").attr("aria-label", "Facebook");
        $("a.instagram-unauth").attr("aria-label", "Instagram");
      });
    </script>

    With this expected result:

    image.png.6fcaae254f0826d45141bba3da1a854b.png

    If you're looking for further accessibility assistance, feel free to send me a DM or check out our resources at SquareADA.com. Our custom code is often able to minimize or entirely fix the issues identified by Lighthouse and other accessibility audit tools:

    image.png.6f7bdb772ed3cffa3d44407cc4e06ab5.png

    Hope this helps!
    -Tyler

  5. Hey @CH1,

    What kind of "text to speech" program are you using? Screen readers (which visually impaired people use to announce site content), such as the widely-used JAWS, should be able to announce text without needing to use tab navigation.

    Adding a tabindex value is more applicable for buttons, links, and other interactive elements that a keyboard navigation user would use the tab key to access.

    If you're looking for additional accessibility help, feel free to send me a DM or check out the free accessibility audit tool linked in my signature below.

    Hope this helps!
    -Tyler

  6. Hey @StarBytes,

    Still having trouble with this? It's hard to guess without a link, but you may need to append !important; to your CSS rules like so:

    .gallery-item-description {
      font-size: 2rem !important;
      color: #fff !important;
    }

    And of the top of my head, it's possible you might instead need to target a descendant of the gallery description class:

    .gallery-item-description p {
      font-size: 2rem !important;
      color: #fff !important;
    }

    Hope this helps!
    -Tyler

  7. On 7/21/2020 at 11:25 AM, ch71579 said:

    By default, Squarespace uses the title of the blog post as the ALT text for the image, but this makes absolutely no sense and certainly doesn't do any good for a blind user.

    Hey @ch71579,

    Tyler here from SquareADA.com! Not sure about the SEO concerns or complex custom code mentioned in this tread, but to your original point about accessibility - the way it's setup is actually correct.

    If we dig into WCAG (that's the international standard on web accessibility), we see from Technique H30 that "When an image is the only content of a link, the text alternative for the image describes the unique function of the link."

    So in other words, for a summary block or grid of blog thumbnail images, it's more appropriate to describe the function of where that link goes (ie the name of the blog post) instead of a typical visual description of the image.

    Hope this helps!
    -Tyler

    PS - If you looking for additional assistance with WCAG and ADA compliance, check out this free accessibility audit tool.

  8. Hey there @northamrealty,

    35 minutes ago, northamrealty said:

    It's actually a different target element for your template. Use the same code as above, but swap out this section with the following:

    <!--Skip Link-->
    <script>
      $(document).ready(function(){$("body").prepend('<a href="javascript:skipTrigger();" class="skip-link" tabindex="0">Skip to Content</a>');});
      function skipTrigger(){$(".Index").attr("tabindex", "-1").focus();}
    </script>

    Hope this helps!
    -Tyler

  9. Hey there @kyledavis726 and @JTheater,

    Skip links are built-in to all of the newer Squarespace templates running version 7.1, but if you're using a older template running version 7.0, you'll have to implement one with custom code.

    In the case of the Westlake site you linked, try adding the following into Settings > Advanced > Code Injection > Header Injection:

    <!--jQuery-->
    <script src="https://code.jquery.com/jquery-3.5.0.min.js"></script>
    
    <!--Skip Link-->
    <script>
      $(document).ready(function(){$("body").prepend('<a href="javascript:skipTrigger();" class="skip-link" tabindex="0">Skip to Content</a>');});
      function skipTrigger(){$("#page").attr("tabindex", "-1").focus();}
    </script>
    
    <!--Skip Link Styles-->
    <style>
      .skip-link {position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden;}
      .skip-link:focus {left:10px;top:10px;width:auto;height:auto;overflow:visible;background-color:#0f0f0f;color:#f0f0f0;size:1em;padding-top:0.5em;padding-bottom:0.5em;padding-left:1em;padding-right:1em;z-index: 99999;}
    </style>

    With this expected result when pressing the Tab key to navigate:

    47939115_ezgif.com-gif-maker(5).gif.56fab95aa43c192d1d5322d7b1c8fe71.gif

    Hope this helps! Of course, adding a skip link is only a small component of WCAG compliance. If you're looking for a more robust accessibility solution, be sure to checkout the free audit tool linked in my forum signature, or consider working with an accessibility specialist such as myself to develop a more comprehensive strategy for your site.

    Feel free to send me a DM if you need any further assistance with the skip link!
    -Tyler

  10. You're close, @ConradH! Try targeting the img itself instead of its parent anchor element:

    /*change logo img src*/
    .header-title-logo img {
    	content: url('https://images.squarespace-cdn.com/content/v1/5fa318d8aa276a66ec5322fb/1609611984060-SAYWOSH6ATQYL3QJ5SU7/ke17ZwdGBToddI8pDm48kLkAmGt-nEc-KDyOz6MyEdx7gQa3H78H3Y0txjaiv_0fDoOvxcdMmMKkDsyUqMSsMWxHk725yiiHCCLfrh8O1z4YTzHvnKhyp6Da-NYroOW3ZGjoBKy3azqku80C789l0slJ0ZK8bhnMvwBc9-o9uiV5bJKIkPq_14eERHvCXjNC_RY8ahIp3NZpEzceY_TM9w/Logo+Grey+V+Transparent.png') !important;
    }

    If we then remove the teal background, you're left with the new grey logo (which still appears at the top of each page).

    image.thumb.png.3df4e7675335b78e6c5f1d5490e5b11a.png

    To make it appear on only the first page, add this line of CSS:

    /*logo on only first page*/
    #header,.header-inner {
      position:absolute !important;
    }

    With this expected result:

    image.thumb.png.437ae2ebc3ec2ef0c1a130e05576684e.png

    Hope this helps!
    -Tyler

  11. Hi @ConradH,

    I can't seem to find a way to reduce the page title sizing, but replacing your existing CSS with the following should keep the logo visible:

    /*PRINT FORMATTING*/
    @media print {
      /*hide excess stuff*/
      #footer, .sqs-block-button-container--left, #footer-sections {
        display: none !important;
      }
    
      /*hide nav bar*/
      .header-nav, .header-actions {
        display: none !important;
      }
    
      /*add background color to logo since transparent on white is no bueno*/
      #header, .header-inner{
        background-color:#a6bdba!important;
        -webkit-print-color-adjust: exact !important;
      }
    
      /*hide link urls*/
      a::after {
        content: "" !important;
      }
    
      /*ensure no page margin*/
      #page {
        margin: 0px !important;
      }
    }

    With this expected result:

    image.thumb.png.601a4b8074af49f0f2a6cafe93e707ae.png

    Hope this helps!
    -Tyler

  12. 4 hours ago, JSM said:

    @tcp13 thank you for that code snippet - it really helped me get a lot farther in my quest to transform the squarespace blog into printer-friendly recipes! 

    I was also looking to hide my global nav buttons, but not the logo at the top of the page (in printed form it doesn't make much sense to have those listed). So far I've only been able to keep the whoel global nav, or make the whole global nav, logo included, not display in the printed version. Any chance you can help me there? I've attached a screenshot of what appears now that I'd like to hide in case it helps!

    Sure thing @JSM - can you post a link to your site (and a page password if it's private)?

  13. Hi @northamrealty,

    It appears I posted the code for Brine with a screenshot of Bedford, so I'll assume that's an 11-month-old mistake on my part 🤦‍♂️

    For your site, try adding the following within Design > Custom CSS:

    .Header-nav-folder:focus-within {
      opacity:1!important;
      display:block!important;
      visibility:visible!important;
      left:0px!important;
    }

    With this expected result:

    ezgif.com-gif-maker.gif.e5eeebf62fdc9c2d6f762faed118755d.gif

    Hope this helps! If you're looking for a more substantial accessibility effort, checkout our free audit tool, which found 27 accessibility errors on your homepage 🙂

    Feel free to send me a message if we can help with anything else.
    -Tyler

  14. Hey @jq_,

    That appears to be the mobile header that's showing, since the print preview is below your template's mobile breakpoint. Try adding the .Mobile-bar selector into your CSS like so:

    @media print {
      .Header-inner, .Mobile-bar {
        display:none!important;
      }
    }

    With this expected result:

    image.thumb.png.3856f9fd65a4fb26bc37376f4edfe46e.png

    Hope this helps!
    -Tyler

  15. Hi @Twil,

    Are you trying to change the text color itself? It really depends on which specific page. For the Impact page you linked, it'd be something like this pasted into Design > Custom CSS:

    #block-yui_3_17_2_13_1457552603071_12467 h1 {
      color:#0f0f0f !important;
    }

    You can customize the hex color value to your liking, although I'd recommend something other than fuchsia 😉

    image.thumb.png.805cfa92fe7cecfdcb8147251f122a81.png

    Hope this helps!
    -Tyler

  16. Hi @LaurenJoy,

    Try adding this code within Design > Custom CSS:

    .products article.ProductItem{padding-bottom:0px;padding-top:50px;}
    @media only screen and (min-width: 769px) {
      .products article.ProductItem{margin-bottom:-200px;}
    }

    This should reduce the spacing for all your product pages in one go (and hopefully without affecting any other pages):

    image.thumb.png.9a5323ab45ef2b1262b81afb636a89d8.png

    Hope this helps!
    -Tyler

     

    P.S. - here's something extra if you want to remove that scrollbar on your product gallery 😉

    image.png.3bee4e6d23e2b93501da127f41af0bde.png  

    .ProductItem-gallery-thumbnails{overflow-x:auto!important;}

    image.png

  17. Hi @judith1570048218,

    You can target them individually by their additional classes.

    image.png.ced95395d4109a28a7d9a28f9c9074c8.png

    So for example, try adding this code within Design > Custom CSS:

    /*This targets any elements with BOTH the .product-mark and .sold-out classes.*/
    .product-mark.sold-out{background-color:#A40000!important;}

    With this expected result:

    image.png.e89b33a1b93bd56b5ec32dea715c8bea.png

    Presumably, there'd be a comparable class for products on sale, likely .sale or .on-sale, but I can't find anything currently on sale within your site.

    Hope this helps!
    -Tyler

  18. Hi @gmgarrison,

    You should be able to accomplish this with jQuery. Try adding the following within Settings > Advanced > Code Injection > Footer Injection:

    <!-- If you don't already have jQuery, install it here. -->
    <script src="https://code.jquery.com/jquery-3.5.0.min.js"></script>
    
    <script>
      /*This moves the final item of your primary navigation to the Header Actions parent element.*/
      $(".header-nav-list").find("a").last().prependTo(".header-actions-action");
      /*Same, but for mobile.*/ $(".header-menu-nav-folder-content").find("a").last().prependTo(".header-menu-cta");
      
      /*This changes the element's classes to match the other button.*/
      $(".header-actions-action a:first-child").addClass("btn btn--border theme-btn--primary-inverse");
      /*Same, but for mobile.*/ $(".header-menu-cta a:first-child").addClass("theme-btn--primary btn");
      
    </script>
    
    <style>
      /*This further tweaks the styles to force the buttons onto separate lines.*/
      .header-actions-action a:first-child{display:block!important; margin-bottom:10px!important;}
      
      /*This hides the original nav item.*/
      .header-nav-list div:last-child a{display:none!important;}
    </style>

    This code essentially transforms whatever the last link is in your primary navigation into an orange button. Here's the expected result on desktop:

    image.thumb.png.c41e2dae1aa7ae175536ba4c196129a3.png

    And here's the expected result on mobile:

    image.thumb.png.57913fabf10b42f6a7719f0456986773.png

    If the stacked layout is too large, you can add additional CSS to decrease the size:

    <style>
      .header-actions-action a{font-size:.7rem!important;}
      /*Same, but for mobile.*/ .header-menu-cta a{font-size:.7rem!important;}
    </style>

    Perhaps a bit overengineered, but it gets the job done 😀

    Hope this helps!
    -Tyler

  19. Hi @clary,

    Yup - you guessed it! Here's the error showing in Chrome console:

    image.thumb.png.9f9032dc4595de1a4c676fe592946e6f.png

    You should be able to simply change the http to https, since the page you're embedding appears to already support it:

    <div style="border: 0px solid #D5CC5A; overflow: hidden;">
      <iframe style="border: 0px none; margin-top: -85px; height: 985px; width: 100%;" src="https://bmpdatabase.org/tools/stats_map/v2/#/map?owner=bmpdatabase" scrolling="no">
      </iframe>
    </div>

    With this expected result:

    image.thumb.png.bff32d2186e58ac9c9e07e0cc7c55f42.png

    Hope this helps!
    -Tyler

  20. Hi @mathildeeeeee,

    You may be able to add print functionality with a standard Squarespace button by setting the clickthrough URL to javascript:window.print(); - this just uses JS to open the browser's print dialog. Ensure it's not set to open in a new window.

    image.png.2cf4c61542fb4484f8bd52993cbc8b7a.png

     

    You can also use @media print in CSS to create a printer-friendly format that works better with the built-in print dialog (Ctrl+P). Here's what worked well on my template (Tudor 7.0) - just add it within Design > Advanced > Custom CSS and tweak as needed:

    @media print {
    
      /*resize the content*/
      .blog-item-content-wrapper {
        width:100% !important;
        margin:0px !important;
        padding:0px !important;
        color: #000;
        background-color: #fff;
      }
    
      /*hide a bunch of extra stuff*/
      #blogItemSidebarContent, .blog-item-actions, #header, #footer, #comments .header-controls, #comments .new-comment-area, .sqs-announcement-bar-dropzone, .sqs-frontend-overlay-editor-widget {
        display:none !important;
      }
    
      /*format the author profile*/
      .blog-item-author-profile--sidebar {
        margin-top:500px !important;
        display:block !important;
      }
    
      /*remove weird link formatting*/
      a::after {
        content: "" !important;
      }
      
      /*reduce page spacing*/
      #page {
        margin:0px !important;
      }
    }

    Hope this helps!
    -Tyler

×
×
  • Create New...