BBC [Solved]

[Pretzel Heart]

Curious how people seem to be making fields for their backgrounds / border.

For example, when I create a background, it will take up the entire length of whatever is in the brackets. I cannot figure out how to control it to maybe, like with the 'accordion' tag, 50% or 500px or whatever

Similarly with borders, I see people having them be much smaller than the page width. Unlike what I am typing right now.

I thought there might be some sort of field restriction tag...or are they manipulating the columns...or just what? Especially when you have a small section of text, being able to restrict this sort of thing just makes it look nicer, I think. So I would really appreciate if someone would explain it to me. ;;;


Sorry if what I'm asking isn't clear...if I come across another example somewhere I'll try and display it.

 

[Dusky]

That's pretty much it. I'm going to make three columns below and demonstrate how coloring and bordering them works.


If you type the code like this:

[bg=pink][border=2px solid red][row][column=span2]Column 1[/column]
[column=span4]Column 2[/column]
[column=span2]Column 3[/column][/row][/border][/bg]

Then you will get:

Column 1

Column 2

Column 3

If you type it like so:

[row][column=span2][bg=pink][border=2px solid red]Column 1[/border][/bg][/column]
[column=span4][bg=red][border=2px solid pink]Column 2[/border][/bg][/column]
[column=span2][bg=pink][border=2px solid red]Column 3[/border][/bg][/column][/row]

Then you will get:

Column 1

Column 2

Column 3

There's also a code to reduce the width of the text area.

[centerblock=percentage]Content here.[/centerblock]

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Which can be colored as:

[bg=pink][centerblock=50]Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.[/centerblock][/bg]

Which appears:

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Or as:

[centerblock=50][bg=pink]Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.[/bg][/centerblock]

Which appears:

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

You should definitely peruse the BBcode Guide.


The lesson here is that borders, background colors, pictures, etc - they interact with other codes, and with width, based on where they are placed. If you want something to conform to a column or a certain width or anything like that, you need to place it within that coding. Even switching around the placement of background BBcoding and border BBcoding would have a different effect from the above.

 

[Pretzel Heart]

@Dusky Thank you for taking the time to lay it out so beautifully, lol. And I see you just added more about the Centerblock, which I was going to mention I tried but couldn't get the BG / Border to manipulate with it correctly (I can see now I was typing in the value wrong). Also the BBC Guide is my Bible lol, but people come up with all sorts of awesome ways to use it.


But thanks a lot. I got what I needed thanks to you. (*^*)