Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

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


Question

  • Answers 1
  • Created
  • Last Reply

Top Posters For This Question

Popular Days

Top Posters For This Question

1 answer to this question

Recommended Posts

  • 0

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

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...