Horizontal line <hr> or create lines using color, length and height variables BBcode

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

Horizontal line <hr> or create lines using color, length and height variables BBcode

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

Default lines using <hr> in phpBB are 1 pixel high, light grey (#CCCCCC) and difficult to see, as shown below.
Alternately you can generate a darker line using the BBcode below.
BBcode usage:

Code: Select all

[hr][/hr]
HTML replacement:

Code: Select all

<hr style="color:#333333; border-color:#333333;">
Help line:

Code: Select all

[hr][/hr]
If you want to create lines with different heights and colors use the BBcode below. The number defines the line height in pixels followed by the color. To specify colors, 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;">
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 last BBcode code is similar to the code above except you can specify the line length in percent of page width. Additionally the line is centered on the page.
 
 
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}%;">
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]


 
NOTES:
Support for <hr> attributes were changed in html5 and are defined using CSS. However using style allows setting <hr> attributes inline.
The XHTML <hr /> closing tag is not used because it generates a second line in phpBB 3.2.
These <hr> codes were verified using the W3C.org validator.
Last edited by Steve on Wed Sep 12, 2018 7:58 pm, edited 12 times in total.
Reason: Added default <hr> line and removed closing tag.


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

Post Reply