Selecta:Demonstration Content for Drupal 7.x
From MtTWiki
To reproduce our demonstration 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. Selecta 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 theme's distribution.
Contents |
Prerequisites
As the Demo content of Selecta installation requires the configuration of PHP input format at several points, please make sure you have activated the PHP filter module right after installing.
Featured Videos
Selecta comes with a "Featured Videos" javascript implementation hard coded into the page.tpl.php. This allows you to have your "Featured Videos" up and running just after the theme installation. Then you could dig into the source code and modify it according to your needs.
The code snippet that produces the "Featured Videos" is the following:
<div class="selected-feature"> <div id="feature-node-header-1" class="feature-title"> <h4>17 Jan 2012</h4> <h2><a href="<?php print url('node/6'); ?>">Elbow /// One Day Like This</a></h2> <div id="first_selected" class="no_display">1</div> </div> <div id="feature-node-header-2" class="feature-title no_display"> <h4>21 Jan 2012</h4> <h2><a href="<?php print url('node/7'); ?>">Cinnamon Chasers - Luv Deluxe (Official Music Video)</a></h2> </div> <div id="feature-node-header-3" class="feature-title no_display"> <h4>21 Jan 2012</h4> <h2><a href="<?php print url('node/8'); ?>">Blue</a></h2> </div> <div id="feature-node-header-4" class="feature-title no_display"> <h4>21 Jan 2012</h4> <h2><a href="<?php print url('node/9'); ?>">Birds on the Wires</a></h2> </div> <div id="feature-node-header-5" class="feature-title no_display"> <h4>6 Mar 2012</h4> <h2><a href="<?php print url('node/11'); ?>">Artificial Paradise, INC.</a></h2> </div> <div id="feature-media-container" class="container-light"> <div id="feature-node-media-1" > <iframe src="http://player.vimeo.com/video/4224453" width="640" height="360" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe> </div> <div id="feature-node-media-2" class="no_display"> <iframe src="http://player.vimeo.com/video/6540668" width="640" height="360" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe> </div> <div id="feature-node-media-3" class="no_display"> <iframe src="http://player.vimeo.com/video/6050064" width="640" height="360" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe> </div> <div id="feature-node-media-4" class="no_display"> <iframe src="http://player.vimeo.com/video/6428069" width="640" height="360" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe> </div> <div id="feature-node-media-5" class="no_display"> <iframe src="http://player.vimeo.com/video/6132324" width="640" height="360" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe> </div> </div> </div> <ul class="feature-list"> <li> <span class="item">1</span> <h4>17 Jan 2012</h4> <a id="feature-href-1" href="">Elbow /// One Day Like This</a> </li> <li> <span class="item">2</span> <h4>21 Jan 2012</h4> <a id="feature-href-2" href="">Cinnamon Chasers - Luv Deluxe (Official Music Video)</a> </li> <li> <span class="item">3</span> <h4>21 Jan 2012</h4> <a id="feature-href-3" href="">Blue</a> </li> <li> <span class="item">4</span> <h4>21 Jan 2012</h4> <a id="feature-href-4" href="">Birds on the Wires</a> </li> <li> <span class="item">5</span> <h4>6 Mar 2012</h4> <a id="feature-href-5" href="">Artificial Paradise, INC.</a> </li> </ul>
Post Slider
Create a block containing the following code, select "Text format" » "PHP code" and place it in the "Slider" region.
<div class="slider-block"> <div class="container-light"> <img src="<?php print base_path() . drupal_get_path('theme', 'selecta') ;?>/mockup/saint-louis.jpeg" alt="Saint-Louis"/> </div> <h3><a href="#">VINCIL FROM UMMO – Clip "Saint-Louis"</a></h3> </div> <div class="slider-block"> <div class="container-light"> <img src="<?php print base_path() . drupal_get_path('theme', 'selecta') ;?>/mockup/birds.jpeg" alt="Training Birds of Prey"/> </div> <h3><a href="#">Training Birds of Prey</a></h3> </div> <div class="slider-block"> <div class="container-light"> <img src="<?php print base_path() . drupal_get_path('theme', 'selecta') ;?>/mockup/lostcoin.jpeg" alt="The Lost Coin"/> </div> <h3><a href="#">The Lost Coin</a></h3> </div> <div class="slider-block last"> <div class="container-light"> <img src="<?php print base_path() . drupal_get_path('theme', 'selecta') ;?>/mockup/forest.jpeg" alt="The Forest"/> </div> <h3><a href="#">The Forest</a></h3> </div>
Pages
Simply follow the corresponding steps for each page.
About
Create a new basic Page with Title "About" and Body:
This is an example of a Drupal Basic page, you could edit this to put information about yourself or your site so readers know where you are coming from. You can create as many pages like this one and manage all of your content inside of Drupal. 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. 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. 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. 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.
Design/Passion/Hand Drawn
These Pages are Feed Pages containing the articles of a specific taxonomy term. Just add a new menu link and input the correct path of the taxonomy term you like. In our demonstration site the following paths were used:
- Design: taxonomy/term/2
- Passion: taxonomy/term/3
- Hand Drawn: taxonomy/term/4
Typography
Create a new basic Page with Title "Typography", "Text Format" Full HTML and Body:
<h2>Header 1</h2> 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. <h2>Header 2</h2> <h2><a href="#">Linked Header 2</a></h2> <h3>Header 3</h3> <h4>Header 4</h4> <h4>Code snippet</h4> <code>#header h1 a {<br /> display: block;<br /> height: 80px;<br /> width: 300px;<br /> }</code> <h4>Drupal's messages</h4> <div class="messages status">Sample status message. Page <em><strong>Typography</strong></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 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> <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>
Contact
You can enable the default Drupal contact form (Contact module). This contact form is prestyled from Selecta's style.css.
Sidebar
Ads
Create a block containing the following code, select "Text format" » "PHP code" and place it in the top of the "Sidebar First" region.
<div class="advert"> <a href="http://www.morethanthemes.com/" target="_blank"><img src="<?php print base_path() . drupal_get_path('theme', 'selecta') ;?>/mockup/ads1.png" alt="More than Themes"/></a> </div> <div class="advert right"> <a href="http://drupal.org/node/1197510" target="_blank"><img src="<?php print base_path() . drupal_get_path('theme', 'selecta') ;?>/mockup/ads2.png" alt="More than Themes on Drupal Marketplace"/></a> </div> <div class="advert"> <a href="http://www.morethanthemes.com/?q=themes" target="_blank"><img src="<?php print base_path() . drupal_get_path('theme', 'selecta') ;?>/mockup/ads3.png" alt="More than Themes Premium Themes"/></a> </div> <div class="advert right"> <a href="http://www.drupalizing.com/" target="_blank"><img src="<?php print base_path() . drupal_get_path('theme', 'selecta') ;?>/mockup/ads4.png" alt="More than Themes Drupalizing project"/></a> </div>
Next you should override the default css for the specific block. Just find the id of the block (best through firebug) and append the following in the end of your style.css or your local.css file.
#sidebar {YOUR_BLOCK_ID}.block {
background: none repeat scroll 0 0 transparent;
padding: 0;
}For example in our demonstration content the block id is "block-block-7" so the we had to add the following in our css file.
#sidebar block-block-7.block {
background: none repeat scroll 0 0 transparent;
padding: 0;
}Main Menu
Assign the "Main menu" block in the "Sidebar First" region.
Search
Add "Search form" block to "Search area" region.
Permissions
Give Anonymous users the permission to access the search module.
- Go to Home » Administration » People » Permissions
- Locate "Search" » "Use search" and select the ANONYMOUS USER check box
Login Form
Assign the "User login" block in the "Sidebar First" region.
Menu
Create a new Menu from Structure » Menus » Add Menu and add the links that you like. Go to Structure » Blocks and assign the corresponding Menu block to the "Footer left" region.
Recent comments
Assign the "Recent comments" block in the "Footer Center" region.
About us
Create a new block with the Title "About us". Enter the following as "Block body":
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas gravida. Suspendisse vel lacus sed purus tincidunt bibendum. Quisque quam. Ut interdum. Proin euismod facilisis est. Nunc nec metus. Morbi ornare, justo quis varius eleifend, est felis tincidunt leo, pharetra condimentum dolor ipsum in dolor. Aenean diam. Phasellus risus purus, feugiat in, dignissim id, rutrum eget, quam. Mauris hendrerit mattis arcu. Praesent ac ligula.
