By Timothy Foster 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:02em; }
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!
[[include :snippets:hr |type=topthick]]
Awesome!
~ Leiger - Wikidot Community Admin - Volunteer
Wikidot: Official Documentation | Wikidot Discord server