Horizontal line <hr> or create lines by specifing color, length and height BBcode

[steven]

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.