
Isabela Story consectetur adipiscing elit. Nunc ut mi. Sed id turpis a libero malesuada ultrices. Proin ac neque ut leo bibendum luctus
Jonth And Lysa consectetur adipiscing elit. Nunc ut mi. Sed id turpis a libero malesuada ultrices. Proin ac neque ut leo bibendum luctus JV Achelo is the best choice for any type of website
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.
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.
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.
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.
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;
}
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.
This is special drop cap symbol styling for magazine / newspaper text paragraph.
Example: <p class="dropcap">This is the text with dropcap symbol </p>.This is styling for highlighted information and keyword expression in search result page. Example: <span class="highlight">Text to be highlighted </span>.
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>.
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.
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.
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.
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.
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.
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.
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.
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.
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.
Example: <table class="plainrows"><thead>...</thead><tbody>...</tbody><tfoot>...</tfoot></table>
| Table header | Column header 1 | Column header 2 | Column header 3 | Column header 4 | Column header 5 |
|---|---|---|---|---|---|
| Table footer | Footer data | ||||
| Row header 1 | Lorem ipsum | Dolor sit amet | Consectetuer adipiscing | Aliquam quis urna | Sed felis |
| Row header 2 | Nullam nec odio | Vivamus turpis metus | Feugiat sit amet | Class aptent | Ad litora torquent |
| Row header 3 | Pulvinar sed | Tincidunt sit amet | Massa | Dolor sit amet | Consectetuer adipiscing |
| Row header 4 | Vivamus turpis metus | Feugiat sit amet | Class aptent | Ad litora torquent | Nullam nec odio |
| Row header 5 | Massa | Dolor sit amet | Tincidunt sit amet | Pulvinar sed | Consectetuer adipiscing |
Example: <table class="colorstripes"><thead>...</thead><tbody>...</tbody><tfoot>...</tfoot></table>
| Table header | Column header 1 | Column header 2 | Column header 3 | Column header 4 | Column header 5 |
|---|---|---|---|---|---|
| Table footer | Footer data | ||||
| Row header 1 | Lorem ipsum | Dolor sit amet | Consectetuer adipiscing | Aliquam quis urna | Sed felis |
| Row header 2 | Nullam nec odio | Vivamus turpis metus | Feugiat sit amet | Class aptent | Ad litora torquent |
| Row header 3 | Pulvinar sed | Tincidunt sit amet | Massa | Dolor sit amet | Consectetuer adipiscing |
| Row header 4 | Vivamus turpis metus | Feugiat sit amet | Class aptent | Ad litora torquent | Nullam nec odio |
| Row header 5 | Massa | Dolor sit amet | Tincidunt sit amet | Pulvinar sed | Consectetuer adipiscing |
Example: <table class="greystripes"><thead>...</thead><tbody>...</tbody><tfoot>...</tfoot></table>
| Table header | Column header 1 | Column header 2 | Column header 3 | Column header 4 | Column header 5 |
|---|---|---|---|---|---|
| Table footer | Footer data | ||||
| Row header 1 | Lorem ipsum | Dolor sit amet | Consectetuer adipiscing | Aliquam quis urna | Sed felis |
| Row header 2 | Nullam nec odio | Vivamus turpis metus | Feugiat sit amet | Class aptent | Ad litora torquent |
| Row header 3 | Pulvinar sed | Tincidunt sit amet | Massa | Dolor sit amet | Consectetuer adipiscing |
| Row header 4 | Vivamus turpis metus | Feugiat sit amet | Class aptent | Ad litora torquent | Nullam nec odio |
| Row header 5 | Massa | Dolor sit amet | Tincidunt sit amet | Pulvinar sed | Consectetuer adipiscing |
Detailed information about how to apply table styles can be found in JV Achelo forums Userguide.
JV Achelo offers 5 standard and 6 advanced list styles for virtually all kind of information you might want to outline.
This is styling for standard unordered list. Example: <ul>...</ul>.
This is styling for standard ordered list.Example: <ol>...</ol>.
This is styling for list with red arrow bullets. Example: <ul class="arrowlist-red">...</ul>.
This is styling for list with blue arrow bullets. Example: <ul class="arrowlist-blue">...</ul>.
This is styling for list with green arrow bullets. Example: <ul class="arrowlist-green">...</ul>.
This style is perfect to present a list of articles on your site.
Example: <ul class="iconlist-article">...</ul>.
This style is perfect to present a list of resources on your site.
Example: <ul class="iconlist-folder">...</ul>.
This style is perfect to present a list of photos on your site.
Example: <ul class=" iconlist-image">...</ul>.
Nam libero enim, vulputate et, pellentesque a, vulputate quis, quam. Maecenas odio elit, scelerisque sit amet.
Vitae lobortis porttitor, lorem nisi luctus orci, id bibendum eros ante in justo. Class aptent taciti sociosqu.
Cras nec arcu quis sapien condimentum rutrum. Praesent non neque a justo sollicitudin sodales.
Nam libero enim, vulputate et, pellentesque a, vulputate quis, quam. Maecenas odio elit, scelerisque sit amet.
Vitae lobortis porttitor, lorem nisi luctus orci, id bibendum eros ante in justo. Class aptent taciti sociosqu.
Cras nec arcu quis sapien condimentum rutrum. Praesent non neque a justo sollicitudin sodales.