Skeleton:Demonstration Content for Drupal 7.x
From MtTWiki
To reproduce our demonstration site you need to create some extra blocks and nodes in your installation. To make your life easier we provide here everything you may need for this. Skeleton comes with predefined CSS rules for your content.
Note: You don't need to take care about references to images. Images for demo content are included into the theme distribution.
Contents |
Prerequisites
As the Demonstration content of Skeleton requires the input format to be set to "PHP" at several points, please make sure you have activated the PHP filter module right after the installation.
Pages
Simply follow the corresponding steps for each page. Skeleton theme supports a full width layout for each Page like the front-page. This behavior can be achieved by configuring the sidebar to not contain any blocks for the specific page so that the main content area takes all the available space. This configuration is set through the Drupal interface.
Skeleton is a Responsive, Mobile-Friendly Theme (Front-page)
Create a new basic Page with Title "Skeleton is a Responsive, Mobile-Friendly Theme" (set this page as default front-page to yout Drupal installation through Home » Administration » Configuration » System - admin/config/system/site-information) and Body:
<div class="one_half"> <img class="scale-with-grid alignleft" src="<?php print base_path() . drupal_get_path('theme', 'skeletontheme') ;?>/mockup/skeleton_devices.png"> </div> <div class="one_half last"> <br/> <p>Skeleton is a powerful, clean, responsive theme ported to Drupal by <a href="http://www.morethanthemes.com/" target="_blank">More Than (just) Themes</a>. If you like this theme, we encourage you to try also of our other <a href="http://www.morethanthemes.com" target="_blank">Premium</a> and <a href="http://drupalizing.com" target="_blank">Free</a> Drupal themes.</p> <p>This theme is build over the <strong><a href="http://www.getskeleton.com/" target="_blank">Skeleton Boilerplate</a></strong> and was inspired by the excellent <strong><a href="http://demos.simplethemes.com/skeleton/" target="_blank">Skeleton Wordpress theme</a></strong> which has been designed by <a href="http://www.simplethemes.com/" target="_blank">Simple themes</a></p> <p>Today, people visit your website from a variety of devices ranging from desktop computers, tablets, and smart phones. The average user spends only a few seconds before making a decision to stay on your site or not. Skeleton is a Drupal 7 theme aimed at helping you build simple, uncluttered, useable, and mobile-friendly Drupal sites.</p> </div>
About Skeleton
Create a new basic Page with Title "Welcome to Skeleton" and Body:
<div class="one_half"> <img class="scale-with-grid alignleft" src="<?php print base_path() . drupal_get_path('theme', 'skeletontheme') ;?>/mockup/1312368015_tiger.png"/> </div> <div class="one_half last"> <p>This responsive Drupal theme is based on the <a title="Skeleton Responsive CSS Boilerplate" href="http://www.getskeleton.com/" target="_blank">Skeleton</a> boilerplate and the excellent <a href="http://demos.simplethemes.com/skeleton/" target="_blank">Skeleton Wordpress Theme</a> . This theme is designed especially with the <a href="http://www.drupal.org/" target="_blank">Drupal 7</a> in mind.</p> <p>Skeleton for Drupal has been ported and is supported by <a href="http://www.morethanthemes.com/" target="_blank">More than (just) Themes</a>, as part of our ongoing effort to bring quality themes to Drupal.</p> </div>
Columns
Create a new basic Page with Title "Column Shortcodes with Media Queries" and Body:
<div class="one_third"> <code>[one_third]</code> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. </div> <div class="one_third"> <code>[one_third]</code> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. </div> <div class="one_third last"> <code>[one_third last]</code> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. </div> <div class="clear"></div> <div class="one_fourth"> <code>[one_fourth]</code> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. </div> <div class="one_fourth"> <code>[one_fourth]</code> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. </div> <div class="one_fourth"> <code>[one_fourth]</code> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. </div> <div class="one_fourth last"> <code>[one_fourth last]</code> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. </div> <div class="clear"></div> <div class="one_third"> <code>[one_third]</code> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. </div> <div class="two_thirds last"> <code>[two_thirds last]</code> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. </div> <div class="clear"></div> <div class="one_half"> <code>[one_half]</code> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. </div> <div class="one_half last"> <code>[one_half last]</code> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</div> <div class="clear"></div>
Button Styles
Create a new basic Page with Title "Button Styles" and Body:
<div class="one_third"> <code>color="white"</code> <div class="button small left"><a class="button white" href="#">Small Button</a></div> <div class="button medium left"><a class="button white" href="#">Medium Button</a></div> <div class="button large left"><a class="button white" href="#">Large Button</a></div> </div> <div class="one_third"> <code>color="gray"</code> <div class="button small left"><a class="button gray" href="#">Small Button</a></div> <div class="button medium left"><a class="button gray" href="#">Medium Button</a></div> <div class="button large left"><a class="button gray" href="#">Large Button</a></div> </div> <div class="one_third last"> <code>color="black"</code> <div class="button small left"><a class="button black" href="#">Small Button</a></div> <div class="button medium left"><a class="button black" href="#">Medium Button</a></div> <div class="button large left"><a class="button black" href="#">Large Button</a></div> </div><div class="clear"></div> <hr><div class="clear"></div> <div class="one_third"> <code>color="lightblue"</code> <div class="button small left"><a class="button lightblue" href="#">Small Button</a></div> <div class="button medium left"><a class="button lightblue" href="#">Medium Button</a></div> <div class="button large left"><a class="button lightblue" href="#">Large Button</a></div> </div> <div class="one_third"> <code>color="blue"</code> <div class="button small left"><a class="button blue" href="#">Small Button</a></div> <div class="button medium left"><a class="button blue" href="#">Medium Button</a></div> <div class="button large left"><a class="button blue" href="#">Large Button</a></div> </div> <div class="one_third last"> <code>color="darkblue"</code> <div class="button small left"><a class="button darkblue" href="#">Small Button</a></div> <div class="button medium left"><a class="button darkblue" href="#">Medium Button</a></div> <div class="button large left"><a class="button darkblue" href="#">Large Button</a></div> </div><div class="clear"></div> <hr><div class="clear"></div> <div class="one_third"> <code>color="lightgreen"</code> <div class="button small left"><a class="button lightgreen" href="#">Small Button</a></div> <div class="button medium left"><a class="button lightgreen" href="#">Medium Button</a></div> <div class="button large left"><a class="button lightgreen" href="#">Large Button</a></div> </div> <div class="one_third"> <code>color="green"</code> <div class="button small left"><a class="button green" href="#">Small Button</a></div> <div class="button medium left"><a class="button green" href="#">Medium Button</a></div> <div class="button large left"><a class="button green" href="#">Large Button</a></div> </div> <div class="one_third last"> <code>color="darkgreen"</code> <div class="button small left"><a class="button darkgreen" href="#">Small Button</a></div> <div class="button medium left"><a class="button darkgreen" href="#">Medium Button</a></div> <div class="button large left"><a class="button darkgreen" href="#">Large Button</a></div> </div><div class="clear"></div> <hr><div class="clear"></div> <div class="one_third"> <code>color="lightred"</code> <div class="button small left"><a class="button lightred" href="#">Small Button</a></div> <div class="button medium left"><a class="button lightred" href="#">Medium Button</a></div> <div class="button large left"><a class="button lightred" href="#">Large Button</a></div> </div> <div class="one_third"> <code>color="red"</code> <div class="button small left"><a class="button red" href="#">Small Button</a></div> <div class="button medium left"><a class="button red" href="#">Medium Button</a></div> <div class="button large left"><a class="button red" href="#">Large Button</a></div> </div> <div class="one_third last"> <code>color="darkred"</code> <div class="button small left"><a class="button darkred" href="#">Small Button</a></div> <div class="button medium left"><a class="button darkred" href="#">Medium Button</a></div> <div class="button large left"><a class="button darkred" href="#">Large Button</a></div> </div><div class="clear"></div> <hr><div class="clear"></div> <div class="one_third"> <code>color="yellow"</code> <div class="button small left"><a class="button yellow" href="#">Small Button</a></div> <div class="button medium left"><a class="button yellow" href="#">Medium Button</a></div> <div class="button large left"><a class="button yellow" href="#">Large Button</a></div> </div> <div class="one_third"> <code>color="orange"</code> <div class="button small left"><a class="button orange" href="#">Small Button</a></div> <div class="button medium left"><a class="button orange" href="#">Medium Button</a></div> <div class="button large left"><a class="button orange" href="#">Large Button</a></div> </div> <div class="one_third last"> <code>color="brown"</code> <div class="button small left"><a class="button brown" href="#">Small Button</a></div> <div class="button medium left"><a class="button brown" href="#">Medium Button</a></div> <div class="button large left"><a class="button brown" href="#">Large Button</a></div> </div> <div class="clear"></div>
Typography
Create a new basic Page with Title "Typography" and Body:
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> <blockquote>"Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</blockquote> <h2>Header 2</h2> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. <h2><a href="#">Linked Header 2</a></h2> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. <h3>Header 3</h3> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. <h4>Header 4</h4> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. <h2>Code snippet</h2> <code>#header h1 a <br /> display: block;<br /> height: 80px;<br /> width: 300px;<br /> </code> <h2>Messages</h2> <div class="messages status">Sample status message. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div> <div class="messages error">Sample error message. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div> <div class="messages warning">Sample warning message. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div> <h2>Paragraph With Links</h2> <p>Lorem ipsum dolor sit amet, <a href="#">consectetuer adipiscing</a> elit. Donec odio. Quisque volutpat mattis eros. <a href="#">Nullam malesuada</a> erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p> <h2>Ordered List</h2> <ol> <li>This is a sample <strong>Ordered List</strong>.</li> <li>Lorem ipsum dolor sit amet consectetuer.</li> <li>Condimentum quis.</li> <li>Congue Quisque augue elit dolor. <ol> <li>Something goes here.</li> <li>And another here</li> <li>Then one more</li> </ol> </li> <li>Congue Quisque augue elit dolor nibh.</li> </ol> <h2>Unordered List</h2> <ul> <li>This is a sample <strong>Unordered List</strong>.</li> <li>Condimentum quis.</li> <li>Congue Quisque augue elit dolor. <ul> <li>Something goes here.</li> <li>And another here <ul> <li>Something here as well</li> <li>Something here as well</li> <li>Something here as well</li> </ul> </li> <li>Then one more</li> </ul> </li> <li>Nunc cursus sem et pretium sapien eget.</li> </ul> <h2>Fieldset</h2> <fieldset> <legend>Account information</legend> </fieldset> <h2>Table</h2> <table border="1"> <tr> <th>Header 1</th> <th>Header 2</th> </tr> <tr class="odd"> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr> <tr class="even"> <td>row 2, cell 1</td> <td>row 2, cell 2</td> </tr> <tr class="odd"> <td>row 3, cell 1</td> <td>row 3, cell 2</td> </tr> </table>
Blocks
Simply follow the corresponding steps for each block.
Downloads
Create a new basic Block with Title "Downloads" and Body:
<div class="cta clearfix"> <h3>Downloads</h3> <p><img class="alignleft" src="<?php print base_path() . drupal_get_path('theme', 'skeletontheme') ;?>/mockup/arrow.png" alt="">Get started with Skeleton. It’s completely free to use on personal and commercial projects.</p> <div class="clear"></div> <div class="button small right"><a class="button white" href="#">Download at Drupal</a></div> </div>
Set it to be displayed into the "Featured left" region.
Documentation
Create a new basic Block with Title "Documentation" and Body:
<div class="cta clearfix"> <h3>Documentation</h3> <p><img class="alignleft" src="<?php print base_path() . drupal_get_path('theme', 'skeletontheme') ;?>/mockup/compass.png" alt="">Learn more about how Skeleton works and how you can customize it to fit your development needs.</p> <div class="clear"></div> <div class="button small right"><a class="button white" href="http://wiki.morethanthemes.com/" target="_blank">Documentation</a></div> </div>
Set it to be displayed into the "Featured right" region.
Create a new basic Block with Title "Footer Block One" and Body:
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
Set it to be displayed into the "Footer first" region.
Create a new basic Block with Title "Footer Block Two" and Body:
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
Set it to be displayed into the "Footer second" region.
Create a new basic Block with Title "Footer Block Three" and Body:
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
Set it to be displayed into the "Footer third" region.
