tcp13

@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: Hope this helps, -Tyler

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

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 😉

Hey @queerterpreter, I posted some custom code to add a skip link in a similar thread: Hope this helps! -Tyler

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. 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: That's a pretty lame solution though, so if you wanted to fix the existing icons, you could add correct aria-l

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! -Tyl

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

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 lin

Hey there @northamrealty, 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

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:sk

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

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;

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

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: 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 se

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: Hope this helps! -Tyler

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 😉 Hope this helps! -Tyler

.product-price { font-family: 'ink free' !important; }

Hi @Chloeberland, Try adding this within Design > Custom CSS: .ProductItem-gallery-current-slide-indicator{color:black!important;} With this expected result on mobile: Hope this helps! -Tyler

Wherever you added the custom code to change your font: h1 { font-family: 'ink free'; } Instead change it to this: h1 { font-family: 'ink free' !important; }

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

Hi @Print_Shop, Try adding !important to the end of your CSS lines to override the default styles: Further reading: https://stackoverflow.com/questions/9245353/what-does-important-mean-in-css Hope this helps! -Tyler

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

Hi @ErynnBriggs, The default font is showing for me (both desktop and mobile): 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: Hope this helps! -Tyler

We managed to get this working after a bit more trial and error via DM! 😀 For posterity's sake, here's the final custom code we used in case anyone else is searching for a solution in the future: <!-- CUSTOM SKIP LINK --> <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(){ //The page takes a moment to load in, so this code iterates itself 3 times. var parse = 1; var t = setInterval(function(){ if(parse >= 3){clearInterval(t);} else{

Hmmm, it seems the section ID isn't loading in fast enough. Let's try changing this line of code: //This code runs when the DOM is ready. $(document).ready(function(){ to this instead: //This code runs when the page is ready. $(window).load(function(){ If that still doesn't work, we can try adding in an additional delay to let the target section fully load in. Something like this: <!-- 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> //Thi