Text styles

This post demonstrates the variable text elements and styles supported in The Columnist WordPress theme. You will notice a lot of new styles here — giving you the power to build your posts with interesting layouts.

Each of the elements and styles are achieved using classes and shortcodes which are all entered within the post-editor. You will see how to use the examples below using the class-name or shortcode function.

Header one

Header two

Header three

Header four

Header five
Header six

Text Columns

Donec volutpat est non felis molestie sagittis. Morbi diam risus, sagittis in elit vitae, ultricies interdum augue. Vivamus molestie vestibulum tincidunt. In suscipit, sem eget tincidunt interdum, massa libero sodales urna, eu interdum mauris tellus non arcu. Praesent metus enim, sollicitudin eu vestibulum eu, porta nec purus.

This paragraph has the class "text-2-col" to split the text over two columns. People think focus means saying yes to the thing you’ve got to focus on. But that’s not what it means at all. It means saying no to the hundred other good ideas that there are. You have to pick carefully. People think focus means saying yes to the thing you’ve got to focus on. But that’s not what it means at all. It means saying no to the hundred other good ideas that there are. You have to pick carefully.

Similar to the above paragraph, this text has the class "text-3-col". People think focus means saying yes to the thing you’ve got to focus on. But that’s not what it means at all. It means saying no to the hundred other good ideas that there are. You have to pick carefully. People think focus means saying yes to the thing you’ve got to focus on. But that’s not what it means at all. It means saying no to the hundred other good ideas that there are. You have to pick carefully.

Guess what, if you add the class "text-4-col" to any paragraph text, you will get four columns. People think focus means saying yes to the thing you’ve got to focus on. But that’s not what it means at all. It means saying no to the hundred other good ideas that there are. You have to pick carefully. People think focus means saying yes to the thing you’ve got to focus on. But that’s not what it means at all. It means saying no to the hundred other good ideas that there are. You have to pick carefully.


Blockquotes

Single line blockquote, your basic blockquote entry:

Stay hungry. Stay foolish.

Below is a multi line blockquote with a cite reference. It uses the class "pull-left" to utilise the indented column structure. Great for emphasising a specific quote. Quis massa, augue et pulvinar porta. Integer habitasse hac sed purus ut magna, ultrices, nisi risus porttitor cum aliquet aliquam.

People think focus means saying yes to the thing you’ve got to focus on. But that’s not what it means at all. It means saying no to the hundred other good ideas that there are. You have to pick carefully. Steve Jobs

New York is the most populous city in the United States and the center of one of the most populous urban agglomerations in the world—the New York metropolitan area. The city is referred to as New York City or the City of New York to distinguish it from the State of New York, of which it is a part. A global power city, New York exerts a significant impact upon commerce, finance, media, art, fashion, research, technology, education, and entertainment. The home of the United Nations Headquarters, New York is an important center for international diplomacy and has been described as the cultural and financial capital of the world. On one of the world’s largest natural harbors, New York City consists of five boroughs, each of which is a county of New York State. The five boroughs—the Bronx, Brooklyn, Manhattan, Queens, and Staten Island—were consolidated into a single city in 1898.

People think focus means saying yes to the thing you’ve got to focus on. But that’s not what it means at all. It means saying no to the hundred other good ideas that there are. You have to pick carefully. People think focus means saying yes to the thing you’ve got to focus on. But that’s not what it means at all. It means saying no to the hundred other good ideas that there are. You have to pick carefully.

People think focus means saying yes to the thing you’ve got to focus on. But that’s not what it means at all. It means saying no to the hundred other good ideas that there are. You have to pick carefully. I’m actually as proud of the things we haven’t done as the things I have done. Innovation is saying no to 1,000 things. Steve Jobs – Apple Worldwide Developers’ Conference, 1997

You can also create a right aligned blockquote using the class "pull-right". Lectus phasellus urna aenean velit porttitor phasellus aenean porta lacus sagittis adipiscing in ut amet, pellentesque, vel? Vut dignissim, proin, cras diam, scelerisque aenean cras sed, pulvinar turpis? Enim in nascetur. Proin? A placerat lacus diam penatibus! Mus lorem lorem nisi vel habitasse montes! Lacus platea. Natoque sed montes. Nisi duis mus tincidunt ultrices sociis habitasse mid. Ut dis, pulvinar lorem sociis et. Rhoncus et placerat integer enim porttitor magna rhoncus! Placerat scelerisque pulvinar quis in a hac tincidunt hac turpis risus? Dictumst, in aliquet porta, odio. People think focus means saying yes to the thing you’ve got to focus on. But that’s not what it means at all. It means saying no to the hundred other good ideas that there are. You have to pick carefully. People think focus means saying yes to the thing you’ve got to focus on. But that’s not what it means at all. It means saying no to the hundred other good ideas that there are. You have to pick carefully.

