Blue Masters 7.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.

Slideshow

BlueMasters theme comes with a slide show implementation hard coded into the page--front.tpl.php. This choice allows you have a slideshow up and running just after the theme installation. Then you could dig into the source code and modify it according to your needs.

BlueMasters gives the option to disable the build in hardcoded Slideshow implementation without dealing with PHP at all. Simple go to BlueMasters theme settings and disable it. After you disable the Slideshow (without disabling the -include javascript- option), you can copy/paste the following Slideshow code inside a Drupal System block. Finally, just place this new block to the Banner region and you will be able to configure this block through Drupal's User Interface.

7.x-1.x Branch

The code snippet that produces the slideshow is the following: 

<div class="main_view">
 
<div class="window">
<div class="image_reel">
<a href="#"><img src="<?php print base_path() . drupal_get_path('theme', 'bluemasters') . '/images/slide-image-3.jpg'; ?>"></a>
<a href="#"><img src="<?php print base_path() . drupal_get_path('theme', 'bluemasters') . '/images/slide-image-2.jpg'; ?>"></a>
<a href="#"><img src="<?php print base_path() . drupal_get_path('theme', 'bluemasters') . '/images/slide-image-1.jpg'; ?>"></a>
</div>
<div class="descriptions">
<div class="desc" style="display: none;">Our Portfolio</div>
<div class="desc" style="display: none;">Creation of Beaches</div>
<div class="desc" style="display: none;">About iPadMasters</div>
</div>
</div>
 
<div class="paging">
<a rel="1" href="#">1</a>
<a rel="2" href="#">2</a>
<a rel="3" href="#">3</a>
</div>
 
</div>

To extend your slide show simply follow the example bellow: 

<div class="main_view">
 
<div class="window">
<div class="image_reel">
<a href="#"><img src="<?php print base_path() . drupal_get_path('theme', 'bluemasters') . '/images/slide-image-3.jpg'; ?>"></a>
<a href="#"><img src="<?php print base_path() . drupal_get_path('theme', 'bluemasters') . '/images/slide-image-2.jpg'; ?>"></a>
<a href="#"><img src="<?php print base_path() . drupal_get_path('theme', 'bluemasters') . '/images/slide-image-1.jpg'; ?>"></a>
<a href="#"><img src="<?php print base_path() . drupal_get_path('theme', 'bluemasters') . '/images/NEW-ITEM-IMAGE.jpg'; ?>"></a>
</div>
<div class="descriptions">
<div class="desc" style="display: none;">Our Portfolio</div>
<div class="desc" style="display: none;">Creation of Beaches</div>
<div class="desc" style="display: none;">About iPadMasters</div>
<div class="desc" style="display: none;">NEW-ITEM-DESCRIPTION</div>
</div>
</div>
 
<div class="paging">
<a rel="1" href="#">1</a>
<a rel="2" href="#">2</a>
<a rel="3" href="#">3</a>
<a rel="4" href="#">4</a>
</div>
 
</div>

7.x-2.x Branch

This Branch uses an alternative slideshow implementation to achieve the responsive layout. If you are currently running a 7.x-1.x version and would like to update to the responsive version 7.x-2.x please follow the instructions in http://drupal.org/node/1999844

The code snippet that produces the responsive slideshow is the following: 

<!--#slideshow-->
<div id="slideshow">
 
<div class="flexslider">
<ul class="slides">
 
<!-- slider-item -->
<li class="slider-item">
<div class="slider-item-image">
<a href="<?php print url('node/3'); ?>"><img src="<?php print base_path() . drupal_get_path('theme', 'bluemasters') . '/images/slide-image-3.jpg'; ?>"></a>
</div>
<div class="slider-item-caption">About Bluemasters</div>
</li>
<!-- EOF: slider-item -->
 
<!-- slider-item -->
<li class="slider-item">
<div class="slider-item-image">
<a href="<?php print url('node/2'); ?>"><img src="<?php print base_path() . drupal_get_path('theme', 'bluemasters') . '/images/slide-image-2.jpg'; ?>"></a>
</div>
<div class="slider-item-caption">Our Portfolio</div>
</li>
<!-- EOF: slider-item -->
 
