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 just 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. 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...

Stephen Matthews rides through foggy mordor like trees on sumas
Brett Rheeder jumps the lower road gap and into the final jump. Mountains giving a not too terrible backdrop in Les 2 Alps.

[PCOLUMNS]
[PI=9845802][/PI]
[SPLIT]
[PI=9829837][/PI]
[/PCOLUMNS]



Or an image with some text...

Brett Rheeder jumps the lower road gap and into the final jump. Mountains giving a not too terrible backdrop in Les 2 Alps.
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=9829837][/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...

Brett Rheeder jumps the lower road gap and into the final jump. Mountains giving a not too terrible backdrop in Les 2 Alps.
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=9829837 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...

Brett Rheeder jumps the lower road gap and into the final jump. Mountains giving a not too terrible backdrop in Les 2 Alps.
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=9829837 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...

Brett Rheeder jumps the lower road gap and into the final jump. Mountains giving a not too terrible backdrop in Les 2 Alps.
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=9829837 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...

Stephen Matthews rides through foggy mordor like trees on sumas
Brett Rheeder jumps the lower road gap and into the final jump. Mountains giving a not too terrible backdrop in Les 2 Alps.

[PCOLUMNS nogutter]
[PI=9845802][/PI]
[SPLIT]
[PI=9829837][/PI]
[/PCOLUMNS]



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

Stephen Matthews rides through foggy mordor like trees on sumas
Brett Rheeder jumps the lower road gap and into the final jump. Mountains giving a not too terrible backdrop in Les 2 Alps.

[PCOLUMNS]
[PI=9845802 width=window][/PI]
[SPLIT]
[PI=9829837 width=window][/PI]
[/PCOLUMNS]



Specify no gutter if you want them to touch

Stephen Matthews rides through foggy mordor like trees on sumas
Brett Rheeder jumps the lower road gap and into the final jump. Mountains giving a not too terrible backdrop in Les 2 Alps.

[PCOLUMNS nogutter]
[PI=9845802 width=window][/PI]
[SPLIT]
[PI=9829837 width=window][/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.






18 Comments

  • + 21
 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)
  • + 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.
dv56 0.050732
Mobile Version of Website