People think focus means saying yes to the thing you’ve got to focus on. But that’s not what it means at all. It means saying no to the hundred other good ideas that there are. You have to pick carefully. I’m actually as proud of the things we haven’t done as the things I have done. Innovation is saying no to 1,000 things. Steve Jobs – Apple Worldwide Developers’ Conference, 1997

The above blockquote looks great for longer quotes. It uses two classes "pull-left" and "full-width" to display like this. People think focus means saying yes to the thing you’ve got to focus on. But that’s not what it means at all. It means saying no to the hundred other good ideas that there are. You have to pick carefully. People think focus means saying yes to the thing you’ve got to focus on. But that’s not what it means at all. It means saying no to the hundred other good ideas that there are. You have to pick carefully.


Tables

Employee Salary
John Doe $1 Because that’s all Steve Jobs needed for a salary.
Jane Doe $100K For all the blogging she does.
Fred Bloggs $100M Pictures are worth a thousand words, right? So Jane x 1,000.
Jane Bloggs $100B With hair like that?! Enough said…

Nisi duis mus tincidunt ultrices sociis habitasse mid. Ut dis, pulvinar lorem sociis et. Rhoncus et placerat integer enim porttitor magna rhoncus! Placerat scelerisque pulvinar quis in a hac tincidunt hac turpis risus? Dictumst, in aliquet porta, odio. People think focus means saying yes to the thing you’ve got to focus on. But that’s not what it means at all. It means saying no to the hundred other good ideas that there are.


Definition Lists

Definition List Title
Definition list division.
Startup
A startup company or startup is a company or temporary organization designed to search for a repeatable and scalable business model.
#dowork
Coined by Rob Dyrdek and his personal body guard Christopher “Big Black” Boykins, “Do Work” works as a self motivator, to motivating your friends.
Do It Live
I’ll let Bill O’Reilly will explain this one.

Unordered Lists

  • List item one
    • List item one
      • List item one
      • List item two
      • List item three
      • List item four
    • List item two
    • List item three
    • List item four
  • List item two
  • List item three
  • List item four

Ordered List

  1. List item one
    1. List item one
      1. List item one
      2. List item two
      3. List item three
      4. List item four
    2. List item two
    3. List item three
    4. List item four
  2. List item two
  3. List item three
  4. List item four

Grids — Using Classes

These few examples show how various classes can be used to display content in columns formations. Each element has the first class of "column" and is then combined with "grid-*-col" and "span-*-col" to dictate column count and widths.

New York traces its roots to its 1624 founding as a trading post by colonists of the Dutch Republic and was named New Amsterdam in 1626. The city and its surroundings came under English control in 1664.

Many districts and landmarks in New York City have become well known to the city’s approximately 55 million annual visitors. Times Square, iconified as “The Crossroads of the World”, is the brightly illuminated hub of the Broadway Theater District, one of the world’s busiest pedestrian intersections, and a major center of the world’s entertainment industry.The names of many of the city’s bridges, skyscrapers, and parks are known around the world.

People think focus means saying yes to the thing you’ve got to focus on. But that’s not what it means at all. It means saying no to the hundred other good ideas that there are. You have to pick carefully. People think focus means saying yes to the thing you’ve got to focus on. But that’s not what it means at all. It means saying no to the hundred other good ideas that there are. You have to pick carefully.

People think focus means saying yes to the thing you’ve got to focus on. But that’s not what it means at all. It means saying no to the hundred other good ideas that there are. You have to pick carefully.

People think focus means saying yes to the thing you’ve got to focus on. But that’s not what it means at all. It means saying no to the hundred other good ideas that there are. You have to pick carefully.


Grids — Using Shortcodes

Shortcodes are a powerful method of creating and controlling content within the post. The next few examples use the "grid" and "column" shortcodes to create interesting grid layouts. These shortcodes have been exclusively created for The Columnist.

New York traces its roots to its 1624 founding as a trading post by colonists of the Dutch Republic and was named New Amsterdam in 1626. The city and its surroundings came under English control in 1664. New York served as the capital of the United States from 1785 until 1790. It has been the country’s largest city since 1790.

