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

Hide Tags - 14 Feb 2013 21:35
Image Box - 10 Jan 2013 15:15
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!

leiger 02 Aug 2011 03:12

Awesome!

---

Shane Smith ★ Wikidot Freelancer (Hire me!)
— Sites: My Website, Personal Blog
— Projects: STE Editor, Wikimated, Wikidot 101 (Video Tutorials), Wikidot SubReddit

Dominichax 25 Jan 2012 04:19

Thank you, these look nice.

Footnotes

1. For instance, .hrGradient