Jump to content

Can someone help me underline section headings with a custom squiggle line?

Recommended Posts

Does anyone know if I can change the horizontal line block to a squiggle line I've drawn, or how I can underline headings with this squiggle (this would be ideal)? & if so, how this can be done? Thanks!

Link to comment
  • Replies 1
  • Views 692
  • Created
  • Last Reply

Hello Megan,

There are a couple of ways to do this. First, you'll need to identify which "blocks" you want the squiggly line to be added to by using a block identifier extension for Chrome or Mozilla.

Then you need to prepare the image/file for the squiggly line you intend to upload. I'd recommend using an SVG format for this. It will provide high-res graphics across different sizes and hopefully minimal scaling issues. Hence the name, "Scalable Vector Graphics" format. 

Once you have the file formatted, uploaded, and heading blocks identified. Use the following code and adjust accordingly. The original code is here, so try to tweak these setting like Height, Position, Size,..etc and if you mess up, just re-paste this code with your ID and URL and try again. You'll need to apply this code for each block by swapping the Block ID for each squiggly. Applying this code without the ID means all of the H1 elements will have the squiggly underline, including your site title and such!

#YOUR_BLOCK_ID {
  h1 {
    height: 150px;
  background-image: url("https://YOUR_URL_HERE_.svg");
  background-position: 0 .99em;
  background-size: 25px;
    background-repeat: repeat-x;
  }
}

Hope this helps,

-Dan

Link to comment

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.