Add text background color and border BBcode

[steven]

This code creates text with borders that automatically adjust to fit your text. Additionally you can select the background color, the border color, and border width. Break your sentence to have smaller boxes span multiple lines. You can use different colors or transparent and not change the background color or display a border.

Th first code creates text with borders that automatically adjust to fit your text. Additionally you can select the background color, the border color, and width. Break your sentence to have smaller boxes span multiple lines.

Use existing BBcodes to make text bold or change the color. These codes can add a nice touch to your posts.

Est diam venenatis arcu lacus ad. Duis quis eros. Cursus et rutrum eleifend sollicitudin lacinia justo id turpis. Nec convallis integer. Odio eget duis. Nulla aenean et. Blandit varius sollicitudin. Pellentesque leo primis neque urna magnis. Elit ut sollicitudin. Et est a nam dolores eget itaque sagittis et parturient duis est eleifend sociis rutrum odio viverra integer. Per consectetuer mattis. Convallis in aut augue suscipit nec. Est morbi placerat. At purus nulla maecenas lacinia lectus. Interdum vel tellus sed nam tellus arcu volutpat ante arcu in purus ullamcorper vel turpis.

 
Put text between the boxes and place them anywhere in you post. You can combine codes like the margin BBcode to move the box to the right. If you want a border around your text without background color, use transparent for the second color. You can use these BBcodes to get many effects.

Porta vitae in. Ante quam sed orci elit vel cras tincidunt nulla.
Dolor id erat magna at velit. Lacus mattis pulvinar.
Ipsum porttitor dui justo dignissim consectetuer illum ligula fermentum.

 
Use transparent for the border color to create a different backgound color without a border.

Curabitur ligula sapien, tincidunt non, euismod vitae, posuere imperdiet, leo. Maecenas malesuada. Praesent congue erat at massa. Sed cursus turpis vitae tortor. Donec posuere vulputate arcu. Phasellus accumsan cursus velit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed aliquam, nisi quis porttitor congue, elit erat euismod orci, ac placerat dolor lectus quis orci. Phasellus consectetuer vestibulum elit. Aenean tellus metus, bibendum sed, posuere ac, mattis non, nunc. Vestibulum fringilla pede sit amet augue. In turpis. Pellentesque posuere. Praesent turpis.

 
The code works on lists as well:

Stuff in my list

1. A line of stuff
2. Another line of stuff
3. Still more stuff

BBcode Usage:

Code: Select all

[tbox={NUMBER}, {COLOR1}, {COLOR2}]{TEXT}[/tbox]

HTML replacement: (If you do not want blank lines above and below the text remove <p> and </p> from the replacement code.)

Code: Select all

<p><div style="display:inline-block;background-color:{COLOR2};border:{NUMBER}px solid {COLOR1};padding:10px 15px;">{TEXT}</div>
</p>

Help line:

Code: Select all

[tbox=Border-Height, Border-Color, Backgound-color]TEXT[/tbox]

Create radius corners that resemble buttons to add links

Google

in your post.

BBcode Usage:

Code: Select all

[rbox={NUMBER}, {COLOR1}, {COLOR2}]{TEXT}[/rbox]

HTML replacement:

Code: Select all

<div style="display:inline-block;vertical-align:middle;background-color:{COLOR2};border:{NUMBER}px solid {COLOR1};border-radius:8px; padding:0px 4px; ">{TEXT}</div>

Help line:

Code: Select all

[rbox=Border-Height, Border-Color, Backgound-color]TEXT[/rbox]

What if you need text centered on the page?
The code below generates centered text with a border.

 
BBcode Usage:

Code: Select all

[tcbox={NUMBER}, {COLOR1}, {COLOR2}[Sp][/Sp]]{TEXT}[/tcbox]

HTML replacement:

Code: Select all

<p><div style="text-align:center"><div style="display:inline-block;background-color:{COLOR2};border:{NUMBER}px solid {COLOR1};border-radius: 8px;padding:10px 15px;">{TEXT}</div></div></p>

Help line:

Code: Select all

[tcbox=Border-Height, Border-Color, Backgound-color]TEXT[/tcbox]