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


Everything posted by tcp13

  1. 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
  2. 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
  3. 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
  4. 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; }
  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. 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
  6. 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
  7. 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
  8. 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
  9. 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{
  10. 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
  11. Hi @kyledavis726, If you're on a 7.1 template, a focus indicator is already built-in. If you're running version 7.0, you can add the following CSS to your site within Design > Custom CSS: :focus { outline: 3px solid #f08421 !important; outline-offset:2px !important; } With this expected result when navigating with the tab key: If you're looking for further help complying with WCAG, consider checking out our free Squarespace accessibility audit tool at squareada.com/audit. Hope this helps! -Tyler
  12. 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. -->
  13. Hey @AaronRolston, Blind and low vision people typically use a screen reader to audibly announce the contents of a webpage. As you've mentioned, heading structure is important for screen reader users, because they can quickly navigate by jumping around to different heading levels. The best practice for headings is to "nest" your content. For example, the following would be easily navigable with a screen reader using keyboard commands to "read all the H2 elements on this page" or "jump to the next H3 element." H1: Produce H2: Fruit H3: Strawberries
  14. Hey @xallarap, Changing the target of a skip link to anything other than the semantic main region is generally not advisable, but this is a great use case for customizing the skip link target for improved keyboard navigation. You can do this by adding some jQuery to the page header injection. This code starts with the known data-section-id, retrieves the dynamically-generated YUI ID, and assigns that as the skip link's new target. <!-- If you don't already have jQuery installed, add it here first. --> <script src="https://code.jquery.com/jquery-3.5.0.min.js"></scri
  15. Hey @JamesGraham303, Looks like there's a missing </script> tag in your custom code. From the main Squarespace editor, navigate to Settings > Advanced > Code Injection. Scroll down to the Footer Injection, and find a bit of code that looks like this: window.onload = showHeroText(); <!-- Start of HubSpot Embed Code --> You'll want to edit it to look like this: window.onload = showHeroText(); </script> <!-- Start of HubSpot Embed Code --> This closes out the script that makes the banner text work before moving on to start the HubSpot scrip
  16. 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
  17. Hey @SarahHayden, Still having issues with this? The menu icon is actually an anchor element, so unlike an image, you can't add alt text to it. You'll want to use Javascript to add an aria-label value. If you're interested in making your site fully accessible for people using screen readers and other assistive technologies, I'd encourage you to check out our free accessibility audit. Our team at Square ADA specializes in making Squarespace sites ADA compliant, so feel free to reach out if we can be of any help.
  18. Hi @SJSchaidt, You can use CSS to force the style (position, visibility, and opacity depending on the template) by using the :focus-within pseudo-class. This targets the folder and forces it to be visible whenever a child element is focused by the keyboard. For Brine I believe it'd be something like this: .subnav:focus-within div {opacity:1!important;} With an effect like this: Our team implements this kind of custom code all the time within our Squarespace accessibility service. We also add other keyboard accessibility features such as a skip link and re-enabled focus in
  19. 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
  20. 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: 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.
  21. 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: 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...