Text styling

This is bold text
[B]This is bold text[/B]



This is bold text
[FONT bold]This is bold text[/FONT]



This is italic text
[I]This is italic text[/I]



This is italic text
[FONT italic]This is italic text[/FONT]



This red text
[FONT color=red]This red text[/FONT]

For colors you can use most color names or any hex color code (i.e. #000, #727272, etc). Do not use a blue that looks like a link, unless it is a link. This will confuse users.




This large text
[FONT size=30]This large text[/FONT]



This small text
[FONT size=10]This small text[/FONT]



This uses the Georgia font
[FONT family=georgia]This uses the Georgia font[/FONT]



This text has a taller line height. Lorem ipsum dolor sit amet, consectetur adipisicing 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
[FONT lineHeight=40] This text has a taller line height. Lorem ipsum dolor sit amet, consectetur adipisicing 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 [/FONT]

Changing the line height is mostly only useful for photo overlays (described elsewhere)




If your font name has a space in it, you can wrap the font name in quotes

This uses the 'Times New Roman' font
[FONT family="Times New Roman"]This uses the 'Times New Roman' font[/FONT]



You can also specify fallback fonts

This uses the 'Times New Roman' font
[FONT family="'Times New Roman', Georgia"]This uses the 'Times New Roman' font[/FONT]



You cannot put FONT tags inside one another, so sometimes you will have to repeat some if you need to change parts.

This is larger and green text
[FONT size=18]This is larger[/FONT] [FONT size=18 color=green]and green[/FONT] [FONT size=18]text[/FONT]



But B and I tags can go in FONT tags

This is larger and italic and bold text
[FONT size=18]This is larger and [I]italic[/I] and [B]bold[/B] text[/FONT]



You can change the letter spacing with the letterSpacing attribute. Only use this for headings and overlays. I repeat: this is only for short text, no longer than a few words.

SHORT TEXT
[FONT letterSpacing=15]SHORT TEXT[/FONT]



If for some reason you need to remove bold or italic you can use nobold and noitalic.

not italic and not bold
[I][FONT noitalic]not italic[/FONT][/I] and [B][FONT nobold]not bold[/FONT][/B]





New lines and FONT styling

For legacy reasons, sometimes adding a new line to Pinkbike code does not create a new line in the final version of your article. We cannot fix this issue without breaking the formatting of thousands of old articles. This does not ONLY apply to FONT tags, but this will be the most common scenario. You have 3 options to fix this.



Here is an example with the problem...

1. This should be on the first line2. This should be on the second line
[FONT bold]1. This should be on the first line[/FONT]
2. This should be on the second line



You can put a line inbetween (hit ENTER on your keyboard after the first line!)

1. This should be on the first line
2. This should be on the second line
[FONT bold]1. This should be on the first line[/FONT]

2. This should be on the second line



You can add an extra space at the end of your first line (hard to see here)

1. This should be on the first line
2. This should be on the second line
[FONT bold]1. This should be on the first line[/FONT]
2. This should be on the second line



The last way to fix this is to use the BOX tag described elsewhere.

Generally speaking, you should always just be able to add a new line when you need one by hitting enter. If that fails, try hitting Enter again. Smile



Boxes

We have one other tool for styling text, and that is to use the BOX tag. The box tag can do everything that the FONT tag can do, but it automatically is on its own lines and takes up the full width of the column it is in. Boxes can also do borders and backgrounds.

One last feature of boxes is that they can do margins, which is very useful for styling photo overlays (described elsewhere).



This text has a background

[BOX background=#ccc]This text has a background[/BOX]



This text has a background and is larger

[BOX background=#ccc size=20]This text has a background and is larger[/BOX]



This text has a border and is italic

[BOX border=black italic]This text has a border and is italic[/BOX]



This border is thicker

[BOX borderSize=3]This border is thicker[/BOX]



You do not have to give it a background or a border. Then it basically just a FONT tag with new lines.

Line 1.
Line 2. This is italic and Georgia text
Line 3.

Line 1.[BOX italic family=Georgia]Line 2. This is italic and Georgia text[/BOX]Line 3.



You CAN put FONT tags inside BOX tags!

This is larger and green text

[BOX size=18]This is larger [FONT color=green]and green[/FONT] text[/BOX]



By default, BOX tags try and fill the text width. They look nice with columns (described elsewhere). Here are 3 examples...

Lorem ipsum dolor sit amet, consectetur adipisicing 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. Lorem ipsum dolor sit amet, consectetur adipisicing 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.

This is some text I want to emphasize. Ut enim ad minim veniam, quis nostrud exercitation ullamco.
Lorem ipsum dolor sit amet, consectetur adipisicing 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.

Lorem ipsum dolor sit amet, consectetur adipisicing 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. Lorem ipsum dolor sit amet, consectetur adipisicing 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.

Lorem ipsum dolor sit amet, consectetur adipisicing 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.
This is some text I want to emphasize. Ut enim ad minim veniam, quis nostrud exercitation ullamco.

Lorem ipsum dolor sit amet, consectetur adipisicing 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. Lorem ipsum dolor sit amet, consectetur adipisicing 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.

This is some text I want to emphasize. Ut enim ad minim veniam, quis nostrud exercitation ullamco.
Lorem ipsum dolor sit amet, consectetur adipisicing 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.

Lorem ipsum dolor sit amet, consectetur adipisicing 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. Lorem ipsum dolor sit amet, consectetur adipisicing 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.


Lorem ipsum dolor sit amet, consectetur adipisicing 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. Lorem ipsum dolor sit amet, consectetur adipisicing 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.

[PCOLUMNS align=middle]
[BOX background=#aaa size=22]This is some text I want to emphasize. Ut enim ad minim veniam, quis nostrud exercitation ullamco.[/BOX]
[SPLIT]
Lorem ipsum dolor sit amet, consectetur adipisicing 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.
[/PCOLUMNS]

Lorem ipsum dolor sit amet, consectetur adipisicing 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. Lorem ipsum dolor sit amet, consectetur adipisicing 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.

[PCOLUMNS align=middle]
Lorem ipsum dolor sit amet, consectetur adipisicing 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.
[SPLIT]
[BOX border=#555 size=22]This is some text I want to emphasize. Ut enim ad minim veniam, quis nostrud exercitation ullamco.[/BOX]
[/PCOLUMNS]

Lorem ipsum dolor sit amet, consectetur adipisicing 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. Lorem ipsum dolor sit amet, consectetur adipisicing 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.

[PCOLUMNS align=middle]
[BOX size=22]This is some text I want to emphasize. Ut enim ad minim veniam, quis nostrud exercitation ullamco.[/BOX]
[SPLIT]
Lorem ipsum dolor sit amet, consectetur adipisicing 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.
[/PCOLUMNS]

Lorem ipsum dolor sit amet, consectetur adipisicing 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. Lorem ipsum dolor sit amet, consectetur adipisicing 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.



But you can do the above example and have the boxes expand to the "media" width, and that looks nice as well.

Only do this in columns! Expanding the box width not in columns will make the line length too long to be comfortable & easy to read.

Lorem ipsum dolor sit amet, consectetur adipisicing 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. Lorem ipsum dolor sit amet, consectetur adipisicing 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.

This is some text I want to emphasize. Ut enim ad minim veniam, quis nostrud exercitation ullamco.
Lorem ipsum dolor sit amet, consectetur adipisicing 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.

Lorem ipsum dolor sit amet, consectetur adipisicing 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. Lorem ipsum dolor sit amet, consectetur adipisicing 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.

Lorem ipsum dolor sit amet, consectetur adipisicing 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.
This is some text I want to emphasize. Ut enim ad minim veniam, quis nostrud exercitation ullamco.

Lorem ipsum dolor sit amet, consectetur adipisicing 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. Lorem ipsum dolor sit amet, consectetur adipisicing 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.

This is some text I want to emphasize. Ut enim ad minim veniam, quis nostrud exercitation ullamco.
Lorem ipsum dolor sit amet, consectetur adipisicing 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.

Lorem ipsum dolor sit amet, consectetur adipisicing 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. Lorem ipsum dolor sit amet, consectetur adipisicing 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.


Lorem ipsum dolor sit amet, consectetur adipisicing 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. Lorem ipsum dolor sit amet, consectetur adipisicing 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.

[PCOLUMNS align=middle]
[BOX width=media background=#aaa size=22]This is some text I want to emphasize. Ut enim ad minim veniam, quis nostrud exercitation ullamco.[/BOX]
[SPLIT]
Lorem ipsum dolor sit amet, consectetur adipisicing 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.
[/PCOLUMNS]

Lorem ipsum dolor sit amet, consectetur adipisicing 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. Lorem ipsum dolor sit amet, consectetur adipisicing 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.

[PCOLUMNS align=middle]
Lorem ipsum dolor sit amet, consectetur adipisicing 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.
[SPLIT]
[BOX width=media border=#555 size=22]This is some text I want to emphasize. Ut enim ad minim veniam, quis nostrud exercitation ullamco.[/BOX]
[/PCOLUMNS]

Lorem ipsum dolor sit amet, consectetur adipisicing 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. Lorem ipsum dolor sit amet, consectetur adipisicing 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.

[PCOLUMNS align=middle]
[BOX width=media size=22]This is some text I want to emphasize. Ut enim ad minim veniam, quis nostrud exercitation ullamco.[/BOX]
[SPLIT]
Lorem ipsum dolor sit amet, consectetur adipisicing 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.
[/PCOLUMNS]

Lorem ipsum dolor sit amet, consectetur adipisicing 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. Lorem ipsum dolor sit amet, consectetur adipisicing 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.



I notice a lot of people doing a list to the right of some text. The BOX tag is the way to make this easy...

Gore Bike Wear is one of the most established and recognisable brand names in the highly competitive outdoor clothing market, and they're constantly creating new fabrics to help make dealing with inclement and horrid weather much easier, and finding excuses to cancel a ride much harder to come by. The latest development from their tech lab is Thermium, which sits alongside its existing hard-shell Gore-Tex and soft shell Windstopper lines and aims to offer warmth as well as protection from wind and rain.
Gore Thermium Jacket Details
• PrimaLoft Gold Insulation Active fabric
• Three zipped pockets
• Adjustable (non-removable) hood and cuffs
• Reflective logos
• Colors/sizes: Black - Small through XX-large
• MSRP: £260, $400
• Contact: Gore Apparel

[PCOLUMNS]
Gore Bike Wear is one of the most established and recognisable brand names in the highly competitive outdoor clothing market, and they're constantly creating new fabrics to help make dealing with inclement and horrid weather much easier, and finding excuses to cancel a ride much harder to come by. The latest development from their tech lab is Thermium, which sits alongside its existing hard-shell Gore-Tex and soft shell Windstopper lines and aims to offer warmth as well as protection from wind and rain.
[SPLIT]
[BOX paddingLeft=50]
[FONT size=20 bold lineHeight=40]Gore Thermium Jacket Details[/FONT]
• PrimaLoft Gold Insulation Active fabric
• Three zipped pockets
• Adjustable (non-removable) hood and cuffs
• Reflective logos
• Colors/sizes: Black - Small through XX-large
• MSRP: £260, $400
• Contact: [L= https://www.goreapparel.com/gore-bike-wear/men/one-gore-thermium-jacket/JWIONE.html]Gore Apparel[/L]
[/BOX]
[/PCOLUMNS]





Centering

This text is centered

[CENTER]This text is centered[/CENTER]



Note: under absolutely no circumstance should you center large blocks of text. If it is more than two lines, do not center it. See this blog post for what not to do (sorry to single you out)!



Questions

For interviews, you can format questions with a pinkbike logo using the PQUESTION tag...

This is a wonderful question?


[PQUESTION]This is a wonderful question?[/PQUESTION]





Quotes

There are two tags for adding quotes: quoten and QUOTE. The older one is quoten and has limited options; don't use it. QUOTE is the new way and is much more flexible.

QUOTE tags can take a size or guess one automatically, and will format the author for you.



The QUOTE tag will try and guess the size of the quote and choose an appropriate font size.

bigquotesThis is a very interesting short quote

bigquotesThis is a longer quote than the first quote I used above but still very interesting. Don't you think so?

bigquotesAnd this quote is even longer than the previous two. Lorem ipsum dolor sit amet, consectetur adipisicing 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.

bigquotesThis quote is very long. Lorem ipsum dolor sit amet, consectetur adipisicing 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. Lorem ipsum dolor sit amet, consectetur adipisicing 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.

[QUOTE]This is a very interesting short quote[/QUOTE]

[QUOTE]This is a longer quote than the first quote I used above but still very interesting. Don't you think so?[/QUOTE]

[QUOTE]And this quote is even longer than the previous two. Lorem ipsum dolor sit amet, consectetur adipisicing 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.[/QUOTE]

[QUOTE]This quote is very long. Lorem ipsum dolor sit amet, consectetur adipisicing 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. Lorem ipsum dolor sit amet, consectetur adipisicing 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.[/QUOTE]



But you can override the size if you want. The options are small, medium, large and giant. These are all medium...

bigquotesThis is a very interesting short quote

bigquotesThis is a longer quote than the first quote I used above but still very interesting. Don't you think so?

bigquotesAnd this quote is even longer than the previous two. Lorem ipsum dolor sit amet, consectetur adipisicing 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.

bigquotesThis quote is very long. Lorem ipsum dolor sit amet, consectetur adipisicing 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. Lorem ipsum dolor sit amet, consectetur adipisicing 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.

[QUOTE size=medium]This is a very interesting short quote[/QUOTE]

[QUOTE size=medium]This is a longer quote than the first quote I used above but still very interesting. Don't you think so?[/QUOTE]

[QUOTE size=medium]And this quote is even longer than the previous two. Lorem ipsum dolor sit amet, consectetur adipisicing 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.[/QUOTE]

[QUOTE size=medium]This quote is very long. Lorem ipsum dolor sit amet, consectetur adipisicing 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. Lorem ipsum dolor sit amet, consectetur adipisicing 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.[/QUOTE]



You can still specify exactly the font size you want with the FONT tag...

bigquotesLorem ipsum dolor sit amet, consectetur adipisicing 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.

[QUOTE][FONT size=17]Lorem ipsum dolor sit amet, consectetur adipisicing 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.[/FONT][/QUOTE]



Or if you want a different font...

bigquotesLorem ipsum dolor sit amet, consectetur adipisicing 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.

[QUOTE][FONT family=Georgia]Lorem ipsum dolor sit amet, consectetur adipisicing 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.[/FONT][/QUOTE]



Or if you do not like italic

bigquotesLorem ipsum dolor sit amet, consectetur adipisicing 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.

[QUOTE][FONT noitalic]Lorem ipsum dolor sit amet, consectetur adipisicing 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.[/FONT][/QUOTE]



If you specify the author attribute (with quotes around the name), the QUOTE tag will format it for you nicely...

bigquotesThis is a very interesting short quoteBenjamin

bigquotesThis is a longer quote than the first quote I used above but still very interesting. Don't you think so?Benjamin Thomas

bigquotesAnd this quote is even longer than the previous two. Lorem ipsum dolor sit amet, consectetur adipisicing 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.Benjamin Thomas, web developer for Pinkbike.com

bigquotesThis quote is very long. Lorem ipsum dolor sit amet, consectetur adipisicing 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. Lorem ipsum dolor sit amet, consectetur adipisicing 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.bentomas

[QUOTE author="Benjamin"]This is a very interesting short quote[/QUOTE]

[QUOTE author="Benjamin Thomas"]This is a longer quote than the first quote I used above but still very interesting. Don't you think so?[/QUOTE]

[QUOTE author="Benjamin Thomas, web developer for Pinkbike.com"]And this quote is even longer than the previous two. Lorem ipsum dolor sit amet, consectetur adipisicing 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.[/QUOTE]

[QUOTE author="bentomas"]This quote is very long. Lorem ipsum dolor sit amet, consectetur adipisicing 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. Lorem ipsum dolor sit amet, consectetur adipisicing 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.[/QUOTE]



You can specify the side attribute to switch which side of the quote the large quotes icon appears on. Options are left or right

Lorem ipsum dolor sit amet, consectetur adipisicing 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.bigquotes

[QUOTE side=right]Lorem ipsum dolor sit amet, consectetur adipisicing 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.[/QUOTE]



Switching the side of the quote works well if you decide to put a quote in a left column

Times, however, are changing. New technology and manufacturing techniques have been continuously increasing strength and reducing the weight of both systems. Surely, with the introduction of SRAM's Eagle and its whopping twelve gears, modern chain-retaining rings and quieting clutches, the derailleur (as we know it) has been developed to its limit. Though lesser-seen, the gearbox has also been around for a long time. Does it have enough room for improvement, or is it already maxed out?

Everything is a work in progress, but you must be willing to see your own shortcomings in order to grow and become a better person.Ericbigquotes
Personally, I'm a big fan of the gearbox. Probably because I lack precision on the trail and I log plenty of time riding on gnarly, ungroomed, alpine terrain, which makes for plenty of potential bike-smashing moments. Many riders share my gearbox dream, but a great number, including most of my colleagues and peers, have little interest in gearboxes and are happy with their conventional derailleur systems. Each system has its positives, and each has its compromises - topics that have fueled an ongoing debate about which transmission is ultimately the best solution for a mountain bike.

Each system has its positives, and each has its compromises - topics that have fueled an ongoing debate about which transmission is ultimately the best solution for a mountain bike. To properly debate these burning issues, I asked the people at Nicolai to build two identical bikes, one with a gearbox and one with a derailleur transmission. I would then put them to task on the same terrain for both timed runs and for riding impressions. In addition, I would provide weights and technical comparisons to hopefully flesh out the best and worst of the gearbox and derailleur - and, ultimately, conclude with a clear winner

Times, however, are changing. New technology and manufacturing techniques have been continuously increasing strength and reducing the weight of both systems. Surely, with the introduction of SRAM's Eagle and its whopping twelve gears, modern chain-retaining rings and quieting clutches, the derailleur (as we know it) has been developed to its limit. Though lesser-seen, the gearbox has also been around for a long time. Does it have enough room for improvement, or is it already maxed out?

[PCOLUMNS align=middle]
[QUOTE side=right author="Eric"]Everything is a work in progress, but you must be willing to see your own shortcomings in order to grow and become a better person.[/QUOTE]
[SPLIT]
Personally, I'm a big fan of the gearbox. Probably because I lack precision on the trail and I log plenty of time riding on gnarly, ungroomed, alpine terrain, which makes for plenty of potential bike-smashing moments. Many riders share my gearbox dream, but a great number, including most of my colleagues and peers, have little interest in gearboxes and are happy with their conventional derailleur systems. Each system has its positives, and each has its compromises - topics that have fueled an ongoing debate about which transmission is ultimately the best solution for a mountain bike.
[/PCOLUMNS]

Each system has its positives, and each has its compromises - topics that have fueled an ongoing debate about which transmission is ultimately the best solution for a mountain bike. To properly debate these burning issues, I asked the people at Nicolai to build two identical bikes, one with a gearbox and one with a derailleur transmission. I would then put them to task on the same terrain for both timed runs and for riding impressions. In addition, I would provide weights and technical comparisons to hopefully flesh out the best and worst of the gearbox and derailleur - and, ultimately, conclude with a clear winner



You can specify the width attribute to break out the text column to achieve a nice pull quote effect if you combine this with columns.

Times, however, are changing. New technology and manufacturing techniques have been continuously increasing strength and reducing the weight of both systems. Surely, with the introduction of SRAM's Eagle and its whopping twelve gears, modern chain-retaining rings and quieting clutches, the derailleur (as we know it) has been developed to its limit. Though lesser-seen, the gearbox has also been around for a long time. Does it have enough room for improvement, or is it already maxed out?

Personally, I'm a big fan of the gearbox. Probably because I lack precision on the trail and I log plenty of time riding on gnarly, ungroomed, alpine terrain, which makes for plenty of potential bike-smashing moments. Many riders share my gearbox dream, but a great number, including most of my colleagues and peers, have little interest in gearboxes and are happy with their conventional derailleur systems. Each system has its positives, and each has its compromises - topics that have fueled an ongoing debate about which transmission is ultimately the best solution for a mountain bike.
bigquotesYou have to remind yourself that you both have the same goals at heart. Your paths to get there may be slightly different, but you have to be open to ideas that can better who you are and what your business can be.Eric

Each system has its positives, and each has its compromises - topics that have fueled an ongoing debate about which transmission is ultimately the best solution for a mountain bike. To properly debate these burning issues, I asked the people at Nicolai to build two identical bikes, one with a gearbox and one with a derailleur transmission. I would then put them to task on the same terrain for both timed runs and for riding impressions. In addition, I would provide weights and technical comparisons to hopefully flesh out the best and worst of the gearbox and derailleur - and, ultimately, conclude with a clear winner.

Times, however, are changing. New technology and manufacturing techniques have been continuously increasing strength and reducing the weight of both systems. Surely, with the introduction of SRAM's Eagle and its whopping twelve gears, modern chain-retaining rings and quieting clutches, the derailleur (as we know it) has been developed to its limit. Though lesser-seen, the gearbox has also been around for a long time. Does it have enough room for improvement, or is it already maxed out?

[PCOLUMNS align=middle]
Personally, I'm a big fan of the gearbox. Probably because I lack precision on the trail and I log plenty of time riding on gnarly, ungroomed, alpine terrain, which makes for plenty of potential bike-smashing moments. Many riders share my gearbox dream, but a great number, including most of my colleagues and peers, have little interest in gearboxes and are happy with their conventional derailleur systems. Each system has its positives, and each has its compromises - topics that have fueled an ongoing debate about which transmission is ultimately the best solution for a mountain bike.
[SPLIT]
[QUOTE width=media author="Eric"]You have to remind yourself that you both have the same goals at heart. Your paths to get there may be slightly different, but you have to be open to ideas that can better who you are and what your business can be.[/QUOTE]
[/PCOLUMNS]

Each system has its positives, and each has its compromises - topics that have fueled an ongoing debate about which transmission is ultimately the best solution for a mountain bike. To properly debate these burning issues, I asked the people at Nicolai to build two identical bikes, one with a gearbox and one with a derailleur transmission. I would then put them to task on the same terrain for both timed runs and for riding impressions. In addition, I would provide weights and technical comparisons to hopefully flesh out the best and worst of the gearbox and derailleur - and, ultimately, conclude with a clear winner.





Horizontal Rules



[HR]

The default width is 100%, but you can specify a different percentage



[HR width=50%]



[HR color=black]



[HR color=#f00]



[HR color=#0000ff]



[HR size=2]



[HR color=black size=2]





Columns

You can get two columns using the PBCOLUMNS tag.



Lorem ipsum dolor sit amet, consectetur adipisicing 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

[PCOLUMNS]
Lorem ipsum dolor sit amet, consectetur adipisicing 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
[SPLIT]
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
[/PCOLUMNS]



You can use this to get two images side by side...


[PCOLUMNS]
[PI=4800233][/PI]
[SPLIT]
[PI=4919493][/PI]
[/PCOLUMNS]



Or an image with some text...

Lorem ipsum dolor sit amet, consectetur adipisicing 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

[PCOLUMNS]
[PI=4997313][/PI]
[SPLIT]
Lorem ipsum dolor sit amet, consectetur adipisicing 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
[/PCOLUMNS]



By default, an image will expand out of a column to the media width. To get an image to use the same width as the text specify width=text on the image...

Lorem ipsum dolor sit amet, consectetur adipisicing 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

[PCOLUMNS]
[PI=5041905 width=text][/PI]
[SPLIT]
Lorem ipsum dolor sit amet, consectetur adipisicing 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
[/PCOLUMNS]



By default, the content of each column starts at the top, but you can have the columns balance their content vertically by specifying align=middle...

Lorem ipsum dolor sit amet, consectetur adipisicing 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

[PCOLUMNS align=middle]
[PI=5082700 width=text][/PI]
[SPLIT]
Lorem ipsum dolor sit amet, consectetur adipisicing 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
[/PCOLUMNS]



Or you can have the columns both end at the same place by specifying align=bottom...

Lorem ipsum dolor sit amet, consectetur adipisicing 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

[PCOLUMNS align=bottom]
[PI=5203811 width=text][/PI]
[SPLIT]
Lorem ipsum dolor sit amet, consectetur adipisicing 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
[/PCOLUMNS]



You can remove the "gutter" from between the columns to, say, get the images snug against each other...


[PCOLUMNS nogutter]
[PI=5307627][/PI]
[SPLIT]
[PI=5320251][/PI]
[/PCOLUMNS]



The images will each individually respect the width=window attribute, but instead of filling the window, they'll fill their column...


[PCOLUMNS]
[PI=5434082 width=window][/PI]
[SPLIT]
[PI=5497055 width=window][/PI]
[/PCOLUMNS]



Specify no gutter if you want them to touch


[PCOLUMNS nogutter]
[PI=5592321 width=window][/PI]
[SPLIT]
[PI=5686507 width=window][/PI]
[/PCOLUMNS]





More than Two Columns

You can split into more than two columns using more than one SPLIT tag. This is very powerful but can also be very confusing. Also, since it's new, there might be bugs. Please comment below with any problems you find.



Three columns...

Column One
Column Two
Column Three

[PCOLUMNS]
Column One
[SPLIT]
Column Two
[SPLIT]
Column Three
[/PCOLUMNS]



Four columns...

Column One
Column Two
Column Three
Column Four

[PCOLUMNS]
Column One
[SPLIT]
Column Two
[SPLIT]
Column Three
[SPLIT]
Column Four
[/PCOLUMNS]



You can go all the way up to 8...

Column One
Column Two
Column Three
Column Four
Column Five
Column Six
Column Seven
Column Eight

[PCOLUMNS]
Column One
[SPLIT]
Column Two
[SPLIT]
Column Three
[SPLIT]
Column Four
[SPLIT]
Column Five
[SPLIT]
Column Six
[SPLIT]
Column Seven
[SPLIT]
Column Eight
[/PCOLUMNS]

Though that can get a little crowded




Here is an example with longer text

Times, however, are changing. New technology and manufacturing techniques have been continuously increasing strength and reducing the weight of both systems. Surely, with the introduction of SRAM's Eagle and its whopping twelve gears, modern chain-retaining rings and quieting clutches, the derailleur (as we know it) has been developed to its limit. Though lesser-seen, the gearbox has also been around for a long time. Does it have enough room for improvement, or is it already maxed out?
Personally, I'm a big fan of the gearbox. Probably because I lack precision on the trail and I log plenty of time riding on gnarly, ungroomed, alpine terrain, which makes for plenty of potential bike-smashing moments. Many riders share my gearbox dream, but a great number, including most of my colleagues and peers, have little interest in gearboxes and are happy with their conventional derailleur systems. Each system has its positives, and each has its compromises - topics that have fueled an ongoing debate about which transmission is ultimately the best solution for a mountain bike.
Each system has its positives, and each has its compromises - topics that have fueled an ongoing debate about which transmission is ultimately the best solution for a mountain bike. To properly debate these burning issues, I asked the people at Nicolai to build two identical bikes, one with a gearbox and one with a derailleur transmission. I would then put them to task on the same terrain for both timed runs and for riding impressions. In addition, I would provide weights and technical comparisons to hopefully flesh out the best and worst of the gearbox and derailleur - and, ultimately, conclude with a clear winner.

[PCOLUMNS]
Times, however, are changing. New technology and manufacturing techniques have been continuously increasing strength and reducing the weight of both systems. Surely, with the introduction of SRAM's Eagle and its whopping twelve gears, modern chain-retaining rings and quieting clutches, the derailleur (as we know it) has been developed to its limit. Though lesser-seen, the gearbox has also been around for a long time. Does it have enough room for improvement, or is it already maxed out?
[SPLIT]
Personally, I'm a big fan of the gearbox. Probably because I lack precision on the trail and I log plenty of time riding on gnarly, ungroomed, alpine terrain, which makes for plenty of potential bike-smashing moments. Many riders share my gearbox dream, but a great number, including most of my colleagues and peers, have little interest in gearboxes and are happy with their conventional derailleur systems. Each system has its positives, and each has its compromises - topics that have fueled an ongoing debate about which transmission is ultimately the best solution for a mountain bike.
[SPLIT]
Each system has its positives, and each has its compromises - topics that have fueled an ongoing debate about which transmission is ultimately the best solution for a mountain bike. To properly debate these burning issues, I asked the people at Nicolai to build two identical bikes, one with a gearbox and one with a derailleur transmission. I would then put them to task on the same terrain for both timed runs and for riding impressions. In addition, I would provide weights and technical comparisons to hopefully flesh out the best and worst of the gearbox and derailleur - and, ultimately, conclude with a clear winner.[/PCOLUMNS]

The column sizes are based off of the width of the text. But you can tell them to size based off of the media or window widths.




media width...

Times, however, are changing. New technology and manufacturing techniques have been continuously increasing strength and reducing the weight of both systems. Surely, with the introduction of SRAM's Eagle and its whopping twelve gears, modern chain-retaining rings and quieting clutches, the derailleur (as we know it) has been developed to its limit. Though lesser-seen, the gearbox has also been around for a long time. Does it have enough room for improvement, or is it already maxed out?
Personally, I'm a big fan of the gearbox. Probably because I lack precision on the trail and I log plenty of time riding on gnarly, ungroomed, alpine terrain, which makes for plenty of potential bike-smashing moments. Many riders share my gearbox dream, but a great number, including most of my colleagues and peers, have little interest in gearboxes and are happy with their conventional derailleur systems. Each system has its positives, and each has its compromises - topics that have fueled an ongoing debate about which transmission is ultimately the best solution for a mountain bike.
Each system has its positives, and each has its compromises - topics that have fueled an ongoing debate about which transmission is ultimately the best solution for a mountain bike. To properly debate these burning issues, I asked the people at Nicolai to build two identical bikes, one with a gearbox and one with a derailleur transmission. I would then put them to task on the same terrain for both timed runs and for riding impressions. In addition, I would provide weights and technical comparisons to hopefully flesh out the best and worst of the gearbox and derailleur - and, ultimately, conclude with a clear winner.

[PCOLUMNS width=media]
Times, however, are changing. New technology and manufacturing techniques have been continuously increasing strength and reducing the weight of both systems. Surely, with the introduction of SRAM's Eagle and its whopping twelve gears, modern chain-retaining rings and quieting clutches, the derailleur (as we know it) has been developed to its limit. Though lesser-seen, the gearbox has also been around for a long time. Does it have enough room for improvement, or is it already maxed out?
[SPLIT]
Personally, I'm a big fan of the gearbox. Probably because I lack precision on the trail and I log plenty of time riding on gnarly, ungroomed, alpine terrain, which makes for plenty of potential bike-smashing moments. Many riders share my gearbox dream, but a great number, including most of my colleagues and peers, have little interest in gearboxes and are happy with their conventional derailleur systems. Each system has its positives, and each has its compromises - topics that have fueled an ongoing debate about which transmission is ultimately the best solution for a mountain bike.
[SPLIT]
Each system has its positives, and each has its compromises - topics that have fueled an ongoing debate about which transmission is ultimately the best solution for a mountain bike. To properly debate these burning issues, I asked the people at Nicolai to build two identical bikes, one with a gearbox and one with a derailleur transmission. I would then put them to task on the same terrain for both timed runs and for riding impressions. In addition, I would provide weights and technical comparisons to hopefully flesh out the best and worst of the gearbox and derailleur - and, ultimately, conclude with a clear winner.
[/PCOLUMNS]



window width...

Times, however, are changing. New technology and manufacturing techniques have been continuously increasing strength and reducing the weight of both systems. Surely, with the introduction of SRAM's Eagle and its whopping twelve gears, modern chain-retaining rings and quieting clutches, the derailleur (as we know it) has been developed to its limit. Though lesser-seen, the gearbox has also been around for a long time. Does it have enough room for improvement, or is it already maxed out?
Personally, I'm a big fan of the gearbox. Probably because I lack precision on the trail and I log plenty of time riding on gnarly, ungroomed, alpine terrain, which makes for plenty of potential bike-smashing moments. Many riders share my gearbox dream, but a great number, including most of my colleagues and peers, have little interest in gearboxes and are happy with their conventional derailleur systems. Each system has its positives, and each has its compromises - topics that have fueled an ongoing debate about which transmission is ultimately the best solution for a mountain bike.
Each system has its positives, and each has its compromises - topics that have fueled an ongoing debate about which transmission is ultimately the best solution for a mountain bike. To properly debate these burning issues, I asked the people at Nicolai to build two identical bikes, one with a gearbox and one with a derailleur transmission. I would then put them to task on the same terrain for both timed runs and for riding impressions. In addition, I would provide weights and technical comparisons to hopefully flesh out the best and worst of the gearbox and derailleur - and, ultimately, conclude with a clear winner.

[PCOLUMNS width=window]
Times, however, are changing. New technology and manufacturing techniques have been continuously increasing strength and reducing the weight of both systems. Surely, with the introduction of SRAM's Eagle and its whopping twelve gears, modern chain-retaining rings and quieting clutches, the derailleur (as we know it) has been developed to its limit. Though lesser-seen, the gearbox has also been around for a long time. Does it have enough room for improvement, or is it already maxed out?
[SPLIT]
Personally, I'm a big fan of the gearbox. Probably because I lack precision on the trail and I log plenty of time riding on gnarly, ungroomed, alpine terrain, which makes for plenty of potential bike-smashing moments. Many riders share my gearbox dream, but a great number, including most of my colleagues and peers, have little interest in gearboxes and are happy with their conventional derailleur systems. Each system has its positives, and each has its compromises - topics that have fueled an ongoing debate about which transmission is ultimately the best solution for a mountain bike.
[SPLIT]
Each system has its positives, and each has its compromises - topics that have fueled an ongoing debate about which transmission is ultimately the best solution for a mountain bike. To properly debate these burning issues, I asked the people at Nicolai to build two identical bikes, one with a gearbox and one with a derailleur transmission. I would then put them to task on the same terrain for both timed runs and for riding impressions. In addition, I would provide weights and technical comparisons to hopefully flesh out the best and worst of the gearbox and derailleur - and, ultimately, conclude with a clear winner.
[/PCOLUMNS]



Images behave the same way as with two columns. If the image is in the first or the last column, it'll break out to the media width

Personally, I'm a big fan of the gearbox. Probably because I lack precision on the trail and I log plenty of time riding on gnarly, ungroomed, alpine terrain, which makes for plenty of potential bike-smashing moments. Many riders share my gearbox dream, but a great number, including most of my colleagues and peers, have little interest in gearboxes and are happy with their conventional derailleur systems. Each system has its positives, and each has its compromises - topics that have fueled an ongoing debate about which transmission is ultimately the best solution for a mountain bike.
Each system has its positives, and each has its compromises - topics that have fueled an ongoing debate about which transmission is ultimately the best solution for a mountain bike. To properly debate these burning issues, I asked the people at Nicolai to build two identical bikes, one with a gearbox and one with a derailleur transmission. I would then put them to task on the same terrain for both timed runs and for riding impressions. In addition, I would provide weights and technical comparisons to hopefully flesh out the best and worst of the gearbox and derailleur - and, ultimately, conclude with a clear winner.

Each system has its positives, and each has its compromises - topics that have fueled an ongoing debate about which transmission is ultimately the best solution for a mountain bike. To properly debate these burning issues, I asked the people at Nicolai to build two identical bikes, one with a gearbox and one with a derailleur transmission. I would then put them to task on the same terrain for both timed runs and for riding impressions. In addition, I would provide weights and technical comparisons to hopefully flesh out the best and worst of the gearbox and derailleur - and, ultimately, conclude with a clear winner.
Personally, I'm a big fan of the gearbox. Probably because I lack precision on the trail and I log plenty of time riding on gnarly, ungroomed, alpine terrain, which makes for plenty of potential bike-smashing moments. Many riders share my gearbox dream, but a great number, including most of my colleagues and peers, have little interest in gearboxes and are happy with their conventional derailleur systems. Each system has its positives, and each has its compromises - topics that have fueled an ongoing debate about which transmission is ultimately the best solution for a mountain bike.

[PCOLUMNS]
[PI=4808906][/PI]
[SPLIT]
Personally, I'm a big fan of the gearbox. Probably because I lack precision on the trail and I log plenty of time riding on gnarly, ungroomed, alpine terrain, which makes for plenty of potential bike-smashing moments. Many riders share my gearbox dream, but a great number, including most of my colleagues and peers, have little interest in gearboxes and are happy with their conventional derailleur systems. Each system has its positives, and each has its compromises - topics that have fueled an ongoing debate about which transmission is ultimately the best solution for a mountain bike.
[SPLIT]
Each system has its positives, and each has its compromises - topics that have fueled an ongoing debate about which transmission is ultimately the best solution for a mountain bike. To properly debate these burning issues, I asked the people at Nicolai to build two identical bikes, one with a gearbox and one with a derailleur transmission. I would then put them to task on the same terrain for both timed runs and for riding impressions. In addition, I would provide weights and technical comparisons to hopefully flesh out the best and worst of the gearbox and derailleur - and, ultimately, conclude with a clear winner.
[/PCOLUMNS]

[PCOLUMNS]
Each system has its positives, and each has its compromises - topics that have fueled an ongoing debate about which transmission is ultimately the best solution for a mountain bike. To properly debate these burning issues, I asked the people at Nicolai to build two identical bikes, one with a gearbox and one with a derailleur transmission. I would then put them to task on the same terrain for both timed runs and for riding impressions. In addition, I would provide weights and technical comparisons to hopefully flesh out the best and worst of the gearbox and derailleur - and, ultimately, conclude with a clear winner.
[SPLIT]
Personally, I'm a big fan of the gearbox. Probably because I lack precision on the trail and I log plenty of time riding on gnarly, ungroomed, alpine terrain, which makes for plenty of potential bike-smashing moments. Many riders share my gearbox dream, but a great number, including most of my colleagues and peers, have little interest in gearboxes and are happy with their conventional derailleur systems. Each system has its positives, and each has its compromises - topics that have fueled an ongoing debate about which transmission is ultimately the best solution for a mountain bike.
[SPLIT]
[PI=4831923][/PI]
[/PCOLUMNS]



The images breaking out to the media column can be a little weird with more than two columns, because the middle columns can't break out...



[PCOLUMNS]
[PI=4839261][/PI]
[SPLIT]
[PI=4944715][/PI]
[SPLIT]
[PI=5436580][/PI]
[/PCOLUMNS]

[PCOLUMNS]
[PI=4864637][/PI]
[SPLIT]
[PI=4977763][/PI]
[SPLIT]
[PI=5048274][/PI]
[SPLIT]
[PI=5077958][/PI]
[/PCOLUMNS]



You can solve that by using either media or window widths for the PCOLUMNS...

From trip to Austria


[PCOLUMNS width=media]
[PI=5809180][/PI]
[SPLIT]
[PI=6555692][/PI]
[SPLIT]
[PI=7025544][/PI]
[/PCOLUMNS]

[PCOLUMNS width=window]
[PI=5688169][/PI]
[SPLIT]
[PI=5762697][/PI]
[SPLIT]
[PI=5771799][/PI]
[SPLIT]
[PI=5781388][/PI]
[/PCOLUMNS]



Here those are without gutters

some pics from back in the day.... The greatist ripper I ll know... lost to depression. Rest in peace Paul.
Tabletop - Photo Louis Lhomel


[PCOLUMNS nogutter width=media]
[PI=7118671][/PI]
[SPLIT]
[PI=7335180][/PI]
[SPLIT]
[PI=7417397][/PI]
[/PCOLUMNS]

[PCOLUMNS nogutter width=window]
[PI=5811576][/PI]
[SPLIT]
[PI=5826633][/PI]
[SPLIT]
[PI=5837606][/PI]
[SPLIT]
[PI=5866589][/PI]
[/PCOLUMNS]



When you split, you can set certain columns to "span" more than one column, so it is wider than other columns. You add a span attribute to the SPLIT tag.

Column One (twice as wide as two)
Column 2

[PCOLUMNS]
[BOX background=blue]Column One (twice as wide as two)[/BOX]
[SPLIT span=2]
[BOX background=pink]Column 2[/BOX]
[/PCOLUMNS]



If you want the very last column to be wider, there is no SPLIT tag to add the span to, so you can specify the lastColumnSpan attribute to the PCOLUMNS attribute

Column One
Column 2 (twice as wide as one)

[PCOLUMNS lastColumnSpan=2]
[BOX background=blue]Column One[/BOX]
[SPLIT]
[BOX background=pink]Column 2 (twice as wide as one)[/BOX]
[/PCOLUMNS]



spanning works with images and other media as well...



[PCOLUMNS]
[PI=5871389][/PI]
[SPLIT span=2]
[PI=5892181][/PI]
[/PCOLUMNS]

[PCOLUMNS lastColumnSpan=2]
[PI=5896880][/PI]
[SPLIT]
[PI=5911436][/PI]
[/PCOLUMNS]





Aligning Photos in Columns

You are going to be tempted to try and get the height of photos in columns of different widths to line up (because it looks really smart). In short, this can be a major pain.

My advice for figuring this all out is to work in this order:

A) choose how many columns you want and what photos you want in those columns;
B) add in column spans if you want some photos wider than others;
C) remove gutters;
D) use the crop and offset attributes to get the images looking how you want and the heights matched up (if you want them);
E) if you want gutters, add them back in and then use the clip attritube to get them all the same height again.

Keep reading for examples of each of those steps.



First, it is easy if you have two columns, where one of the columns is twice the width of the other column.

A) set nogutter on the PCOLUMNS;
B) also set the width on the PCOLUMNS to media or window;
C) make sure one of the photos has a 3:2 aspect ratio and the other a 4:3 ratio...

cork flip with a gopro hero 2

[PCOLUMNS width=media nogutter]
[PI=5921517][/PI]
[SPLIT span=2]
[PI=8969998][/PI]
[/PCOLUMNS]



You can always use the photo crop functions to get the aspect ratio you need. So if you want to use two 3:2 aspect ratio photos, here I crop the height of the portrait photo by 11.06%...


[PCOLUMNS width=media nogutter]
[PI=5928641][/PI]
[SPLIT span=2]
[PI=5079177 cropHeightBy=11.06%][/PI]
[/PCOLUMNS]



And if you want to use two 4:3 aspect ratio photos, here I crop the height of the landscape photo by 2.4ish%...

Riding to coastal ridges on the Basque coast. It looks sketchier than it actually feels the trail is fast but you would have to be really really cock up to get over the edge. If you did then it would be a long tumble to a fast drowning
Claude Monet style

[PCOLUMNS width=media nogutter]
[PI=7597385 cropHeightBy=2.3982814%][/PI]
[SPLIT span=2]
[PI=8846606][/PI]
[/PCOLUMNS]



This works for window width columns too

Photoshop from English Champs 2011

[PCOLUMNS width=window nogutter]
[PI=8662315][/PI]
[SPLIT span=2]
[PI=5084069][/PI]
[/PCOLUMNS]



If you want gutters, having landscape and portrait photos match up is a little more complicated because of the fixed width of the gutters. I've added a clipHeightBy attribute to images which will remove a fixed number of pixels from the bottom of an image so you can get everything to match up perfectly. You might just have to play around with different values until the columns are aligned.


[PCOLUMNS width=media]
[PI=9668358 clipHeightBy=16px][/PI]
[SPLIT span=2]
[PI=5320013][/PI]
[/PCOLUMNS]



Works on window width columns as well...

cork flip with a gopro hero 2

[PCOLUMNS width=window]
[PI=5990368 clipHeightBy=16px][/PI]
[SPLIT span=2]
[PI=8969998][/PI]
[/PCOLUMNS]



And other numbers of columns...

Riding on the Orbea Occam 29er on the Basque Coast at sunset. There is something really special about riding your bike by yourself on this wild coastline as the sun slowly sinks below the horizon. After this photo I packed the camera away put on my head light and ride for about an hour along the coast back to where my van was. Happy days

A photo from a recent trip to check out some new trails for our Backcountry Pyrenees holidays. This was the start of a very technical 1200m descent that left us gasping for a cool Pyrenees beer http www.basqueMTB.com http instagram.com basquemtb
Riding El Cerro a trail I built last winter but haven t had a chance to show to Ed until now.

[PCOLUMNS width=window]
[PI=5348240][/PI]
[SPLIT]
[PI=10550097 clipHeightBy=16px][/PI]
[SPLIT span=2]
[PI=5620041][/PI]
[/PCOLUMNS]

[PCOLUMNS width=window lastColumnSpan=2]
[PI=11363761 clipHeightBy=16px][/PI]
[SPLIT span=2]
[PI=5713556][/PI]
[SPLIT]
[PI=11701729 clipHeightBy=16px][/PI]
[/PCOLUMNS]



Putting it all together...

Squeezing the last of the light out of the shorter autumn days. Chasing Ed down this ridgeline to the sea as the sun sets in front of us and the storm comes in from the south.

Claude Monet style
Tabletop - Photo Louis Lhomel

[PCOLUMNS width=window]
[PI=5763293][/PI]
[SPLIT]
[PI=11703226 clipHeightBy=16px][/PI]
[SPLIT span=2]
[PI=5775532][/PI]
[/PCOLUMNS]

[PCOLUMNS width=window]
[PI=8846606][/PI]
[SPLIT]
[PI=7417397 clipHeightBy=16px cropHeightBy=2.4009%][/PI]
[SPLIT span=2]
[PI=5785495 cropHeightBy=2.4009%][/PI]
[/PCOLUMNS]



Some more examples...




[PCOLUMNS width=media]
[PI=5992746][/PI]
[SPLIT]
[PI=6023136][/PI]
[SPLIT]
[PI=6042605][/PI]
[/PCOLUMNS]

[PCOLUMNS width=media]
[PI=6051984][/PI]
[SPLIT]
[PI=6060375][/PI]
[SPLIT]
[PI=6088926][/PI]
[/PCOLUMNS]

[PCOLUMNS width=media]
[PI=6093420][/PI]
[SPLIT]
[PI=6111405][/PI]
[SPLIT]
[PI=6136180][/PI]
[/PCOLUMNS]





Sections

You can change the full-width background of your article using the PSECTION tag. In fact, I've been using it throughout this guide to mark the different sections.

It looks like this:

[PSECTION background=#ccc]

You don't need to close it or anything, just throw that in to change the color.

To reset back to the default color, just don't specify a color:

[PSECTION]

If you need to change the color for a dark background, use the color attribute...

[PSECTION color=white]





Empty lines at beginning and end of article

Empty lines at the beginning or end of an article (maybe in an attempt at giving an article some breathing room) are gobbled up by the processor. To fix this, just put an empty FONT tag at the end or beginning of your article before or after your new lines.






25 Comments

  • + 22
 If you'd like to be notified of updates to this page, reply to this comment. When I add new features or update the documentation substantially, I'll comment here, and you should get a notification on your dashboard.
  • + 1
 Yes, please.
  • + 1
 Yes, please. Thanks!
  • + 1
 yes please!
  • + 1
 Thanks!!!
  • + 1
 Yes, please!
  • + 1
 thanks!
  • + 1
 Subscribed
  • + 1
 Yes Please
  • + 1
 Yes Please
  • + 1
 YES PLEASE
  • + 1
 Is it PBCOLUMNS or PCOLUMNS? (text vs example)
  • + 1
 Subscribed
  • + 1
 I want in...
  • + 1
 Me, please
  • + 1
 Just added documentation for the ability to do more than two columns: www.pinkbike.com/u/bentomas/blog/article-formatting.html#more-than-two-columns
  • + 1
 @bentomas: That's rad. Can you please confirm if we can still use the align=middle attribute with the multi-column functionally for centering captions / text etc?
  • + 1
 @cameronmackenzie: I haven't touched the code for the captions, so they should work exactly as they did before.
  • + 3
 How can I do my blog occupy all the width of the window? Can't find how to do it.
  • + 1
 Is there a way to preview a blog to see how it has turned out without actually publishing it yet? I'm in need of that since I'm a HTML newb. I'm guessing it's maybe the 'Private Blog' option? Hope to hear, thanks!
  • + 1
 Yes please!
  • + 1
 I'm in!
  • + 1
 Subscribed for updates
  • + 1
 If you want updates to this post, you need to comment on the first comment sorted by score. The Pinkbike commenting system only notifies of replies.

Post a Comment



You must login to Pinkbike.
Don't have an account? Sign up

Join Pinkbike  Login
Copyright © 2000 - 2018. Pinkbike.com. All rights reserved.
dv65 0.083458
Mobile Version of Website