<!-- slider-item -->
<li class="slider-item">
<div class="slider-item-image">
<a href="<?php print url('node/1'); ?>"><img src="<?php print base_path() . drupal_get_path('theme', 'bluemasters') . '/images/slide-image-1.jpg'; ?>"></a>
</div>
<div class="slider-item-caption">Creation of Beaches</div>
</li>
<!-- EOF: slider-item -->
 
</ul>
</div>
 
</div>
<!--EOF:#slideshow-->

To extend your slide show simply add more slider items by following the markup above.

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.
 
A normal paragraph of text with in-line links. Lorem ipsum dosectetur adipisicing elit, sed do. Lorem ipsum dolor sit amet, <a href="#">this is a link</a> elit. labolore magna aliqua. Ut enim ad minim veniam. Lorem ipsum dosectetur adipisicing elit, sed do. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dosectetur adipisicing elit, sed do. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do <a href="#">eiusmod tempor incididunt</a> ut labolore magna aliqua. Ut enim ad minim veniam. Lorem ipsum dosectetur adipisicing elit, sed do.
 
<blockquote>Quoted text dosectetur adipisicing elit, sed do.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labolore magna aliqua. Ut enim ad minim veniam. Lorem ipsum dosectetur adipisicing elit, sed do.Lorem ipsum dolor sit amet, consectetur adipisicing.</blockquote>
 
<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>
 
<code>#header h1 a {<br />
display: block;<br />
height: 80px;<br />
width: 300px;<br />
}</code>
 
<div class="messages status">Sample status message. Page <strong>Typography</strong> 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 available updates page for more information.</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>
 
<fieldset> <legend>Account information</legend> </fieldset>
 
<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>

Contact Us

You can enable the default Drupal contact form (Contact module). This contact form is prestyled from Bluemasters style.css.

Articles

Create 3 articles:

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.

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="node/3" 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="comment/reply/5#comment-form">Add new comment</a></li>
<li class="node-readmore last"><a title="Read the rest of The store." href="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 alt="icon" src="sites/all/themes/bluemasters/images/twitter2.png"></a>
<a href="http://www.facebook.com/morethanthemes"><img alt="icon" src="sites/all/themes/bluemasters/images/facebook.png"></a>
<a href="http://www.flickr.com/photos/[email protected]/"><img alt="icon" src="sites/all/themes/bluemasters/images/flickr.png"></a>
<a href="#"><img alt="icon" src="sites/all/themes/bluemasters/images/in.png"></a>
<a href="#"><img alt="icon" src="sites/all/themes/bluemasters/images/tumblr.png"></a>
<a href="http://www.youtube.com/morethanthemes"><img style="margin-right: 0pt;" alt="icon" src="sites/all/themes/bluemasters/images/youtube.png"></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="<?php print base_path(); ?>sites/all/themes/bluemasters/images/gal-th-1.jpg"></a>
<a href="#"><img width="44" height="41" title="" alt="" src="<?php print base_path(); ?>sites/all/themes/bluemasters/images/gal-th-2.jpg"></a>
<a href="#"><img width="44" height="41" title="" alt="" src="<?php print base_path(); ?>sites/all/themes/bluemasters/images/gal-th-3.jpg"></a>
<a href="#"><img width="44" height="41" title="" alt="" src="<?php print base_path(); ?>sites/all/themes/bluemasters/images/gal-th-4.jpg"></a>
<a href="#"><img width="44" height="41" title="" alt="" src="<?php print base_path(); ?>sites/all/themes/bluemasters/images/gal-th-5.jpg"></a>
<a href="#"><img width="44" height="41" title="" alt="" src="<?php print base_path(); ?>sites/all/themes/bluemasters/images/gal-th-6.jpg"></a>
<a href="#"><img width="44" height="41" title="" alt="" src="<?php print base_path(); ?>sites/all/themes/bluemasters/images/gal-th-7.jpg"></a>
<a href="#"><img width="44" height="41" title="" alt="" src="<?php print base_path(); ?>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 at the top of the sidebar.

Quick search

Block

Add Search form block to Search area region

Permissions

Give Anonymous users the permission to access the search module.

Retrieved from "http://wiki.morethanthemes.com/index.php/Blue_Masters_7.x"
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