Typography

This page represents typographical aspects of this theme. Take care about your typography to make better user experience for your readers. How to achieve that?

  • Learn more about typography, escpecially about the most often used codes, such as <p>, <h1>, <h2>, <h3>, <img> and <a>.
  • This theme has valid XHTML, but if you want to keep it like that, you must learn and follow the XHTML principles. Also, if some of your plugins are not XHTML valid, pages based on this plugin would not be XHTML valid as well (no matter if template itself is valid).
  • Familiarize yourself with CSS styles that comes with this template.
  • Never copy/paste directly from layout text editors, such as Microsoft Word or OpenOffice. Try to paste text in plain editors first (such as Notepad).
  • Use a WYSIWYG editor that comes with WordPress or install a better editor, but always check your code in the editor’s HTML mode.

All typographic elements listed on this page are available through shortcodes that will be incorporated in the WordPress text editor (TinyMCE) after theme installation.

 

Headings and Paragraphs:

Heading One

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

Heading Two

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

Heading Three

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

Heading Four

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

 

Text highlighted with color marker:

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, at accusam aliquyam diam dolore dolores duo eirmod eos erat, et nonumy sed tempor et et invidunt justo labore stet clita ea et gubergren, kasd magna no rebum. sanctus sea sed takimata ut vero voluptua. est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr.

 

Text Blocks:

Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.
Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.
Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.
Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.
Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.

 

Paragraphs Marked with a Number/Letter:

Aorem ipsum dolor sit amet, consetetur sadipscing elitr orem ipsum dolor sit amet, consetetur sadipscing elitr orem ipsum dolor sit amet, consetetur sadipscing elitr. Nam liber tempor cum soluta nobis eleifend option congue nihil. Consetetur sadipscing elitr orem ipsum dolor sit amet, consetetur sadipscing elitr. Nam liber tempor cum soluta nobis eleifend option congue nihil.

Borem ipsum dolor sit amet, consetetur sadipscing elitr orem ipsum dolor sit amet, consetetur sadipscing elitr orem ipsum dolor sit amet, consetetur sadipscing elitr. Nam liber tempor cum soluta nobis eleifend option congue nihil. Consetetur sadipscing elitr orem ipsum dolor sit amet, consetetur sadipscing elitr. Nam liber tempor cum soluta nobis eleifend option congue nihil.

1Lorem ipsum dolor sit amet, consetetur sadipscing elitr orem ipsum dolor sit amet, consetetur sadipscing elitr orem ipsum dolor sit amet, consetetur sadipscing elitr. Nam liber tempor cum soluta nobis eleifend option congue nihil. Consetetur sadipscing elitr orem ipsum dolor sit amet, consetetur sadipscing elitr. Nam liber tempor cum soluta nobis eleifend option congue nihil.

2Lorem ipsum dolor sit amet, consetetur sadipscing elitr orem ipsum dolor sit amet, consetetur sadipscing elitr orem ipsum dolor sit amet, consetetur sadipscing elitr. Nam liber tempor cum soluta nobis eleifend option congue nihil. Consetetur sadipscing elitr orem ipsum dolor sit amet, consetetur sadipscing elitr. Nam liber tempor cum soluta nobis eleifend option congue nihil.

 

Unordered and Ordered Lists

Classic unordered list:

  • List element one
  • List element two
  • List element three

Arrow list:

  • List element one
  • List element two
  • List element three

Left arrow list:

  • List element one
  • List element two
  • List element three

Calendar list:

  • List element one
  • List element two
  • List element three

Checklist:

  • List element one
  • List element two
  • List element three

Deleted items list:

  • List element one
  • List element two
  • List element three

E-mails list:

Files list:

  • List element one
  • List element two
  • List element three

Heart list:

  • List element one
  • List element two
  • List element three

Information list:

  • List element one
  • List element two
  • List element three

Locked items list:

  • List element one
  • List element two
  • List element three

Pencil list:

  • List element one
  • List element two
  • List element three

List of persons:

  • List element one
  • List element two
  • List element three

RSS links list:

  • List element one
  • List element two
  • List element three

Shopping items list:

  • List element one
  • List element two
  • List element three

Songs playlist:

  • List element one
  • List element two
  • List element three

Yellow stars list:

  • List element one
  • List element two
  • List element three

White stars list:

  • List element one
  • List element two
  • List element three

Trashed items list:

  • List element one
  • List element two
  • List element three

Tweaks list:

  • List element one
  • List element two
  • List element three

Unlocked items list:

  • List element one
  • List element two
  • List element three

Warning list:

  • List element one
  • List element two
  • List element three

 

Inset Styles:

Block TitleDuis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisi.To make such block of text, wrap it into a span with a class of inset-left. Optionally, inside this span you can add another span with class of inset_title for title. Here’s an example: <span class=”inset_left”><span class=”inset_title”>Title</span>…your text goes here…</span>. In a similar way, you can align the block of text to the right. Use inset_right, instead of inset_left. Block TitleDuis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisi. If you need to change width or something else in those blocks, you can edit classes .inset_left and .inset_right in CSS stylesheet template_css.css.

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisi. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisi.

 

Buttons:

Button text   Button text   Button text   Button text   Button text   Button text   Button text   Button text   Button text   Button text   Button text   Button text   Button text   Button text   Button text

Button text   Button text   Button text   Button text   Button text   Button text   Button text   Button text   Button text   Button text   Button text   Button text   Button text   Button text   Button text

Button text   Button text   Button text   Button text   Button text   Button text   Button text   Button text   Button text   Button text   Button text   Button text   Button text   Button text   Button text

 

Image with caption:

hot bokeh

This is a sample caption text.

A Story Behind Us

Ten years ago when monitors usually had resolution about just 1000 pixels wide, talking about full screen websites didn't make sense. However, these days when we use at least HD resolution (1920 pixels wide or more), websites based on regular width of about 960 pixels looks somehow small, shy and frugally on our screens. Hot Bokeh theme is based on design for which we believe that looks nice on all screen sizes, including the largest ones. Beside the features explained so far, Hot Bokeh theme also has many other advantages.

List of Services

  • Full Company Branding
  • Online Presence
  • Mobile Design & Development
  • Marketing Tools
  • Web Design & Development

What's hot in our company


A Sample Featured Text

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin semper mi in lacus pulvinar sagittis. Nulla placerat laoreet fermentum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin semper mi in lacus pulvinar sagittis. Nulla placerat laoreet.

Read more…

twitterfacebookpinterest

Newsletter

 

Get In Touch

Toll Free: 0800 1234 5678
office@thecompany.com
3335 Joomla Hwy, New Heaven