Fancy HR Dividers

By Timothy Foster

Description

This snippet will help you quickly generate horizontal rules that are much fancier than a single grey line. This could be used for embellishment or emphasized division.

Attributes

This CSI uses the following attributes:

Attribute	Allowed Values	Default Value	Description
type	gradient, elegant, double, topthick, bottomthick, triple, fuzzy, round, left, right, pyramids, road, diamond, threediamonds, alternate, beads, boxline	required value	Selects what kind of divider will be displayed.
color	Any text, hexadecimal, or rgb color value	#AAA	The main color of the dividers.
color2 to color7	Any text, hexadecimal, or rgb color value	varies	Defines auxiliary colors

Code

[[include :snippets:hr |type=your desired type]]

In action

Here are the various dividers used thus far. The codes are followed by their respective divider.

[[include :snippets:hr |type=gradient]]

[[include :snippets:hr |type=elegant]]

[[include :snippets:hr |type=double]]

[[include :snippets:hr |type=topthick]]

[[include :snippets:hr |type=bottomthick]]

[[include :snippets:hr |type=triple]]

[[include :snippets:hr |type=fuzzy]]

[[include :snippets:hr |type=round]]

[[include :snippets:hr |type=left]]

[[include :snippets:hr |type=right]]

[[include :snippets:hr |type=pyramids]]

[[include :snippets:hr |type=road]]

[[include :snippets:hr |type=diamond]]

[[include :snippets:hr |type=threediamonds]]

[[include :snippets:hr |type=alternate]]

[[include :snippets:hr |type=beads]]

[[include :snippets:hr |type=boxline]]

Customization

You can customize the dividers site-wide using CSS. Each divider is encased within a div with the following classes: .hrContainer and .hrType¹. Using these classes, you can add code to adjust margins or whatever else. The below code, when added to your CSS, would place margins on the left and right of the divider:

.hrContainer{    margin: 0 2em; }

Furthermore, you can change the color of all of your dividers by adding the following to your CSS:

.hrContainer .color{    border-color: COLOR !important; }

This works similarly for colors 2-7.

---

Thanks to tsangk for this great snippet: conditional-blocks

---

text above inserted with:

[[include :snippets:if START |unique=1|type=equal|var1=%%name%%|var2=conditional-blocks]]
**##red|Thanks to tsangk for this great snippet:##** [[[code:conditional-blocks]]]
[[include :snippets:if END]]

---

---

Other snippets posted by Timothy Foster

Carousel - 24 May 2015 01:18
Modal Image - 01 May 2015 17:20
Bootstrap Image Box - 19 Jul 2014 01:27
Togglecheck - 17 Dec 2013 20:27
Alternative Specific Users Only - 11 Dec 2013 18:04
Image Box - 10 Dec 2013 03:14
Toggle Tag - 19 Jul 2013 11:13
Hide Tags - 14 Feb 2013 21:35
Plurality Checker - 16 Jul 2012 03:21
Mini Chat Area - 15 May 2012 12:04
Table Alterations - 16 Feb 2012 01:45

---

Rate this solution

If you think this solution is useful — rate it up!

This is my one :-)

NotTheDoctor4180 18 Apr 2022 13:19

[[include :snippets:hr |type=topthick]]

Fieryludus 25 Jan 2012 04:19

Thank you, these look nice.

leiger 02 Aug 2011 03:12

Awesome!

---

~ Leiger - Wikidot Community Admin - Volunteer
Wikidot: Official Documentation | Wikidot Discord server | NEW: Wikiroo, backup tool (in development)

Footnotes

1. For instance, .hrGradient