Horizontal lines with color, length and height options BBcode

Post Reply
Steve
Posts: 62
Joined: Sun Oct 01, 2017 3:08 pm

Horizontal lines with color, length and height options BBcode

Post by Steve » Wed Jun 20, 2018 9:44 am

Default lines are often 1 pixel high, light grey (#CCCCCC) and difficult to see. The codes below create lines of any height, color and length.
The first BBcode createws full width lines with the first number as the line height in pixels followed by the color. To specify the colors you can use the CSS color names aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, orange, purple, red, silver, teal, white, and yellow or HTML colors like #6492db and grey scale colors from #000 through #fff.



 
BBcode usage:

Code: Select all

[Line={NUMBER}]{COLOR}[/Line]
HTML replacement:

Code: Select all

<hr style="color:{COLOR}; border-color:{COLOR}; background-color:{COLOR}; height:{NUMBER}px;"></hr>
Help line:

Code: Select all

[Line=Height]COLOR[/Line]
To get the heavy green line below in a post use:

Code: Select all

[Line=20]GREEN[/Line]



The second BBcode code creates a line centered on the page. Using this code you can specify, the line height, line width in percent and color.
 
BBcode usage:

Code: Select all

[LineC={NUMBER1}, {NUMBER2}]{COLOR}[/LineC]
HTML replacement:

Code: Select all

<hr style="margin-left: auto; margin-right: auto; color:{COLOR}; border-color:{COLOR}; background-color:{COLOR}; height:{NUMBER1}px; width:{NUMBER2}%;"></hr>
Help line:

Code: Select all

[LineC={HEIGHT, LENGTH}]{COLOR}[/LineC]
To get the shorter lines below, in a post use:

Code: Select all

[LineC=1, 30]red[/LineC]
[LineC=5, 60]#555555[/LineC]


Last edited by Steve on Thu Jun 21, 2018 8:18 am, edited 5 times in total.


Last bumped by Steve on Wed Jun 20, 2018 9:44 am.

Post Reply