Squiggler stack settings

Avatar

By Stuart Marshall

updated 7 months ago

Squiggler offers 2 distinct modes of operation, 'Divider' and 'Underliner'.  Divider mode can be used to seperate blocks of content whereas Underliner mode is used to add a squiggle under some text.  

Squiggler - Styling  

The styling options are available for both use cases.  

Colour

The colour of the squiggle. This can have an opacity value.  

Height:

The height of the squiggle. Default is 3px.  

Speed

You can choose from 5 different speeds. Note: The bigger the squiggler height the faster it will appear to move.  

Direction

You can set the squiggle to move to either the left or to the right.  

The following settings only apply to Divider mode, or Underliner mode when targetting Horizontal spans.  

Width

This sets the width of the divder line (in %).  

Max-width

You can also set a maximum width (in px) if you want to limit how wide a squiggle line can be. (NB: Leave at 0 for no limit!)   Alignment: If using a width of less than 100% you can align the divider line to the left, centre or right.


Squiggler - Underliner mode

Squiggler Underliner mode comes with additional settings that let you target what text you want to add the squiggle to.

Target

Specify what text you are wanting to target. This is done by specifying a particular html element. The options are:  

  • Span  
  • Italic text  
  • Bold text  
  • Horizontal rules  
  • Links  

'Span' is the most flexible option as you simply need to add span tags around whatever text you want to target. This can be done in any text/markdown stack. It would look like the following: 

<span>Here is the text where I want my squiggle!</span>

When

You can choose for the squiggle to be shown at all times or only when that text element is hovered over.  

Where

The default option is for Popper (Squiggler) to only add the squiggle to any targetted content that appears in stacks that have been dropped into that Popper stack.

It is possible though to target the whole page (however this is more advanced as will often need you to add some limits/exceptions to ensure that undesired elements are not targetted - see below).    

In both 'contained stacks' and 'page' scopes, there is the ability to fine tune what elements you want to target, to ensure that squiggles do not appear where you don't want them to. This will most often be required when (for example) targetting links as you are unlikely to want the squiggle to appear in the navigation items.   To add these controls / limits you will need to have a basic understanding of using the browser inspector to idenitify ID or class names. (The example project has some more information about this). Using the 'contained stacks' approach is much less likely to require the use of this as you can control what stacks you add into the stack  

Limit to

You can add an ID or a class to this box so that only matching elements within a container with the ID or class will be affected.  

Exceptions

You can add up to 2 exceptions and the stack requires you to state how many (if any) you are using.  

Except:

Add in the ID, class or element that you want to exclude.  Note: You need to also add the # for IDs and the . (dot) for classes - e.g. #IDName or .className.

Did this answer your question?