Marathia’s Stacks

stacks for the rest of us

stacks for the rest of us

Stacks Image 91039

FancyLine Stack

make a fancy styled horizontal line (<hr>)

The <hr> element is one of the most neglected tags in HTML. Without styling, it looks rather boring:

Besides that, cross-browser styling was problematic in Internet Explorer before version 8; and in HTML4, it had no semantical meaning: it was just an ugly horizontal line.

In HTML5, the meaning of the <hr> element changed. It now ‘represents a paragraph-level thematic break, e.g. a scene change in a story, or a transition to another topic within a section of a reference book’ (source).

Internet Explorer 7 and worse is a thing of the past for many tears, styling is also no longer a problem, so I think it is time to start using the <hr> element on a wider scale – but this time looking fancy!

Here’s where the FancyLine stack comes in. It puts a <hr> element in place, which you can style in many different ways using the border styles solid, dashed, dotted and double, but I also included a handful of ‘custom’ styles.

Use the FancyLine stack to separate content with a horizontal line that can have a styling from a subtle ‘3D’ effect:

to over-the top:

Visit the demo page for more examples.

Just drag the FancyLine stack in your Stacks page and style it. Set the height, the style and the color(s). Visit the demo page for an overview of all styles.
The spacing between the text above and below the line may or may not be defined by the theme. The option remove default spacing removes any theme defined spacing, so you can set your own using (Detailed) Margin in the Layout settings of the stack.

Need help using it on a non-stacks page? Here’s a tutorial.

Keep in mind that dotted will render differently in different browsers (fig. 1-2).

Please use this form to report all issues, questions and comments.

This stack requires RapidWeaver (version 7 or higher) and the Stacks plugin by YourHead (version 3.5 or higher).

Yes, this website uses cookies too. Here’s the annoying but obligatory cookie warning. More info…