Blue Masters 6.x
From MtTWiki
Contents |
Demo content
To reproduce our demostration site you need to create some extra blocks, stories and pages in your installation. To make your life easier we provide here everything you may need for this. Blue Masters comes with predefined CSS rules for your content.
Note: You don't need to take extra care about references to images. Images for demo content are included into theme's distribution.
Pages
Simply create new pages and copy-paste the code.
About
<img src="sites/all/themes/bluemasters/images/page-aboutipadmasters.jpg"/> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam et risus non arcu porttitor feugi at in at neque. In hac habitasse platea dictumst. Proin pretium neque at turpis fermentum de aliquet. Ut risus nisi, scelerisque in convallis et, volutpat malesuada elit. Ut nulla libero, condi entum eget scelerisque eget, blandit sit amet metus. Suspendisse potenti. Nulla luctus temus augue dictum cursus. Curabitur non risus dui. In sit amet tellus in lacus fringilla condimentuma t sit amet libero. Fusce purus ligula, hendrerit ut vulputate eget, vestibulum non diam. Vestib ulum facilisis, leo id volutpat vestibulum, eros ligula ornare urna, pellentesque laoreet magna purus ac metus. Nulla facilisi. Mauris et risus nulla, at venenatis turpis. Duis egestas, elit eu imperdiet rhoncus, nulla mi tem por dui, eu dignissim odio mi vitae quam. Ut at tempus diam. Quisque accumsan ullamcorper nisl, ut mollis orci suscipit in. Phasellus sagittis interdum nunc, ultrices rhoncus est accumsan id. Sed blandit cursus sapien. Phasellus lacus arcu, consequat non egestas eu, vestibulum eu turpis. Nunc ut tortor sed felis auctor tincidunt sed at arcu. <blockquote>"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam et risus non arc porttitentum dealiquet. Ut risus nisi, scelerisque in convallis et, volutpat ada elit."</blockquote> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam et risus non arcu porttitor feugi at in at neque. In hac habitasse platea dictumst. Proin pretium neque at turpis fermentum de aliquet. Ut risus nisi, scelerisque in convallis et, volutpat malesuada elit. Ut nulla libero, condi entum eget scelerisque eget, blandit sit amet metus. Suspendisse potenti. Nulla luctus temus augue dictum cursus. Curabitur non risus dui. In sit amet tellus in lacus fringilla condimentuma t sit amet libero. Fusce purus ligula, hendrerit ut vulputate eget, vestibulum non diam. Vestib ulum facilisis, leo id volutpat vestibulum, eros ligula ornare urna, pellentesque laoreet magna purus ac metus. Nulla facilisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam et risus non arcu porttitor feugi at in at neque. In hac habitasse platea dictumst. Proin pretium neque at turpis fermentum de aliquet. Ut risus nisi, scelerisque in convallis et, volutpat malesuada elit. Ut nulla libero, condi entum eget scelerisque eget, blandit sit amet metus. Suspendisse potenti. Nulla luctus temus augue dictum cursus. Curabitur non risus dui. In sit amet tellus in lacus fringilla condimentuma t sit amet libero. Fusce purus ligula, hendrerit ut vulputate eget, vestibulum non diam. Vestib ulum facilisis, leo id volutpat vestibulum, eros ligula. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam et risus non arcu porttitor feugi.
Portfolio
<h1>This is a Heading 1</h1> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. <h2>This is a Heading 2</h2> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. <h2><a href="#">This is a linked Heading 2 title class</a></h2> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. <h3>This is a Heading 3</h3> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. <h4>This is a Heading 4</h4> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. <h2>Drupal's messages</h2> <div class="content-help block" id="content-help"> <div class="content-help-inner inner" id="content-help-inner"> <div class="help"> <p>Sample help message. Modules are plugins that extend Drupal's core functionality. Enable modules by selecting the <em>Enabled</em> checkboxes below and clicking the <em>Save configuration</em> button. Once a module is enabled, new <a href="/admin/user/permissions">permissions</a> may be available.</p> </div> </div> </div> <div class="content-messages block" id="content-messages"> <div class="content-messages-inner inner" id="content-messages-inner"> <div class="messages status"> Sample status message. Page <em>Typography</em> has been updated.</div> <div class="messages error">Sample error message. There is a security update available for your version of Drupal. To ensure the security of your server, you should update immediately! See the <a href="/admin/reports/updates">available updates</a> page for more information.</div> <div class="messages warning">Sample warning message. There are updates available for one or more of your modules or themes. To ensure the proper functioning of your site, you should update as soon as possible. See the <a href="/admin/reports/updates">available updates</a> page for more information.</div> </div> </div> <h2>Code tags</h2> <p><code>#header h1 a {<br /> display: block;<br /> height: 80px;<br /> width: 300px;<br /> }</code></p> <h2>Strong Text</h2> <p>This is a test of <strong>strong text</strong> so it should appear bold.</p> <h2>Italic Text</h2> <p>This is a test of <em>italic text</em> so it should appear in italics.</p> <h2>Blockquote</h2> <blockquote><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p> </blockquote> <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> <p> <fieldset> <legend>Account information</legend> </fieldset><br /> <h2>Form elements</h2> <form id="contact-mail-page" method="post" accept-charset="UTF-8" action="#"> <div id="edit-name-wrapper" class="form-item"><label for="edit-name">Text field label: <span title="This field is required." class="form-required">*</span></label><input type="text" class="form-text required" value="admin" size="60" id="edit-name" name="name" maxlength="255" /><br /> <div class="description">This is the description for the form element above.</div> </div> <div id="edit-message-wrapper" class="form-item"><label for="edit-message">Text area: <span title="This field is required." class="form-required">*</span></label><textarea class="form-textarea resizable required textarea-processed" id="edit-message" name="message" rows="5" cols="60"/></textarea></div></form></p> <div id="edit-copy-wrapper" class="form-item"><label for="edit-copy" class="option"><input type="checkbox" class="form-checkbox" value="1" id="edit-copy" name="copy" /> Label for a checkbox.</label></div> <p><input type="submit" class="form-submit" value="Submit button" id="edit-submit" name="op" /> <h2>Table</h2> <table id="forum-17"> <thead> <tr> <th>Forum</th> <th>Topics</th> <th>Posts</th> <th>Last post</th> </tr> </thead> <tbody> <tr class="odd" id="forum-list-8"> <td class="forum"> <div class="name"><a href="/forum/8">News and announcements</a></div> <div class="description">For news and announcements to the Drupal community at large.</div> </td> <td class="topics"> 1763<br /> <a href="/forum/8#new">18 new</a> </td> <td class="posts">18926</td> <td class="last-reply"> 8 hours 19 min ago<br/>by <a title="View user profile." href="/user/17089">Chris Charlton</a></br/></td> </tr> <tr class="even" id="forum-list-2"> <td class="forum"> <div class="name"><a href="/forum/2">General discussion</a></div> <div class="description">For less technical discussions about the Drupal project. Not for support questions!</div> </td> <td class="topics"> 25704<br /> <a href="/forum/2#new">292 new</a> </td> <td class="posts">98651</td> <td class="last-reply"> 5 min 9 sec ago<br/>by <a title="View user profile." href="/user/298892">polluxmr2</a></br/></td> </tr> <tr class="odd" id="forum-list-25"> <td class="forum"> <div class="name"><a href="/forum/25">Drupal showcase</a></div> <div class="description">Showcase your site to others, maybe share a little about it - modules, theme, why you used Drupal.</div> </td> <td class="topics"> 4660<br /> <a href="/forum/25#new">52 new</a> </td> <td class="posts">22819</td> <td class="last-reply"> 9 hours 20 min ago<br/>by <a title="View user profile." href="/user/142763">Thomasr976</a></br/></td> </tr> <tr class="even" id="forum-list-28"> <td class="forum"> <div class="name"><a href="/forum/28">Events</a></div> <div class="description">For events, conferences and other Drupal happenings.</div> </td> <td class="topics"> 337<br /> <a href="/forum/28#new">1 new</a> </td> <td class="posts">1554</td> <td class="last-reply"> 3 weeks 13 hours ago<br/>by <a title="View user profile." href="/user/36762">greggles</a></br/></td> </tr> </tbody> </table>
Contact Us
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce vestibulum vehicula nisi ac vehic ula. Fusce malesuada est id enim dignissim mattis. Phasellus id tellus nunc, in vehicula nisi. Fusce pellentesque, augue adipiscing sagittis tincidunt, mi magna sodales dolor, vitae ornare ipsum nunc et augue. Nulla sapien enim, rutrum sed pretium at, euismod sed augue. Vestibul um quis nibh nisl, facilisis adipiscing massa. Aliquam erat volutpat. <form method="post" id="contact_form" action="#"> <div id="map_wrap"> <p class="map">Our Location:</p> </div> <p> <label for="contactName">* Your Name:</label> <input type="text" class="requiredField" value="" id="contactName" name="contactName"> </p> <p> <label for="email">* Email Adress:</label> <input type="text" class="requiredField email" value="" id="email" name="email"> </p> <p> <label for="subject">* Subject:</label> <input type="text" class="requiredField mySubject" value="" id="mySubject" name="mySubject"> </p> <p class="textarea clear"> <label for="commentsText">* Your Message:</label> <textarea class="requiredField" cols="30" rows="20" id="commentsText" name="comments"> </textarea> </p> <p class="buttons right"> <input type="hidden" value="true" id="submitted" name="submitted"> <button type="submit">Send Message</button> </p> </form>
Stories
Create 3 stories:
- Jamaica Secrets
- Brazilian Vacations
- Creation of Beaches
Using the 3 html fragments bellow.
<img src="sites/all/themes/bluemasters/images/story-brazilianvacations.jpg"/>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam et risus non arcu porttitor feugi
at in at neque. In hac habitasse platea dictumst. Proin pretium neque at turpis fermentum de
aliquet. Ut risus nisi, scelerisque in convallis et, volutpat malesuada elit. Ut nulla libero, condi
entum eget scelerisque eget, blandit sit amet metus. Suspendisse potenti...
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam et risus non arcu porttitor feugi
at in at neque. In hac habitasse platea dictumst. Proin pretium neque at turpis fermentum de
aliquet. Ut risus nisi, scelerisque in convallis et, volutpat malesuada elit. Ut nulla libero, condi
entum eget scelerisque eget, blandit sit amet metus. Suspendisse potenti. Nulla luctus temus
augue dictum cursus. Curabitur non risus dui. In sit amet tellus in lacus fringilla condimentuma
t sit amet libero. Fusce purus ligula, hendrerit ut vulputate eget, vestibulum non diam. Vestib
ulum facilisis, leo id volutpat vestibulum, eros ligula ornare urna, pellentesque laoreet magna
purus ac metus. Nulla facilisi.
<img src="sites/all/themes/bluemasters/images/story-creationofbeaches.jpg"/>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam et risus non arcu porttitor feugi
at in at neque. In hac habitasse platea dictumst. Proin pretium neque at turpis fermentum de
aliquet. Ut risus nisi, scelerisque in convallis et, volutpat malesuada elit. Ut nulla libero, condi
entum eget scelerisque eget, blandit sit amet metus. Suspendisse potenti...
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam et risus non arcu porttitor feugi
at in at neque. In hac habitasse platea dictumst. Proin pretium neque at turpis fermentum de
aliquet. Ut risus nisi, scelerisque in convallis et, volutpat malesuada elit. Ut nulla libero, condi
entum eget scelerisque eget, blandit sit amet metus. Suspendisse potenti. Nulla luctus temus
augue dictum cursus. Curabitur non risus dui. In sit amet tellus in lacus fringilla condimentuma
t sit amet libero. Fusce purus ligula, hendrerit ut vulputate eget, vestibulum non diam. Vestib
ulum facilisis, leo id volutpat vestibulum, eros ligula ornare urna, pellentesque laoreet magna
purus ac metus. Nulla facilisi.
<img src="sites/all/themes/bluemasters/images/story-jamaicasecrets.jpg"/>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam et risus non arcu porttitor feugi
at in at neque. In hac habitasse platea dictumst. Proin pretium neque at turpis fermentum de
aliquet. Ut risus nisi, scelerisque in convallis et, volutpat malesuada elit. Ut nulla libero, condi
entum eget scelerisque eget, blandit sit amet metus. Suspendisse potenti...
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam et risus non arcu porttitor feugi
at in at neque. In hac habitasse platea dictumst. Proin pretium neque at turpis fermentum de
aliquet. Ut risus nisi, scelerisque in convallis et, volutpat malesuada elit. Ut nulla libero, condi
entum eget scelerisque eget, blandit sit amet metus. Suspendisse potenti. Nulla luctus temus
augue dictum cursus. Curabitur non risus dui. In sit amet tellus in lacus fringilla condimentuma
t sit amet libero. Fusce purus ligula, hendrerit ut vulputate eget, vestibulum non diam. Vestib
ulum facilisis, leo id volutpat vestibulum, eros ligula ornare urna, pellentesque laoreet magna
purus ac metus. Nulla facilisi.
Vocabularies and terms
Create two vocabularies and add some term as following:
- Categories
- Photography
- Tags
- Beach
- Ocean
- Sea
- Vacation
Use this terms in your posts.
Blocks
Front Page
Use following content for your front page block. Create them as HTML block and put then into the right region.
About iPadMasters
<img src="sites/all/themes/bluemasters/images/about-ipad-masters.png"/> <h3>All About iPad Masters</h3> Lorem ipsum dolor sit amet, consect- etur adipiscing elit. Praesent tempor facilisis congue. Lorem sum dolor sit amet, consectetur adippend... <ul class="links inline"> <li class="comment_add first"><a href="/mt-themes/drupal-base/drupal-6.20/comment/reply/2#comment-form" title="Add a new comment to this page.">Learn more</a></li> </ul>
Our Blog Updates
<img src="sites/all/themes/bluemasters/images/our-blog-updates.png"/> <h3>My First Website Creation</h3> <p class="post-note">Posted in <a href="#">Web Design</a> on April 13th, 2010</p> Lorem ipsum dolor sit amet, consect- etur adipiscing elit. Praesent tempor facilisis congue. Suspend... <ul class="links inline"><li class="comment_add first"><a title="Add a new comment to this page." href="?q=comment/reply/2#comment-form">Add new comment</a></li> <li class="node_read_more last"><a title="Read the rest of The store." href="?q=node/2">Read more</a></li> </ul>
Get In Touch
<div class="ico"><a href=""><img alt="icon" src="sites/all/themes/bluemasters/images/phone2.png"></a></div> <div class="detail"><h3>PHONE</h3><h4>+52 (449) 971-5712</h4></div> <div class="clear"></div> <div class="ico"><a href=""><img alt="icon" src="sites/all/themes/bluemasters/images/mail.png"></a></div> <div class="detail"><h3>EMAIL</h3><h4>[email protected]</h4></div> <div class="clear"></div> <div class="ico"><a href=""><img alt="icon" src="sites/all/themes/bluemasters/images/skype.png"></a></div> <div class="detail"><h3>SKYPE</h3><h4>emeaguiar</h4></div> <div class="clear"></div> <div style="margin-bottom: 0pt;" class="ico"><a href=""><img alt="icon" src="sites/all/themes/bluemasters/images/skype.png"></a></div> <div class="detail"><h3>OTHER REQUEST</h3><h4>Try our contact form</h4></div> <div class="clear"></div>
Social links
<div class="ico2"> <a href="http://twitter.com/morethanthemes"><img src="sites/all/themes/bluemasters/images/twitter2.png" alt="icon"></a> <a href="http://www.facebook.com/morethanthemes"><img src="sites/all/themes/bluemasters/images/facebook.png" alt="icon"></a> <a href="http://www.flickr.com/photos/[email protected]/"><img src="sites/all/themes/bluemasters/images/flickr.png" alt="icon"></a> <a href="#"><img src="sites/all/themes/bluemasters/images/in.png" alt="icon"></a> <a href="#"><img src="sites/all/themes/bluemasters/images/tumblr.png" alt="icon"></a> <a href="http://www.youtube.com/morethanthemes"><img src="sites/all/themes/bluemasters/images/youtube.png" alt="icon" style="margin-right: 0pt;"></a> </div>
Create two menus and put them into the two first regions
- About Us
- Categories
Use following content for the rest two block.
From The Gallery
<div class="footer-gallery-block"> <a href="#"> <img width="44" height="41" title="" alt="" src="sites/all/themes/bluemasters/images/gal-th-1.jpg"></a> <a href="#"> <img width="44" height="41" title="" alt="" src="sites/all/themes/bluemasters/images/gal-th-2.jpg"></a> <a href="#"> <img width="44" height="41" title="" alt="" src="sites/all/themes/bluemasters/images/gal-th-3.jpg"></a> <a href="#"> <img width="44" height="41" title="" alt="" src="sites/all/themes/bluemasters/images/gal-th-4.jpg"></a> <a href="#"> <img width="44" height="41" title="" alt="" src="sites/all/themes/bluemasters/images/gal-th-5.jpg"></a> <img width="44" height="41" title="" alt="" src="sites/all/themes/bluemasters/images/gal-th-6.jpg"></a> <img width="44" height="41" title="" alt="" src="sites/all/themes/bluemasters/images/gal-th-7.jpg"></a> <img width="44" height="41" title="" alt="" src="sites/all/themes/bluemasters/images/gal-th-8.jpg"></a> </div>
Twitter Updates
<ul class="twitter"><li class="twitter-item"> RT <a class="twitter-user" href="http://twitter.com/morethanthemes">@morethanthemes</a>: Which theme would you like to see ported to <a class="twitter-link" href="http://twitter.com/search?q=%23Drupal">#Drupal</a>? <a class="twitter-link" href="http://www.drupalizing.com">drupalizing.com</a> <span class="twitter-timestamp"><abbr title="2010/11/23 00:10:01">2010/12/23</abbr></span></li></ul>
Side bar
Create a menu with the name "Site Navigation" and put it top at the sidebar.
Menus
{tbd}