Jump to content

tcp13

Circle Member
  • Posts

    388
  • Joined

  • Last visited

  • Days Won

    6

Posts posted by tcp13

  1. 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

  2. 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)?

  3. 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

  4. 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

  5. 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

  6. 25 minutes ago, mariyaleona said:

    The same thing is happening to me – I see my custom font on desktop but not on mobile

    Hi @mariyaleona,

    It appears you may have a similar typo in your CSS. When testing your site with multiple browsers, I see Chrome recognizes the Karin font, whereas Edge and mobile browsers do not.

    Try this instead - the filename should be wrapped in quotation marks, and it's best to specify the format too:

    @font-face {
        font-family: 'KARIN';
        src: url('https://static1.squarespace.com/static/5f7b8d3d7ffdc521ceafbda5/t/5f7b92f5cc6429688a063106/1601934070893/Karin.otf') format('opentype');
    }
    
    h1 {
        font-family: 'KARIN';
        letter-spacing: 0px;
        font-size: 45px
    }

    Hope this helps!
    -Tyler

  7. Hi @ErynnBriggs,

    The default font is showing for me (both desktop and mobile):

    image.png.f289439a2653e656c6280d08fc043815.png

    I noticed a few typos in your CSS. Try this instead:

    @font-face {
        font-family: 'white angelica';
        src: url('https://static1.squarespace.com/static/5ac7fe4cc258b4e1cd67c9c2/t/5f909f94732c6b19aa0ad4af/1603313556494/WhiteAngelica.ttf') format('truetype');
    }
    
    h1 {
        font-family: 'white angelica' !important
    }

    With this expected result:

    image.png.fb7ae71c958dfeb18cd1371c6a59bd11.png

    Hope this helps!
    -Tyler

  8. Hey @kennedyc,

    Still looking for help with this?

    It's worth noting that having multiple H1 elements isn't actually a WCAG failure, although as you've noted, it's a common accessibility practice to limit it to one per page.

    You can use the following jQuery to add ARIA attributes and redefine heading levels. This won't change the tag itself, but overrides the semantics that are presented to screen reader users. Try adding this to your header injection within Settings > Advanced > Code Injection:

    <!-- If you don't already have jQuery installed, add it here first. -->
    <script src="https://code.jquery.com/jquery-3.5.0.min.js"></script>
    
    <script>
      //This code runs when the DOM is ready.
      $(document).ready(function(){
    
        //This code adds an aria-level value to the h1 blog title.
        //The aria-level tells screen readers to treat this element like an h2.
        $(".blog-basic-grid h1.blog-title").attr("aria-level", "2");
    
      });
    </script>

     

    With this expected result:

    image.thumb.png.aa0a3457096dc277b3bb0c069bdde528.png

     

    We helped several of our UK clients become compliant before last month's legislation deadline, so feel free to DM me here or email us if you need any further assistance!

    Hope this helps!
    -Tyler

  9. Hey @glidinsk,

    Still having issues with this? We developed a way to make the native social icon blocks fully accessible using aria-labels instead of alt text. Visually impaired users who rely on a screen reader hear them announced as "twitter," "facebook," etc. instead of the default "button" - that way there's enough context to help them understand the purpose of each link.

    If you're interested in making your site fully accessible (including zero WAVE errors), I'd encourage you to check out our free accessibility audit. Our team at Square ADA specializes in making Squarespace sites ADA compliant, and we do all the heavy lifting so you don't have to worry about that "HTML literacy" you mentioned 🙂

  10. Hey @e2thex and @kika.tuff,

    Still having headaches with this? Our team offers alt text management as part of our Squarespace accessibility monitoring service. We write appropriate alt text for each image and use custom code to override Squarespace's default alt text values where needed (including null alt values for backgrounds and decorative images). We also have custom solutions to augment Squarespace templates for full WCAG 2.1 AA and ADA compliance.

    Feel free to send me a DM or check out our website (www.squareada.com) if you're interested.

    -Tyler

  11. Hi John,

    Is this the Google Lighthouse accessibility tool that you're using? It appears to be flagging the image overlay, not the image itself:

    image.png.db0be56eadd6d6eced75be14b336de3a.png

    The problem is that the anchor elements are empty. You'd have to retroactively fix this with Javascript by adding in an aria-hidden attribute or adding innerHTML content. Similarly, the mobile navigation menu button can be fixed by adding in an aria-label.

    These are the kinds of issues my team and I fix often. If you're interested in having us take a look, feel free to DM me or hit us up at squareada.com.

  12. Hey @kgrahamsb,

    Still looking for some help with this? You'll need to add in ARIA labels for the variant selector dropdown to compensate for Squarespace's missing label elements:

    image.png.eaeacefc2cc37499e202deb416935f74.png

    This is the only solution we've found to work when testing with screen readers. (Userway isn't going to help with this - their widget does absolutely nothing to modify the page's DOM structure.)  If you're interested in getting some help with this, and with identifying other accessibility issues on your site, check our our free audit linked in my signature below.

×
×
  • 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.