JV Achelo is the best choice for any type of website

Ultimate content styling (Heading 1)

Text styling (Heading 2)

Text columns division (Heading 3)

it's pretty common situation when you need to arrange your content in multiple columns. The easiest way is to create a table and insert content text there, but it's not the best method. Your content will not accessible to search engine and screen reader. JV Achelo enable you accessible method to create multiple column content.

Content arranged in 2 columns (Heading 4)

Example: <div class=”grid2”><div class=”grid-col”>…</div><div class=”grid-col grid-lastcol”>…</div></div>

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam nec odio. Vivamus turpis metus, feugiat sit amet, pulvinar sed, tincidunt sit amet, massa.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam nec odio. Vivamus turpis metus, feugiat sit amet, pulvinar sed, tincidunt sit amet, massa.

Content arranged in 3 columns

Example: <div class=”grid3”><div class=”grid-col”>…</div>...<div class=”grid-col grid-lastcol”>…</div></div>

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam nec odio. Vivamus turpis metus, feugiat sit amet, pulvinar sed, tincidunt sit amet, massa.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam nec odio. Vivamus turpis metus, feugiat sit amet, pulvinar sed, tincidunt sit amet, massa.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam nec odio. Vivamus turpis metus, feugiat sit amet, pulvinar sed, tincidunt sit amet, massa.

Content arranged in 4 columns

Example: <div class=”grid4”><div class=”grid-col”>…</div>...<div class=”grid-col grid-lastcol”>…</div></div>

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam nec odio.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam nec odio.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam nec odio.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam nec odio.

Standard text styles

Preformatted text

This is styling for preformatted text enclosed in tag <pre>.
You can use this style to present text with preserved spaces and line break.
a.readon {
color: #404040;
}

Quote text

This is styling for quote text enclosed in tag <blockquote>. You can use this style to quote somebody’s speech, idea, etc. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Drop cap symbol

This is special drop cap symbol styling for magazine / newspaper text paragraph.

Example: <p class="dropcap">This is the text with dropcap symbol </p>.

Highlighted text

This is styling for highlighted information and keyword expression in search result page. Example: <span class="highlight">Text to be highlighted </span>.

Advanced text styles

Alert text

This is styling for alert or warning text paragraph requiring user's attention. Example: <p class="alert">Alert text</p>. You can use tag <div> instead of tag <p>.

Info text

This is styling for regular information text paragraph. Example: <p class="info">Information text</p>. You can use tag <div> instead of tag <p> as well.

Download text

This is styling for download information text paragraph. Example: <p class="download">Download information text</p>. You can use tag <div> instead of tag <p> as well.

Tip text

This is styling for useful information like tips, hint or help text paragraph. Example: <p class="tip">Tip text</p>. You can use tag <div> instead of tag <p> as well.

Comment text

This is styling for comment text paragraph. Example: <p class="comment">Comment text </p>. You can use tag <div> instead of tag <p> as well.

Attachment text

This is styling for attachment information text paragraph. Example: <p class="attachment">Attachment text </p>. You can use tag <div> instead of tag <p> as well.

Link styling

Iconize links

This is one more very cool and unique feature of JV Achelo – link’s destination analyzer and automatic icon assignment. This feature utilizes modern CSS2 specification and allows you to have links with meaningful icons assigned without any modification in XHTML code.

Iconize links based on file extension

JV Achelo is able to detect links to various popular file extensions and assign icons accordingly. Currently we supports 34 file types and it is truly amazing.

Iconize links for e-Mail & Messaging URI

JV Achelo can do more than just file extension detection. It can detect protocol type to assign icons to links to instant messengers, email, etc.

  • This e-mail address is being protected from spambots. You need JavaScript enabled to view it
  • Call by Skype link (callto:)
  • MSN Messenger link (msnim:)

Note: This feature works in most browsers except old IE5, IE6. For these cases you can still apply icons to the link you want by specifying appropriate class attribute for the link tag.

Table styling

Tabular data is very common type of information to be presented on the web. By default tables look ugly and not much readable. With JV Achelo you have 3 table styles to present virtually any kind of tabular data you have.

Plain Rows table style

Example: <table class="plainrows"><thead>...</thead><tbody>...</tbody><tfoot>...</tfoot></table>

