Blue Masters 6.x

From MtTWiki

Jump to: navigation, search

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:

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:

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>

Footer

Create two menus and put them into the two first regions

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}

Personal tools
Namespaces
Variants
Actions
Main Menu
Premium Themes
Toolsets
Freebies
Navigation
Toolbox
This wiki is hosted by morethanthemes.com, creators of top quality premium and free themes for Drupal 6 and 7, as well as HTML and PSD themes.
Find out more
for Drupal 6 & 7