Post by lasori on Jan 18, 2016 20:26:15 GMT
When responding to threads, the post box allows you to change elements such as text colors and fonts. To go even farther, you can use html to create boxes such as the following:
In this guide, I'll walk you through creating div content to modify your posts, and maybe update this with some free-to-use bases later.
To start, you must use two div brackets.
As you can see, that formed nothing. To have the content show, I must include text (and a background color to show the whole box). Add the following to your code:
Within the quotation marks, you'll add properties/attributes that modify the appearance.
Every attribute must be separated by a semicolon.
Between the div brackets, I added text. This isn't very-well sized for posting. To fix that, use the width & height properties.
To change the text's alignment, use the align property.
Let's add a picture! Do so the way you normally would in between the div brackets.
As you can see, the text was pushed off and the image took up most of the box. There's several ways to deal with that without resizing the actual image. For example, change the image's width: decrease the "max-width" from 100% to anything less.
[img src="http://gratisography.com/pictures/267_1.jpg" style="max-width:60%;" alt="text"]
This made the image smaller, but now the text is all the way at the bottom. We can fix this by adding a table- a way of separating extra content inside of a div box. Within the div brackets, add the following
tr= table row
td= content
Each content is separated inside "td" brackets; to make a new row, use the "tr" brackets. In this scenario, one td bracket pair will contain the image, and another will contain the text.
If you want to see how much space the text box takes up, you can add a style bracket to the text content & include a border.
Increase the number to make the border larger, choose solid or dashed- solid means the border has no breaks, dashed forms a dashed border, dotted forms a dotted border. Black can be replaced with any color
Use the following properties in the text's div box to change the text color,size,and font
This is a basic example of what you can do with html- there's other attributes to customize even further! From here on out, I'll explain some of these.
If you were to use the above box, here's what happened if you were to type in a certain amount of text:
In order to prevent this from happening, you can add a scrollbar. To do so, add the following code:
(work in progress)
“I've seen you.”
text text text text text text text text text text text text
In this guide, I'll walk you through creating div content to modify your posts, and maybe update this with some free-to-use bases later.
To start, you must use two div brackets.
[div][/div]
As you can see, that formed nothing. To have the content show, I must include text (and a background color to show the whole box). Add the following to your code:
[div style=""][/div]
Within the quotation marks, you'll add properties/attributes that modify the appearance.
background-color:-----
changes the background colorEvery attribute must be separated by a semicolon.
text
Between the div brackets, I added text. This isn't very-well sized for posting. To fix that, use the width & height properties.
width:---px;height:---px
Replace the dashes with a number.text
[div style="background-color:#cc0000;width:400px;height:20px"]text[/div]
To change the text's alignment, use the align property.
text-align:(center,justify,left,right)
[div style="background-color:#cc0000;width:400px;height:20px,text-align:center"]text[/div]
Let's add a picture! Do so the way you normally would in between the div brackets.
text
[div style="background-color:#cc0000;width:400px;height:50px,text-align:center;"][img src="http://gratisography.com/pictures/267_1.jpg" style="max-width:100%;" alt="text"]text[/div]
As you can see, the text was pushed off and the image took up most of the box. There's several ways to deal with that without resizing the actual image. For example, change the image's width: decrease the "max-width" from 100% to anything less.
[img src="http://gratisography.com/pictures/267_1.jpg" style="max-width:60%;" alt="text"]
text
[div style="background-color:#cc0000;width:400px;height:50px,text-align:center;"][img src="http://gratisography.com/pictures/267_1.jpg" style="max-width:60%;" alt="text"]text[/div]
This made the image smaller, but now the text is all the way at the bottom. We can fix this by adding a table- a way of separating extra content inside of a div box. Within the div brackets, add the following
[table][tr][td]
tr= table row
td= content
Each content is separated inside "td" brackets; to make a new row, use the "tr" brackets. In this scenario, one td bracket pair will contain the image, and another will contain the text.
text |
[div style="background-color:#cc0000;width:400px;height:50px,text-align:center;"][table][tbody][tr][td][img alt="text" src="http://gratisography.com/pictures/267_1.jpg" style="max-width:60%;"][/td][td]text[/td][/tr][/tbody][/table][/div]
If you want to see how much space the text box takes up, you can add a style bracket to the text content & include a border.
text |
border:1px solid/dashed/dotted black
Increase the number to make the border larger, choose solid or dashed- solid means the border has no breaks, dashed forms a dashed border, dotted forms a dotted border. Black can be replaced with any color
text |
Use the following properties in the text's div box to change the text color,size,and font
font-family:[font color="e61919"]type here[/font];color:[font color="e61919"]color here; can be a name or hex code[/font];font-size:--px
text |
[div style="background-color:#cc0000;width:400px;height:50px,text-align:center;"][table][tbody][tr][td][img alt="text" src="http://gratisography.com/pictures/267_1.jpg" style="max-width:60%;"][/td][td style="background-color:none;border:1px solid black;text-align:center;width:200px;height:20px;font-family:malgun gothic;color:black;font-size:15px"]text[/td][/tr][/tbody][/table][/div]
This is a basic example of what you can do with html- there's other attributes to customize even further! From here on out, I'll explain some of these.
If you were to use the above box, here's what happened if you were to type in a certain amount of text:
text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text |
In order to prevent this from happening, you can add a scrollbar. To do so, add the following code:
overflow:scroll
The other box expanded as a result of the large amount of text in the post. Now, the text you've included will not go beyond the borders of the div box, but rather be shown through scrolling as seen here! |
(work in progress)