Table headerColumn header 1Column header 2Column header 3Column header 4Column header 5
Table footerFooter data
Row header 1Lorem ipsumDolor sit ametConsectetuer adipiscingAliquam quis urnaSed felis
Row header 2Nullam nec odioVivamus turpis metusFeugiat sit ametClass aptent Ad litora torquent
Row header 3Pulvinar sedTincidunt sit ametMassaDolor sit ametConsectetuer adipiscing
Row header 4Vivamus turpis metusFeugiat sit ametClass aptent Ad litora torquent Nullam nec odio
Row header 5MassaDolor sit ametTincidunt sit ametPulvinar sedConsectetuer adipiscing

Color Stripes table style

Example: <table class="colorstripes"><thead>...</thead><tbody>...</tbody><tfoot>...</tfoot></table>

Table headerColumn header 1Column header 2Column header 3Column header 4Column header 5
Table footerFooter data
Row header 1Lorem ipsumDolor sit ametConsectetuer adipiscingAliquam quis urnaSed felis
Row header 2Nullam nec odioVivamus turpis metusFeugiat sit ametClass aptent Ad litora torquent
Row header 3Pulvinar sedTincidunt sit ametMassaDolor sit ametConsectetuer adipiscing
Row header 4Vivamus turpis metusFeugiat sit ametClass aptent Ad litora torquent Nullam nec odio
Row header 5MassaDolor sit ametTincidunt sit ametPulvinar sedConsectetuer adipiscing

Grey Stripes table style

Example: <table class="greystripes"><thead>...</thead><tbody>...</tbody><tfoot>...</tfoot></table>

Table headerColumn header 1Column header 2Column header 3Column header 4Column header 5
Table footerFooter data
Row header 1Lorem ipsumDolor sit ametConsectetuer adipiscingAliquam quis urnaSed felis
Row header 2Nullam nec odioVivamus turpis metusFeugiat sit ametClass aptent Ad litora torquent
Row header 3Pulvinar sedTincidunt sit ametMassaDolor sit ametConsectetuer adipiscing
Row header 4Vivamus turpis metusFeugiat sit ametClass aptent Ad litora torquent Nullam nec odio
Row header 5MassaDolor sit ametTincidunt sit ametPulvinar sedConsectetuer adipiscing

Detailed information about how to apply table styles can be found in JV Achelo forums Userguide.

List styling

JV Achelo offers 5 standard and 6 advanced list styles for virtually all kind of information you might want to outline.

Standard List

Unordered list

This is styling for standard unordered list. Example: <ul>...</ul>.

  • Lorem ipsum dolor sit amet
  • Consetetur sadipscing elitr
  • Sed diam voluptua

Ordered list

This is styling for standard ordered list.Example: <ol>...</ol>.

  1. Lorem ipsum dolor sit amet
  2. Consetetur sadipscing elitr
  3. Sed diam voluptua

Arrow List

Red arrow list

This is styling for list with red arrow bullets. Example: <ul class="arrowlist-red">...</ul>.

  • Lorem ipsum dolor sit amet
  • Consetetur sadipscing elitr
  • Sed diam voluptua

Blue arrow list

This is styling for list with blue arrow bullets. Example: <ul class="arrowlist-blue">...</ul>.

  • Lorem ipsum dolor sit amet
  • Consetetur sadipscing elitr
  • Sed diam voluptua

Green arrow list

This is styling for list with green arrow bullets. Example: <ul class="arrowlist-green">...</ul>.

  • Lorem ipsum dolor sit amet
  • Consetetur sadipscing elitr
  • Sed diam voluptua

Icon List

Article icon list

This style is perfect to present a list of articles on your site.
Example: <ul class="iconlist-article">...</ul>.

  • Lorem ipsum dolor sit amet
  • Consetetur sadipscing elitr
  • Sed diam voluptua

Folder icon list

This style is perfect to present a list of resources on your site.
Example: <ul class="iconlist-folder">...</ul>.

  • Lorem ipsum dolor sit amet
  • Consetetur sadipscing elitr
  • Sed diam voluptua

Image icon list

This style is perfect to present a list of photos on your site.
Example: <ul class=" iconlist-image">...</ul>.

  • Lorem ipsum dolor sit amet
  • Consetetur sadipscing elitr
  • Sed diam voluptua