Xidipity Emblem Rule Tutorial

There are times when implementing the horizontal rule does not produce the desired look. The Xidipity emblem rule solves this problem by embellishing the horizontal rule with icons and/or titles. The design permits changes to the line width, style, and color and titles and icons may be centered, left or right justified.

The emblem rule is a Xidipity enhancement of the horizontal rule which permits the addition of icons and/or text. This post is not an exhaustive list of the options available but should certainly open the door to the possibilities. I should also note a standard and wide emblem rule is included in the horizontal rule toolbar button. This rule is a single line and includes a unicode symbol which represents an object, function, or process in the middle. This symbol can be replaced with another unicode symbol and styled as desired (see Horizontal Rule Toolbar).

 

Reference Information

 

My intent for using Font Awesome icons in some examples and Google Icons in others is to demonstrate either icon set works. If you are unfamiliar with font awesome, I suggest reviewing the font awesome tutorial. In addition, I will be using and referring to the sandbox editor when making changes to the templates.

 

Use Case

Standard Rule – 80% Width – Icon Center

 



 

Template

½×

GitHub Gist

erule010800102.html

 

Design Notes

This is a single line rule presented in the standard grey hue which spans 80% of the available space. A font awesome icon is placed in the center. The wrapper div determines the overall width of the rule. The other widths determine with dimensions of the lines and the space allocated to the icon. These numbers can be adjusted but the sum of the values should be 100.

 

Use Case

Standard Rule – 25% Width – Icon Center

 



 

Template

½×

GitHub Gist

erule010250102.html

 

Design Notes

This rule mimics the 80% rule with the overall width is set to 25%, the line widths are set to 35%, and the icon width is set to 30%.

 

Use Case

Color Gradient Rule – 80% Width – Icon Centered

 


local_florist

 

Template

½×

GitHub Gist

erule03c0800102.html

 

Design Notes

This design is a modified 80% single line rule with a material design icon placed in the center. Notice on line 3 and 5 the use of a gradient rule modified with a new style. I suggest using an online gradient tool to create the new background colors. As this template has a lot going on you may want to consider using the sandbox editor as an interim step.

 

Use Case

Thick Line Rule – 100% Width – Icon Centered

 


departure_board

 

Template

½×

GitHub Gist

erule02c1000102.html

 

Design Notes

This is a twist on the double line rule presented with a background color between the bars which spans 100% of the available space with an icon placed in the center. I will point out the wrapper is missing a style (see line 2) which limits the size of the rule (the default is 100%). As with the template above, you may want to consider using the sandbox editor.

 

There are many other possibilities with this template. For example the border color on lines 3 & 5 could be different than the background color. The size of the icon may be modified by adding a “font-size” statement to the icon style on line 4.

 

Use Case

Text & Icon Rule – Single Line – Color Icon & Color  Title Centered 

 


Weather Events

 

Template

½×

GitHub Gist

erule011000302.html

 

Text & Icon Rule – Single Line – Color Icon & Color Title Left 

 

Weather Events

 

Template

½×

GitHub Gist

erule011000301.html

 
Text & Icon Rule – Single Line – Color Icon & Color Title Right

 

Weather Events

 

Template

½×

GitHub Gist

erule011000303.html

 

Design Notes

This design will also work at the 80% width but the percentages may need to be tweaked. Although the template sets the icon and title area to 25%, this number may need adjustment in the event the title becomes longer or shorter. Be mindful the sum of the line and icon percentages should equal 100% in the final product.

 


installation


 

The installation instructions apply to all of the emblem rule templates. As suggested above, an optional interim step is to configure your emblem rule in the sandbox editor and then copy and paste the completed product to the embed tool. This is optional but I will write the instructions assuming the sandbox editor is used.

 

In the circumstance where a gradient is going to be applied, as stated above, I suggest using an online gradient tool to build the gradient and then paste the css output to the template. If the css has multiple lines, I suggest concatenating the lines.

 

As a reminder, the ICON TAG is the “<i></i>” tags which contains the icon.

 

For example:

Font awesome ​ = “<i class=”fab fa-accessible-icon”></i>

Google accessible_forward = “<i class=”material-icons”>accessible_forward</i>

 

 Steps

  1. Highlight & copy the template to the clipboard
  2. Paste clipboard into the sandbox editor
  3. Replace “#YOUR-COLOR” with the icon or background color
  4. Replace any “BACKGROUND-GRADIENT” with your css gradient code
  5. Replace “ICON-TAG” with your icon tag
  6. Click on the line where rule will be placed
  7. Click the ( save_alt ) embed button
  8. Paste clipboard into textbox
  9. Click the “OK” button

 

If you are puzzled by the design, this design works well on all media types including print.

 

 

Leave a Reply

Your email address will not be published. Required fields are marked *