This page presents most of typographical aspects of Yt Framework. Make your readers happy with great Typography and User Experience! Formatted text Heading This is an Heading 1 This is an Heading 2. This is an Heading 3 This is an Heading 4 This is an Heading 5 Dropcap symbol This is special drop cap symbol styling for magazine / newspaper text paragraph. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In tristique sem vel turpis egestas cursus. Vivamus vehicula ligula non orci sollicitudin iaculis in nec enim. Ut eu magna at erat ultricies porta. Quisque vehicula ultrices mauris, ut pellentesque dui fermentum ac. Maecenas condimentum egestas tempor. Morbi bibendum congue purus eu ultrices. Cras pretium commodo velit non convallis. Sed ornare, arcu vitae sagittis elementum, metus lacus pulvinar ligula, non gravida elit sapien vestibulum odio. Pellentesque eget quam lectus, in fermentum urna. Ut libero dui, lobortis eget adipiscing quis, tristique fermentum nunc. Code Below is a sample of pre tag or code class: pre, .code{ background-color: #FFFFDD; border-color: #CCCCCC; border-style: solid; border-width: 1px 1px 1px 5px; font: 1em/1.6 Monaco,Consolas,"Courier News",monospace; padding: 10px 15px; } Blockquote This is a sample Blockquote. LoremLorem ipsum dolor sit amet, consectetur adipiscing elit. Integer semper egestas nunc in volutpat. Fusce adipiscing velit ac eros tempor iaculis. Vivamus vehicula ligula non orci sollicitudin iaculis in nec enim. This is a sample Blockquote. LoremLorem ipsum dolor sit amet, consectetur adipiscing elit. Integer semper egestas nunc in volutpat. Fusce adipiscing velit ac eros tempor iaculis. Vivamus vehicula ligula non orci sollicitudin iaculis in nec enim.! High light This is a highlight phrase. Use class="highlight". Lists Style Ordered List This is a sample Ordered List. Lorem ipsum dolor sit amet consectetur Lorem ipsum dolor sit amet consectetur Un-Ordered List This is a sample Un-Ordered List. Lorem ipsum dolor sit amet consectetur Lorem ipsum dolor sit amet consectetur Definition List This is a sample Definition List. Lorem ipsum dolor sit amet consectetur Lorem ipsum dolor sit amet consectetur Un-Ordered List(arrow, email, star) This is a sample Arrow style. Use <ul class="yt-typo-list list-arrow"><li><span class="icon"> </span>List's content goes here!</li></ul> This is a sample Arrowlist. This is a sample Email style. Use <ul class="yt-typo-list list-email"><li><span class="icon"> </span>List's content goes here!</li></ul> This is a sample Checklist. This is a sample Star style. Use <ul class="yt-typo-list list-star"><li><span class="icon"> </span>List's content goes here!</li></ul> This is a sample Starlist. Un-Ordered List(home, call, check) This is a sample Home style. Use <ul class="yt-typo-list list-home"><li><span class="icon"> </span>List's content goes here!</li></ul> This is a sample Checklist. This is a sample Call style. Use <ul class="yt-typo-list list-cal"><li><span class="icon"> </span>List's content goes here!</li></ul> This is a sample Checklist. This is a sample Check style. Use <ul class="yt-typo-list list-check"><li><span class="icon"> </span>List's content goes here!</li></ul> This is a sample Checklist. Block row 01This is a sample block number. Use <p class="yt-typo-blocknumber"><span class="yt-typo-bignumber-1">01.</span>Your content goes here!</p> to form a block number! 02This is a sample block number. Use <p class="yt-typo-blocknumber"><span class="yt-typo-bignumber-1">02.</span>Your content goes here!</p> to form a block number! 03This is a sample block number. Use <p class="yt-typo-blocknumber"><span class="yt-typo-bignumber-1">03.</span>Your content goes here!</p> to form a block number! 01This is a sample block number. Use <p class="yt-typo-blocknumber"><span class="yt-typo-bignumber-2">01.</span>Your content goes here!</p> to form a block number! 02This is a sample block number. Use <p class="yt-typo-blocknumber"><span class="yt-typo-bignumber-2">02.</span>Your content goes here!</p> to form a block number! 03This is a sample block number. Use <p class="yt-typo-blocknumber"><span class="yt-typo-bignumber-2">03.</span>Your content goes here!</p> to form a block number! 01This is a sample block number. Use <p class="yt-typo-blocknumber"><span class="yt-typo-bignumber-3">01.</span>Your content goes here!</p> to form a block number! 02This is a sample block number. Use <p class="yt-typo-blocknumber"><span class="yt-typo-bignumber-3">02.</span>Your content goes here!</p> to form a block number! 03This is a sample block number. Use <p class="yt-typo-blocknumber"><span class="yt-typo-bignumber-3">03.</span>Your content goes here!</p> to form a block number! Message Boxes & Legend Styles Boxes Style This is a sticky. Use <p class="box-sticky">Your clip note goes here!</p> to create a clip note! This is a download box. Use <p class="box-download">Your download goes here!</p> to create a download box! Legend Style Legend - Style 1 This is a Legend Style 1. Use <div class="yt-typo-legend legend1"> <h3 class="legend-title">Legend - Style 1</h3> text here! </div> to create a Legend Style 1! Legend - Style 2 This is a Legend Style 2. Use <div class="yt-typo-legend legend2"> <h3 class="legend-title">Legend - Style 2</h3> text here! </div> to create a Legend Style 2! Bubbles Bubbles1 This is a sample Bubble. Use <div class="yt-typo-bubble1"> <div> <div> <div> <div> <div> Your Bubble goes here! </div> </div> </div> </div> </div><span class="author">ROUNDED SPEECH BUBBLE </span> ROUNDED SPEECH BUBBLE Bubbles4 This is a sample Bubble. Use <div class="yt-typo-bubble4"> <div> <div> <div> <div> <div> Your Bubble goes here! </div> </div> </div> </div> </div><span class="author">ROUNDED NOTE BUBBLE</span> SQUARE THINKING BUBBLE Bubbles2 This is a sample Bubble. Use <div class="yt-typo-bubble2"> <div> <div> <div> <div> <div> Your Bubble goes here! </div> </div> </div> </div> </div><span class="author">ROUNDED SPEECH BUBBLE</span> SQUARE SPEECH BUBBLE Bubbles3 This is a sample Bubble. Use <div class="yt-typo-bubble3"> <div> <div> <div> <div> <div> Your Bubble goes here! </div> </div> </div> </div> </div><span class="author">ROUNDED NOTE BUBBLE</span> ROUNDED THINKING BUBBLE Form Fieldset Special Fieldset - Style 1 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla dapibus sapien vel mauris viverra quis euismod dui tincidunt. Phasellus laoreet mattis est. Special Fieldset - Style 2 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla dapibus sapien vel mauris viverra quis euismod dui tincidunt. Phasellus laoreet mattis est. Form Elements Sample Input 1 Sample Input 2 Sample Radio Input Sample CheckBox Input Sample Select Field: OptionOption Two Sample Textarea Field: Icons Style Use <p class="error"><span class="icon"> </span>Your message goes here!</p> to make this. Use <p class="message"><span class="icon"> </span>Your message goes here!</p> to make this. Use <p class="tips"><span class="icon"> </span>Your message goes here!</p> to make this. Use <p class="key"><span class="icon"> </span>Your message goes here!</p> to make this. Use <p class="tag"><span class="icon"> </span>Your message goes here!</p> to make this. Use <p class="cart"><span class="icon"> </span>Your message goes here!</p> to make this. Use <p class="doc"><span class="icon"> </span>Your message goes here!</p> to make this. Use <p class="note"><span class="icon"> </span>Your message goes here!</p> to make this. Use <p class="photo"><span class="icon"> </span>Your message goes here!</p> to make this. Use <p class="mobi"><span class="icon"> </span>Your message goes here!</p> to make this. Buttons button style1 This is a sample button style1 with color blue. Use <a class="blue yt-typo-button style1">Button style1</a> to make it Color: blue Button style1 Color: green Button style1 Color: orange Button style1 Color: magenta Button style1 Color: red Button style1 Color: orangellow Button style1 Color: white Button style1 Color: rosy Button style1 Color: pink Button style1 Color: black Button style1 Color: gray Button style1 Color: brown Button style1

This Joomla! template supports a wide variety of module positions which can be archived automatically by the system.The module positions are fully collapsible mean that if there are no modules published in particular position, this module position will disappear and the other modules with take this place. Also you can have 2-Columns layout (content, left or right) Click here to view clearer picture

Images Styling Icons Style Use <p class="error"><span class="icon"> </span>Your message goes here!</p> to make this. Use <p class="message"><span class="icon"> </span>Your message goes here!</p> to make this. Use <p class="tips"><span class="icon"> </span>Your message goes here!</p> to make this. Use <p class="key"><span class="icon"> </span>Your message goes here!</p> to make this. Use <p class="tag"><span class="icon"> </span>Your message goes here!</p> to make this. Use <p class="cart"><span class="icon"> </span>Your message goes here!</p> to make this. Use <p class="doc"><span class="icon"> </span>Your message goes here!</p> to make this. Use <p class="note"><span class="icon"> </span>Your message goes here!</p> to make this. Use <p class="photo"><span class="icon"> </span>Your message goes here!</p> to make this. Use <p class="mobi"><span class="icon"> </span>Your message goes here!</p> to make this. Buttons Buttons Style 1 Button Text Button Text Buttons Style 2 Button Text Button Text Buttons Style 3 Button Text Button Text Buttons Style 4 Button Text

Enter any available suffixes at Extensions → Module Manager → Module → Module Class Suffix. The captain of an Italian cruise ship that ran aground off Italy made excuses and resisted a coast guard officer's repeated orders for him to reboard his stricken liner and aid passengers, an audio recording released Tuesday reveals. Prosecutors have accused Capt. Francesco Schettino of manslaughter, causing a shipwreck and abandoning his vessel before all passengers were evacuated during the grounding of the Costa Concordia cruise ship off the Tuscan coast on Friday night.guard officer's repeated orders for him to reboard his stricken liner and aid passengers

SJ World News Template is using: 1. Modules: SJ Basic News Sj Module Tabs SJ K2 Accordion SJ K2 Slideshow II SJ K2 Slideshow SJ Splashes K2 SJ K2 Extra Slider SJ Mega K2 News 2. Plugins Yt Plugin SJ Core Plugin SJ Listing Ajax for K2 SJ Listing Ajax for Content Sj Content Related News 3. Components K2

Yt Framework uses xml file to render your layout. The framework supports all general features of a joomla template. The below is the list of features: Multiple Layouts: Left-Main-Right, Left-Main, Main-Right, etc. With xml file, you can easy to create some layouts for a joomla template Mobile Ready Table-less Layout Search Engine Friendly Modules Types Cross-browser Support Typography Validation Template Parameters Google Font Font Size RTL language support