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.

Demo
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.

Usage
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.

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

Support
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).

dotted-line-webkit

fig. 1: ‘dotted line’ in Webkit browsers (Safari)

dotted-line-firefox

fig. 2: ‘dotted line’ in other browsers (Firefox, Chrome, Opera, Edge,…)

Pay what you want
Buy this stack and pay for it what you think is reasonable. In the shopping cart, just change the suggested price to the amount you are willing to pay.

Of course, you are free to set the price to zero resulting in a free download but (especially when you intend to use it in a project) consider the following:
I do my best to deliver professional quality, so I spend a lot of time developing, updating and supporting these stacks.
A little income from my work will motivate me to continue and develop more useful RapidWeaver stuff.
Paying a reasonable price will make you feel better, knowing you’re supporting an indie developer.

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