Custom styles, H4, H5, H6 & more for the Squarespace text editor.

Squint is a plugin for Squarespace.
It makes the default text editor more powerful.

Overview

Squint comes in two editions: Standard adds H4, H5 & H6. Advanced does that plus it can add custom styles, colors, font sizes, superscript, subscript, strike-through, underline and more. A copy of Squint is purchased for each site it's used on. Add it by either code-injection or file upload (for "Personal" plans). 

Purchase

Squint comes in two Editions: Standard and Advanced. Compare now.

Squint is no longer available for purchase.

After years of providing the opportunity of greater flexibility, creativity and accessibility, Squint’s underlying methodology no longer works, following an update by Squarespace to the text block editor.

While you’re here, check out other plugins, such as Swipeable Galleries.

Features

Squint comes in two editions: Standard & Advanced.

Standard

Squint Standard simply adds headings 4, 5 and 6 to the standard Squarespace content editor. Once added, it applies to anyone editing the website. Easy!

Advanced

Squint Advanced can add h4, h5 and h6 as well, and has some additional features (which you can choose to turn on or off). Features include:

  • Add h4, h5, and h6, to the "Format" dropdown.
  • Define custom class/style definitions that appear within a "Styles" dropdown.
  • Add underline, strike-through, subscript and superscript styles.
  • Add text-color and/or  background-color  options with an option to define color choices.
  • Add text size drop-down selection with option to define size choices (like this or this).

License

Limitations

  • Text styles for H4, H5, and H6 will not appear in the Style Editor. To define styles for these headings, you must either define them via the CSS Editor or enable developer mode and add the necessary 'Tweak' syntax to your styles.
  • In developer mode, when editing content from within the "Content" tab of a page or item, custom classes applied using the "Styles" dropdown will not be visible. When viewed within the site, however, styles will be visible as expected.

Usage

Squint can be added via Sitewide Code Injection, on Squarespace "Commerce" and "Business" plans or via file management for "Personal" plans.

  1. Your copy of Squint will be delivered to you as a text file, via email, within 48 hours of submitting your order.
     
  2. Add the code:
    • If installing via code injection:
      • Simply copy and paste the contents of squintAdvanced-min.txt into sitewide code injection, save, and refresh. You may choose to use either Footer or Header areas.
    • Or, if installing via file upload (for "Personal" plans without code injection):
      • Rename the squintAdvanced-min.txt to squintAdvanced-min.js
      • Delete the opening and closing <script> and </script> tags (the first and last lines) from the code within the file, and save.
      • Upload the file via file management.
      • Add the following code to a Markdown Block in the footer blocks of your website: <script src="/s/squintAdvanced-min.js"></script>
    • Or, if using Developer Mode, strip the unnecessary HTML from the script and include it with your scripts (always set "combo='false'" if using <squarespace:script>).
       
  3. Define your h4, h5, and h6 styles via custom CSS. It's fairly straightforward -- simply copy/paste the example below and adjust it to your liking.
    h4 {
      font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
      font-weight: 300;
      font-size: 26px;
      line-height: 1.4em;
      color: #404040;
    }
    
    h5 {
      font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
      font-weight: 300;
      font-size: 22px;
      line-height: 1.4em;
      color: #404040;
    }
    
    h6 {
      font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
      font-weight: 300;
      font-size: 19px;
      line-height: 1.4em;
      color: #404040;
    }
    
    
  4. If using Squint Advanced, you can further configure the features at the end of the script to your liking. It's easy: simply set to true (enabled) or false (disabled). Sizes, colors and classes can be edited easily as well.
Squint.init({
        // Enable additional text styles.
        underline: true,
        strikethrough: true,
        subscript: true,
        superscript: true,

        // Set available headings under "Format" dropdown.
        headings: "h1;h2;h3;h4;h5;h6",

        // Add custom class/styles via a "Style" dropdown.
        //  - Remember to define the class in your custom CSS as well.
        styles: {
            "exampleClass1": "Example Class 1",
            "customClass2": "Custom Class 2"
        },

        // Add custom sizes via a "Size" dropdown.
        //  - Set sizes as desired, semicolon-separated.
        sizes: "14px;16px;18px;20px;22px;24px;26px;28px;30px;34px;40px",

        // Add text font-color and background-color options.
        colors: {
            enableTextColor: true,
            enableBackgroundColor: true,
            colorOptions: "FFF,000,CCC,DDD,00923E,F8C100,28166F,CF5D4E,454545,CCEAEE,66AB16,66AB16,66AB16"
        }
});

Tips & Troubleshooting

  • Please use Squint responsibly: don't bother Squarespace Support with questions related to Squint.
  • If setting up custom text-/background-colors, remember to include your default/reset colors, otherwise you'll need to use the remove-all-formatting button to reset text/background colors.
  • When setting a custom style to a link, active classes won't be highlighted within the dropdown, so best to clear styles, then apply desired classes.
  • If using custom styles/classes, be sure to define the styles associated with those classes within your custom CSS.

If you have any questions, just send a message.

!Thanks for visiting our website. You're using a very old browser and it's preventing this website from displaying correctly. To view this website, please upgrade your browser.