This is a single page for all of the basic Typography features of the Joomlashine templates. When a section gets big enought it will be moved to it's own page and that is why you might not see it here.
Table
This is a full and correct example of a Joomlashine table with a coloured header and odd rows coloured. There is an even class for rows but I prefer just to have the odd rows coloured and then I have centered the table to make it look nice. Joomlashine templates offer several table stylings that can be easily changed, this is but one of them but the basic cade apart from a few CSS classes is the same.
| Monday | Tuesday | Wednesday | Thursday | Friday | Sat - Sun | ||
|---|---|---|---|---|---|---|---|
| Guide Only | All Prices in £ | ||||||
| Arwen | 280 | 375 | 240 | 240 | 460 | 665 | |
| Croglin | 270 | 360 | 230 | 230 | 430 | 630 | |
| Evelyn | 170 | 225 | 140 | 140 | 270 | 420 | |
| Gwendoline | 180 | 240 | 150 | 150 | 290 | 455 | |
| Ruby | 150 | 195 | 130 | 130 | 220 | 350 | |
<table border="1" class="table-style style-colorheader" style="margin: auto auto;" cellspacing="0" cellpadding="0"> <thead> <tr> <th style="text-align: center;" width="81"> </th> <th style="text-align: center;" width="81">Monday</th> <th style="text-align: center;" width="81">Tuesday</th> <th style="text-align: center;" width="81">Wednesday</th> <th style="text-align: center;" width="81">Thursday</th> <th style="text-align: center;" width="81">Friday</th> <th style="text-align: center;" width="81">Sat - Sun</th> </tr> </thead> <tfoot> <tr> <th>Guide Only</th> <td colspan="7">All Prices in £</td> </tr> </tfoot> <tbody> <tr> <th style="text-align: center;" width="81">Arwen</th> <td style="text-align: center;" width="81">280</td> <td style="text-align: center;" width="81">375</td> <td style="text-align: center;" width="81">240</td> <td style="text-align: center;" width="81">240</td> <td style="text-align: center;" width="81">460</td> <td style="text-align: center;" width="81">665</td> </tr> <tr class="odd"> <th style="text-align: center;" width="81">Croglin</th> <td style="text-align: center;" width="81">270</td> <td style="text-align: center;" width="81">360</td> <td style="text-align: center;" width="81">230</td> <td style="text-align: center;" width="81">230</td> <td style="text-align: center;" width="81">430</td> <td style="text-align: center;" width="81">630</td> </tr> <tr> <th style="text-align: center;" width="81">Evelyn</th> <td style="text-align: center;" width="81">170</td> <td style="text-align: center;" width="81">225</td> <td style="text-align: center;" width="81">140</td> <td style="text-align: center;" width="81">140</td> <td style="text-align: center;" width="81">270</td> <td style="text-align: center;" width="81">420</td> </tr> <tr class="odd"> <th style="text-align: center;" width="81">Gwendoline</th> <td style="text-align: center;" width="81">180</td> <td style="text-align: center;" width="81">240</td> <td style="text-align: center;" width="81">150</td> <td style="text-align: center;" width="81">150</td> <td style="text-align: center;" width="81">290</td> <td style="text-align: center;" width="81">455</td> </tr> <tr> <th style="text-align: center;" width="81">Ruby</th> <td style="text-align: center;" width="81">150</td> <td style="text-align: center;" width="81">195</td> <td style="text-align: center;" width="81">130</td> <td style="text-align: center;" width="81">130</td> <td style="text-align: center;" width="81">220</td> <td style="text-align: center;" width="81">350</td> </tr> </tbody> </table>
Content Columns / Grid Colum Layout
This is the syntax for using Joomlashines inbuilt column system. You can set as many columns as you want.
Lorem ipsum dolor sit amet, cu ferri aperiri mea, omittantur reformidans neglegentur ius te. Melius percipit expetendis duo at, molestie scaevola at mei. Ad sed nibh solum definitionem, ubique percipit democritum nec ei, corrumpit hendrerit ad eum. Est te omnium virtute inimicus, eum te atqui tacimates pertinacia.
Lorem ipsum dolor sit amet, cu ferri aperiri mea, omittantur reformidans neglegentur ius te. Melius percipit expetendis duo at, molestie scaevola at mei. Ad sed nibh solum definitionem, ubique percipit democritum nec ei, corrumpit hendrerit ad eum. Est te omnium virtute inimicus, eum te atqui tacimates pertinacia.
Lorem ipsum dolor sit amet, cu ferri aperiri mea, omittantur reformidans neglegentur ius te. Melius percipit expetendis duo at, molestie scaevola at mei. Ad sed nibh solum definitionem, ubique percipit democritum nec ei, corrumpit hendrerit ad eum. Est te omnium virtute inimicus, eum te atqui tacimates pertinacia.
<div class="grid-layout"> <div>Text in column 1</div> <div>Text in column 2</div> <div>Text in column 3</div> </div>
Blockquotes
Blockquote 1
This is a nice Blockquote from JSN Air
Every company should be this way
Outstanding Products, Outstanding Support, Outstanding Business Ethics...Every company should follow these guys. WELL WORTH THE MONEY!
Bob Stevenson
CSS
.testimonials {
font-family:Georgia, "Times New Roman", Times, serif;
font-style:italic;
font-size:12px;
color:#898989;
}
HTML
<div> <h4>Every company should be this way</h4> <blockquote> <p class="testimonials">Outstanding Products, Outstanding Support, Outstanding Business Ethics...Every company should follow these guys. WELL WORTH THE MONEY!</p> <p><strong>Bob Stevenson</strong></p> </blockquote> </div>
Blockquote 2
Super Gallery
Super gallery! I really like it right from first few minutes when i download it. Excellent documentation with great visualisation. Didn't get a chance to contact to support bec. everything clear and working smooth! Thank you guys!
samed1978,
HTML
<blockquote> <h4>Super Gallery</h4> <p>Super gallery! I really like it right from first few minutes when i download it. Excellent documentation with great visualisation. Didn't get a chance to contact to support bec. everything clear and working smooth! Thank you guys!</p> <p>samed1978,</p> <p><a href="http://quantumwarp.com/" target="_blank">Review from JED</a></p> </blockquote>