People think focus means saying yes to the thing you’ve got to focus on. But that’s not what it means at all. It means saying no to the hundred other good ideas that there are. You have to pick carefully. People think focus means saying yes to the thing you’ve got to focus on. But that’s not what it means at all.

Many districts and landmarks in New York City have become well known to the city’s approximately 55 million annual visitors. Times Square, iconified as “The Crossroads of the World”, is the brightly illuminated hub of the Broadway Theater District, one of the world’s busiest pedestrian intersections, and a major center of the world’s entertainment industry.

You can style text like this using the class "text-note". Many districts and landmarks in New York City have become well known to the city’s approximately 55 million annual visitors.

People think focus means saying yes to the thing you’ve got to focus on. But that’s not what it means at all. It means saying no to the hundred other good ideas that there are. You have to pick carefully. People think focus means saying yes to the thing you’ve got to focus on. But that’s not what it means at all. It means saying no to the hundred other good ideas that there are. You have to pick carefully.

column

People think focus means saying yes to the thing you’ve got to focus on. But that’s not what it means at all. It means saying no to the hundred other good ideas that there are. You have to pick carefully. People think focus means saying yes to the thing you’ve got to focus on. But that’s not what it means at all. It means saying no to the hundred other good ideas that there are. You have to pick carefully.

New York City

Mauris dignissim condimentum posuere. Fusce mattis adipiscing nisi. Maecenas consectetur, diam et tempus fringilla, dolor orci facilisis nunc, et adipiscing dui augue quis mauris. Phasellus sollicitudin ante scelerisque dui luctus porta. Fusce commodo et adipiscing dui augue quis tristique fermentum.

The Streets

People think focus means saying yes to the thing you’ve got to focus on. But that’s not what it means at all. It means saying no to the hundred other good ideas that there are. You have to pick carefully. People think focus means saying yes to the thing you’ve got to focus on. But that’s not what it means at all. It means saying no to the hundred other good ideas that there are. You have to pick carefully.

d698de19d6250998b8b2c740cfd96954

People think focus means saying yes to the thing you’ve got to focus on. But that’s not what it means at all. It means saying no to the hundred other good ideas that there are. You have to pick carefully. People think focus means saying yes to the thing you’ve got to focus on. But that’s not what it means at all. It means saying no to the hundred other good ideas that there are. You have to pick carefully.


HTML Tags

These supported tags come from the WordPress.com code FAQ.

Address Tag
1 Infinite Loop
Cupertino, CA 95014
United States

Anchor Tag (aka. Link)

This is an example of a link.

Abbreviation Tag

The abbreviation srsly stands for “seriously”.

Acronym Tag (deprecated in HTML5)

The acronym ftw stands for “for the win”.

Big Tag (deprecated in HTML5)

These tests are a big deal, but this tag is no longer supported in HTML5.

Cite Tag

“Code is poetry.” –Automattic

Code Tag

You will learn later on in these tests that word-wrap: break-word; will be your best friend.

Delete Tag

This tag will let you strikeout text, but this tag is no longer supported in HTML5 (use the <strike> instead).

Emphasize Tag

The emphasize tag should italicize text.

Insert Tag

This tag should denote inserted text.

Keyboard Tag

This scarsly known tag emulates keyboard text, which is usually styled like the <code> tag.

Preformatted Tag

This tag styles large blocks of code.

.post-title {
	margin: 0 0 5px;
	font-weight: bold;
	font-size: 38px;
	line-height: 1.2;
	and here's a line of some really, really, really, really long text, just to see how the PRE tag handles it and to find out how it overflows;
}

Quote Tag

Developers, developers, developers… –Steve Ballmer

Strike Tag (deprecated in HTML5)

This tag shows strike-through text

Strong Tag

This tag shows bold text.

Subscript Tag

Getting our science styling on with H2O, which should push the “2″ down.

Superscript Tag

Still sticking with science and Isaac Newton’s E = MC2, which should lift the 2 up.

Teletype Tag (deprecated in HTML5)

This rarely used tag emulates teletype text, which is usually styled like the <code> tag.

Variable Tag

This allows you to denote variables.

People think focus means saying yes to the thing you’ve got to focus on. But that’s not what it means at all. It means saying no to the hundred other.

9 Comments

  1. [...] You can easily insert images into your posts by using the regular "" tag. Your image is automatically re-sized in relation to the column structure in use. To learn more about defining the post column structure you can check out the ‘Text style’ post. [...]

  2. Hi, I’m from Spain, sorry for my bad english. Great theme!!!! It is possible to have the theme centered, no left aligned?