-
Content Count
323 -
Joined
-
Last visited
-
Days Won
5
Everything posted by 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
-
Skip Link in Header for Web Content Accessibility Guidelines
tcp13 replied to kyledavis726's question in Coding and Customization
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
-
Google Lighthouse suggestions; what level of credence do you give them?
tcp13 replied to GreggP's topic in SEO and Marketing
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
-
Slideshow image captions font size is too small
tcp13 replied to StarBytes's topic in Images and Videos
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
-
Skip Link in Header for Web Content Accessibility Guidelines
tcp13 replied to kyledavis726's question in Coding and Customization
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 -
Skip Link in Header for Web Content Accessibility Guidelines
tcp13 replied to kyledavis726's question in Coding and Customization
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)?
-
Make Brine Folder Navigation Keyboard Accessible
tcp13 replied to SJSchaidt's question in Coding and Customization
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- 5 replies
-
- accessibility
- brine-template
-
(and 1 more)
Tagged with:
-
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
-
Mojave Change Overlay Text Color on One Page
tcp13 replied to Twil's question in Coding and Customization
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- 2 replies
-
- mojave-template
- overlay
-
(and 1 more)
Tagged with:
-
Can't get the individual products to change to custom font
tcp13 replied to Print_Shop's question in Coding and Customization
.product-price { font-family: 'ink free' !important; } -
Changing the colour of number of pictures in a product carousel
tcp13 replied to Chloeberland's question in Coding and Customization
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 -
Can't get the individual products to change to custom font
tcp13 replied to Print_Shop's question in Coding and Customization
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
-
Can't get the individual products to change to custom font
tcp13 replied to Print_Shop's question in Coding and Customization
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 -
custom css h1 font not appearing on mobile?
tcp13 replied to ErynnBriggs's question in Coding and Customization
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 replies
-
- custom-css
- css
-
(and 1 more)
Tagged with:
-
custom css h1 font not appearing on mobile?
tcp13 replied to ErynnBriggs's question in Coding and Customization
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- 8 replies
-
- custom-css
- css
-
(and 1 more)
Tagged with:
-
Changing skip link destination for keyboard accessibility?
tcp13 replied to xallarap's question in Coding and Customization
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{ -
Changing skip link destination for keyboard accessibility?
tcp13 replied to xallarap's question in Coding and Customization
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