Corporate Clean:Demonstration Content for Drupal 7.x-2.x
From MtTWiki
Contents |
Demo content
To reproduce our demostration site you need to create some extra Pages, Blog entries (Drupal core Blog module) and Articles in your installation. To make your life easier we provide here everything you may need for this. Corporate Clean 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 (corporateclean/mockup).
Prerequisites
As the Demo content of Corporate Clean installation requires the configuration of PHP input format at several points, please make sure you have activated the PHP filter module right after installing. Note: It is not necessary to set PHP input format. In our wiki pages, we have set the PHP input format so that all images be displayed correctly with enabled Clean urls or not.
For example, you can configure the image (Slideshow image) source path as sites/all/themes/corporateclean/mockup/slide-1.jpg. This path configuration will display the image only if you have not enabled the Clean urls. In case you have enabled the Clean urls, you should add your domain to the path http://www.yourdomain.com/sites/all/themes/corporateclean/mockup/slide-1.jpg
Slideshow
Corporate Clean theme comes with a Slideshow implementation hard coded into the page.tpl.php (sites/all/themes/corporateclean/page.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.
To learn more about the Slideshow scroll down to the Advances Topics of this wiki page.
Front page
Create a new page using the following html code. Then go to Home » Administration » Configuration » Front Page » Default Front Page and set this newly created page as your Default Front Page.
<div style="border-bottom:1px solid #d9d9d9; padding:0 0 20px 0;">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.</div> <div style="clear:both; padding:20px 0;"> <div class="grid_4 alpha"> <h1 class="front-heading">Products</h1> <div class="subtitle">Making your workflow easier</div> <img class="masked" src="<?php print base_path() . drupal_get_path('theme', 'corporateclean') ;?>/mockup/products.jpg"/> 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. <div style="display:block; padding:30px 0 10px 0;"><a class="more" href="<?php print url('node/3');?>">See what we offer</a></div> </div> <div class="grid_4 omega"> <h1 class="front-heading">Services</h1> <div class="subtitle">Problem solving at lightning speed</div> <img class="masked" src="<?php print base_path() . drupal_get_path('theme', 'corporateclean') ;?>/mockup/services.jpg"/> 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. <div style="display:block; padding:30px 0 10px 0;"><a class="more" href="<?php print url('node/4');?>">See what we offer</a></div> </div> </div>
Pages
Simply create new pages and copy-paste the code.
Please note that the first 3 of the following pages, About, Products and Service needs the whole sites width. So you have to configure your side bar block not to be displayed on those pages.
About
<h2>What do we do</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 laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. <div class="about-features"> <div class="about-feature grid_4 alpha"> <h2 style="margin-top:0;">Creativity</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 laboris nisi ut aliquip ex ea commodo consequat. </div> <div class="about-feature grid_4"> <h2 style="margin-top:0;">Professional people</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 laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. </div> <div class="about-feature grid_4 omega"> <h2 style="margin-top:0;">Quality</h2> 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. </div> </div> <div class="about-members"> <h2>Who we are</h2> <div class="grid_6 alpha"> <div class="about-member clearfix"> <img src="<?php print base_path() . drupal_get_path('theme', 'corporateclean') ;?>/mockup/about-member.png" style="float:left; padding:0 10px 0 0;"/><strong>John Smith</strong> <div style="padding:0 0 10px 0; display:block; font-style:italic;">Art Director</div> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim minim veniam. </div> </div> <div class="grid_6 omega"> <div class="about-member clearfix"> <img src="<?php print base_path() . drupal_get_path('theme', 'corporateclean') ;?>/mockup/about-member.png" style="float:left; padding:0 10px 0 0;"/><strong>John Smith</strong> <div style="padding:0 0 10px 0; display:block; font-style:italic;">Chief Technology Officer</div> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim minim veniam. </div> </div> </div> <div class="testimonial"> <div class="testimonial-inner"> “Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim minim veniam, quis nostrud exercitation ullamco laboris nisi.” </div> <div class="testimonial-submitted"> <strong>John Smith</strong><br/> Company </div> </div>
Products
<div class="product grid_4 alpha"> <img class="masked" src="<?php print base_path() . drupal_get_path('theme', 'corporateclean') ;?>/mockup/product.jpg"/> <h2>Project title goes here</h2> <div class="product-subtitle"><strong>Client:</strong> <em>Company</em></div> 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. <div style="clear:both; padding:20px 0 0 0;"><a class="more" href="#" style="margin:0 10px 0 0;">Visit website</a><a class="more" href="#">More info</a></div> </div> <div class="product grid_4"> <img class="masked" src="<?php print base_path() . drupal_get_path('theme', 'corporateclean') ;?>/mockup/product.jpg"/> <h2>Project title goes here</h2> <div class="product-subtitle"><strong>Client:</strong> <em>Company</em></div> 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. <div style="clear:both; padding:20px 0 0 0;"><a class="more" href="#" style="margin:0 10px 0 0;">Visit website</a><a class="more" href="#">More info</a></div> </div> <div class="product grid_4 omega"> <img class="masked" src="<?php print base_path() . drupal_get_path('theme', 'corporateclean') ;?>/mockup/product.jpg"/> <h2>Project title goes here</h2> <div class="product-subtitle"><strong>Client:</strong> <em>Company</em></div> 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. <div style="clear:both; padding:20px 0 0 0;"><a class="more" href="#" style="margin:0 10px 0 0;">Visit website</a><a class="more" href="#">More info</a></div> </div> <div class="product grid_4 alpha"> <img class="masked" src="<?php print base_path() . drupal_get_path('theme', 'corporateclean') ;?>/mockup/product.jpg"/> <h2>Project title goes here</h2> <div class="product-subtitle"><strong>Client:</strong> <em>Company</em></div> 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. <div style="clear:both; padding:20px 0 0 0;"><a class="more" href="#" style="margin:0 10px 0 0;">Visit website</a><a class="more" href="#">More info</a></div> </div> <div class="product grid_4"> <img class="masked" src="<?php print base_path() . drupal_get_path('theme', 'corporateclean') ;?>/mockup/product.jpg"/> <h2>Project title goes here</h2> <div class="product-subtitle"><strong>Client:</strong> <em>Company</em></div> 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. <div style="clear:both; padding:20px 0 0 0;"><a class="more" href="#" style="margin:0 10px 0 0;">Visit website</a><a class="more" href="#">More info</a></div> </div> <div class="product grid_4 omega"> <img class="masked" src="<?php print base_path() . drupal_get_path('theme', 'corporateclean') ;?>/mockup/product.jpg"/> <h2>Project title goes here</h2> <div class="product-subtitle"><strong>Client:</strong> <em>Company</em></div> 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. <div style="clear:both; padding:20px 0 0 0;"><a class="more" href="#" style="margin:0 10px 0 0;">Visit website</a><a class="more" href="#">More info</a></div> </div>
Services
<h2>Overview</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 laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. <div class="services"> <div class="service-left grid_6 alpha"> <h2>Web Design</h2> <img src="<?php print base_path() . drupal_get_path('theme', 'corporateclean') ;?>/mockup/web-design.png" style="float:left; padding:0 10px 0 0;"/>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. <div style="clear:both; padding:10px 0 0 0; text-align:right;"><a class="more" href="#">View projects</a></div> </div> <div class="service-right grid_6 omega"> <h2>Graphic Design</h2> <img src="<?php print base_path() . drupal_get_path('theme', 'corporateclean') ;?>/mockup/graphic-design.png" style="float:left; padding:0 10px 0 0;"/>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. <div style="clear:both; padding:10px 0 0 0; text-align:right;"><a class="more" href="#">View projects</a></div> </div> </div> <div class="services"> <div class="service-left grid_6 alpha"> <h2>Search Engine Optimization</h2> <img src="<?php print base_path() . drupal_get_path('theme', 'corporateclean') ;?>/mockup/seo.png" style="float:left; padding:0 10px 0 0;"/>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. <div style="clear:both; padding:10px 0 0 0; text-align:right;"><a class="more" href="#">View projects</a></div> </div> <div class="service-right grid_6 omega"> <h2>Web Applications</h2> <img src="<?php print base_path() . drupal_get_path('theme', 'corporateclean') ;?>/mockup/web-applications.png" style="float:left; padding:0 10px 0 0;"/>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. <div style="clear:both; padding:10px 0 0 0; text-align:right;"><a class="more" href="#">View projects</a></div> </div> </div> <div class="services"> <div class="service-left grid_6 alpha"> <h2>Mobile Applications</h2> <img src="<?php print base_path() . drupal_get_path('theme', 'corporateclean') ;?>/mockup/mobile-applications.png" style="float:left; padding:0 10px 0 0;"/>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. <div style="clear:both; padding:10px 0 0 0; text-align:right;"><a class="more" href="#">View projects</a></div> </div> </div>
Typography
Excepteur sint occaecat cupidatat non proident. 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. <blockquote><strong>Blockquote</strong> - 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...</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. <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 Us
You can enable the default Drupal contact form (Contact module). This contact form is prestyled from Corporate Clean style.css.
Blog entries
Create 2 Blog entries (you should have enabled the Drupal core Blog module):
- First Blog entry title goes here
- Second Blog entry title goes here
Using the 2 html fragments bellow.
<img class="masked" src="<?php print base_path() . drupal_get_path('theme', 'corporateclean') ;?>/mockup/blogpost-1.jpg"/> <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. 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.</p> <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p>
<img class="masked" src="<?php print base_path() . drupal_get_path('theme', 'corporateclean') ;?>/mockup/blogpost-2.jpg"/> <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. 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.</p> <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p>
Blocks
Use following guides for your footer blocks. Create them according to the following instructions and put them into the right region.
Create a System Menu and place the produced block in the right region.
Region: Footer first region
Twitter updates
Create a Full HTML block with the following code and place it in the right region. Don't forget to change the default account morethanthemes with yours.
<script type="text/javascript" src="http://widgets.twimg.com/j/2/widget.js"></script><script type="text/javascript"> new TWTR.Widget({ version: 2, type: 'search', search: 'morethanthemes', interval: 5000, subject: '', width: '100%', height: 250, theme: { shell: { background: 'transparent', color: '#878686' }, tweets: { background: 'transparent', color: '#878686', links: '#ffffff' } }, features: { scrollbar: false, loop: true, live: true, hashtags: true, timestamp: false, avatars: false,behavior: 'default' } }).render().start(); </script>
You could adjust the overall height of this block changing the height:180 attribute.
Region: Footer second region
Contact
Create a Full HTML block with the following code and place it in the right region.
<a href="contact">Address</a> Level 2, 110 Bourke St, Melbourne Victoria 2200 Australia <a href="contact">Phone</a> +61 (0) 3 9023 0074
Region: Footer third region
Connect with us
Create a Full HTML block with the following code and place it in the right region.
<ul class="social-bookmarks"> <li class="label">Connect with us:</li> <li class="twitter"><a href="http://twitter.com/morethanthemes"></a></li> <li class="facebook"><a href="http://www.facebook.com/pages/More-than-just-themes/194842423863081"></a></li> <li class="linkedin"><a href="#"></a></li> <li class="delicious"><a href="#"></a></li> <li class="rss"><a href="rss.xml"></a></li> </ul>
Region: Footer bottom right region
Assign the "Main menu" block at the "footer" region. Set the block title to <none> to hide the title.
Side bar
Create a menu with the name "Sidebar Navigation" and put it top at the "First sidebar" region.
Quick search
Block
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 ANONYMOUS USER check box
Advanced topics
Slideshow
Corporate Clean theme comes with a slide show implementation hard coded into the page.tpl.php. This choice allows you have a slideshow up and run just after the theme installation. Then you could dig into the source code and modify it according to your needs.
The code snippet that produce the slideshow is the following: To extend your slide show just create your "slider items". You could put any valid html markup into the the div with the "content" class.
<!-- #slideshow --> <div id="slideshow"> <!--slider-item--> <div class="slider-item"> <div class="content container_12"> <div class="grid_12"> <!--slider-item content--> <div style="float:left; padding:0 30px 0 0;"> <img class="masked" src="<?php print base_path() . drupal_get_path('theme', 'corporateclean') ;?>/mockup/slide-1.jpg"/> </div> <h2>Sample product name</h2> <strong>General</strong><br/> <em>Client name</em><br/> <br/> 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. <div style="display:block; padding:30px 0 10px 0;"><a class="more" href="#">Tell me more</a></div> <!--EOF:slider-item content--> </div> </div> </div> <!--EOF:slider-item--> <!--slider-item--> <div class="slider-item"> <div class="content container_12"> <div class="grid_12"> <!--slider-item content--> <div style="float:right; padding:0 0 0 30px;"> <img class="masked" src="<?php print base_path() . drupal_get_path('theme', 'corporateclean') ;?>/mockup/slide-2.jpg"/> </div> <h2>Sample service name</h2> <strong>General</strong><br/> <em>Client name</em><br/> <br/> 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. <div style="display:block; padding:30px 0 10px 0;"><a class="more" href="#">Tell me more</a></div> <!--EOF:slider-item content--> </div> </div> </div> <!--EOF:slider-item--> <!--slider-item--> <div class="slider-item"> <div class="content container_12"> <div class="grid_12"> <!--slider-item content--> <h2>Sample product name</h2> <strong>General</strong><br/> <em>Client name</em><br/> <br/> 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. <div style="display:block; padding:30px 0 10px 0;"><a class="more" href="#">Tell me more</a></div> <!--EOF:slider-item content--> </div> </div> </div> <!--EOF:slider-item--> <!--slider-item--> <div class="slider-item"> <div class="content container_12"> <div class="grid_12"> <!--slider-item content--> <img class="masked" src="<?php print base_path() . drupal_get_path('theme', 'corporateclean') ;?>/mockup/slide-3.jpg"/> <!--EOF:slider-item content--> </div> </div> </div> <!--EOF:slider-item--> </div> <!-- EOF: #slideshow --> <!-- #slider-controls-wrapper --> <div id="slider-controls-wrapper"> <div id="slider-controls" class="container_12"> <ul id="slider-navigation"> <li><a href="#"></a></li> <li><a href="#"></a></li> <li><a href="#"></a></li> <li><a href="#"></a></li> </ul> </div> </div> <!-- EOF: #slider-controls-wrapper -->
Get rid of the hardcoded slideshow
Corporate Clean gives the option to disable the build in, hardocode, slideshow implementation without dealing with PHP at all. Simple goto Corporate Clean theme settings and disable it.
Some theory about the slideshow markup
Corporate Clean is configured to understand the existance of a slide show as long as this is hardcoded into the page.tpl.php, comes in a custom html block or is produced by a sophisticated View based mechanism. The only rule is that the slideshow markup needs to be equivalent to the following markup.
<!-- #slideshow --> <div id="slideshow"> <!--slider-item--> <div class="slider-item"> <div class="content container_12"> <div class="grid_12"> <!--slider-item content--> YOUR HTML CODE <!--EOF:slider-item content--> </div> </div> </div> <!--EOF:slider-item--> <!--slider-item--> <div class="slider-item"> <div class="content container_12"> <div class="grid_12"> <!--slider-item content--> YOUR HTML CODE <!--EOF:slider-item content--> </div> </div> </div> <!--EOF:slider-item--> </div> <!-- EOF: #slideshow --> <!-- #slider-controls-wrapper --> <div id="slider-controls-wrapper"> <div id="slider-controls" class="container_12"> <ul id="slider-navigation"> <li><a href="#"></a></li> <li><a href="#"></a></li> </ul> </div> </div> <!-- EOF: #slider-controls-wrapper -->
Every slider-item at the code above constitutes one slide of the slide show. Therefore, in order to add a new slide, you need to add the following code:
<!--slider-item--> <div class="slider-item"> <div class="content container_12"> <div class="grid_12"> <!--slider-item content--> YOUR HTML CODE <!--EOF:slider-item content--> </div> </div> </div> <!--EOF:slider-item-->
You could place your content where it says "YOUR HTML CODE HERE".
For every slider-item that you will add, you need to add a list-item of the slider-controls-wrapper as well:
<!-- #slider-controls-wrapper --> <div id="slider-controls-wrapper"> <div id="slider-controls" class="container_12"> <ul id="slider-navigation"> <li><a href="#"></a></li> <li><a href="#"></a></li> </ul> </div> </div> <!-- EOF: #slider-controls-wrapper -->
