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


tcp13 last won the day on August 10 2020

tcp13 had the most liked content!

1 Follower

About tcp13

  • Rank
    Circle Leader

Personal Information

Recent Profile Visitors

859 profile views
  1. Sure thing @JSM - can you post a link to your site (and a page password if it's private)?
  2. 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
  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: Hope this helps! -Tyler
  4. 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
  5. 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
  6. 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; }
  7. 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
  8. 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
  9. 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
  10. 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
  11. 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{
  12. 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
  13. 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
  14. 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. -->
  • Create New...