Theme Guide

Displays standard classes and demos. It also acts as a library where we can find reusable classes instead of making new ones. Using these classes will allow subtheme styles to kick in.

• Theme and Site setup
• Subtheme Variables

Check out "sites/all/themes/pisces_core/css/branding.css.less" which is our dynamic theme branding engine.

Teaser Jul. 1, 2011 article WardsAuto Grand Caravan Top-Selling U.S. Minivan; Town & Country Falls to No.4 The Town & Country’s poor showing flies in the face of an upbeat verdict from the influential publication, Consumer Reports, not to mention Chrysler’s total 24.8% June sales gain....More	<div class="<strong>thumbnail</strong>"><br />                                         &nbsp; <a><img class="imagecache-small_img_default"/></a><br />                                         </div><br />                                         <div class="teaser-content"><br />                                         &nbsp; <div class="teaser-meta"><br />                                         &nbsp;&nbsp;&nbsp; <div class="created">Jul. 1, 2011</div><br />                                         &nbsp;&nbsp;&nbsp; <div class="type">article</div><br />                                         &nbsp;&nbsp;&nbsp; <div class="source-name">WardsAuto</div><br />                                         &nbsp; </div><br />                                         &nbsp; <h3 class="<strong>title</strong>"><br />                                         &nbsp;&nbsp; <a href="http://penton.com">Article Link</a><br />                                         &nbsp; </h3>&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;<br />                                         &nbsp; <div class="<strong>teaser-body</strong>"><br />                                         &nbsp;&nbsp;&nbsp; Body of teaser.<br />                                         &nbsp; </div><br />                                         </div> *CSS class--> .thumbnail *CSS class--> .teaser-content *CSS class--> .teaser-meta *CSS class--> .created *CSS class--> .type *CSS class--> .source-name *CSS class--> .title *CSS class--> .teaser-body
View Content Button View All	<div class="<strong>more-link</strong>"><br />                                         &nbsp; <a>View All</a><br />                                         </div> *CSS class--> .more-link
Call to Action Button Submit	<div class="<strong>button-link</strong>"><br />                                 &nbsp; <a>Submit</a><br />                                 </div>   *CSS class--> .button-link
Call to Action Button extended with .align-left Submit	<div class="<strong>button-link align-left</strong>"><br />                                 &nbsp; <a>Submit</a><br />                                 </div>   *CSS class extender--> .align-left
Block Action Title of the Block Test sentence inside this p tag. What a random sentence this is. Hello, this is a test sentence. Contents of the block. Contents of the block. Contents of the block. Submit Subscribe to the PISCES Newsletter Subscribe to the PISCES Podcast and Test Making The Block Long By Pushing the Block Title to the Fourth Line	filename: block-MODULENAME-BLOCKNAME.tpl.php<br />                                         <br />                                         <div class="<strong>block-action</strong>"><br />                                         &nbsp;&nbsp; &nbsp;<strong><div class="block-title-icon"></strong><br />                                         &nbsp;&nbsp; &nbsp;&nbsp;<strong><span class="icon-register"></span></strong><br />                                         &nbsp;&nbsp; &nbsp;&nbsp;<h2 class="block-title">Title of the Block</h2><br />                                         &nbsp;&nbsp; &nbsp;<strong></div></strong><br />                                         &nbsp;&nbsp; &nbsp;<div class="block-content">Contents of the block.</div><br />                                         </div> *CSS class--> .block-action *CSS class--> .block-title-icon -- can be used by itself or inside .block-action *CSS class--> .icon-register -- must be wrapped with span tag and be inside .block-title-action *CSS class--> .icon-newsletter *CSS class--> .icon-podcast To apply to code, create block template file. eg: pisces_core/block-penton_custom-sign_up_message.tpl.php eg: pisces_core/block-penton_custom-why_register_message.tpl.php
Block Highlight Title of the Block Contents of the block. Contents of the block. Contents of the block.	<div class="<strong>block-highlight</strong>"><br />                                         &nbsp;&nbsp; &nbsp;<h2 class="block-title">Title of the Block</h2><br />                                         &nbsp;&nbsp; &nbsp;<div class="block-content">Contents of the block.</div><br />                                         </div> *CSS class--> .block-highlight *.block-highlight requires both .block title and .block content
Block Highlight, extended with .pointer Title of the Block Contents of the block. Contents of the block. Contents of the block.	<div class="<strong>block-highlight pointer</strong>"><br />                                         &nbsp;&nbsp; &nbsp;<h2 class="block-title">Title of the Block</h2><br />                                         &nbsp;&nbsp; &nbsp;<div class="block-content">Contents of the block.</div><br />                                         </div> *CSS class--> .block-highlight *CSS class extender--> .pointer *.pointer must be use with .block-highlight
Block Highlight, extended with .pointer, extended with .align-left Title of the Block Contents of the block. Contents of the block. Contents of the block.	<div class="<strong>block-highlight pointer align-left</strong>"><br />                                         &nbsp;&nbsp; &nbsp;<h2 class="block-title">Title of the Block</h2><br />                                         &nbsp;&nbsp; &nbsp;<div class="block-content">Contents of the block.</div><br />                                         </div> *CSS class extender--> .align-left *Can be used on any block
List Splitter Title of the Block Topic 1 Topic 2 Topic 3 Topic 4 Title of the Block Topic 1 Topic 2 Topic 3 Topic 4 Topic 5 Topic 6	<div class="block-views"><br />                                         &nbsp; <div class="view <strong>split-col2</strong>"><br />                                         &nbsp;&nbsp; <ul><br />                                         &nbsp;&nbsp;&nbsp; <li>Topic 1</li><br />                                         &nbsp;&nbsp;&nbsp; <li>Topic 2</li><br />                                         &nbsp;&nbsp;&nbsp; <li>Topic 3</li><br />                                         &nbsp;&nbsp;&nbsp; <li>Topic 4</li><br />                                         &nbsp; </div><br />                                         </div> <div class="view <strong>split-col3</strong>">*CSS class--> .split-col2 *CSS class--> .split-col3 *Adding either class to a div or view surrounding a <ul> or <ol> tag will generate the splitter
Regular View Title of the Block Contents of the block. Contents of the block. Contents of the block. Contents of the block. Contents of the block.	<div class="block-views"><br />                                         &nbsp; <div class="view"><br />                                         &nbsp;&nbsp; <ul><br />                                         &nbsp;&nbsp;&nbsp; <li><a href="">Contents of the block</a></li><br />                                         &nbsp;&nbsp;&nbsp; <li><a href="">Contents of the block.</a></li><br />                                         &nbsp;&nbsp;&nbsp; <li><a href="">Contents of the block.</a></li><br />                                         &nbsp;&nbsp;&nbsp; <li><a href="">Contents of the block.</a></li><br />                                         &nbsp;&nbsp;&nbsp; <li><a href="">Contents of the block.</a></li><br />                                         &nbsp; </div><br />                                         </div> No special code here
Group View Style Title of the Block Contents of the block. Contents of the block. Contents of the block. Contents of the block. Contents of the block.	<div class="block-views <strong>teaser-shorten</strong>"><br />                                         &nbsp; <h3 class="<strong>group-title</strong>">Title of the Block</h3><br />                                         &nbsp; <div class="view"><br />                                         &nbsp;&nbsp; <ul><br />                                         &nbsp;&nbsp;&nbsp; <li><a href="">Contents of the block.</a></li><br />                                         &nbsp;&nbsp;&nbsp; <li><a href="">Contents of the block.</a></li><br />                                         &nbsp;&nbsp;&nbsp; <li><a href="">Contents of the block.</a></li><br />                                         &nbsp;&nbsp;&nbsp; <li><a href="">Contents of the block.</a></li><br />                                         &nbsp;&nbsp;&nbsp; <li><a href="">Contents of the block.</a></li><br />                                         &nbsp; </div><br />                                         </div> *CSS class--> .teaser-shorten *CSS class--> .group-title *Using .teaser-shorten will hide all node teaser contents such as the teaser-body, meta info and thumbail..etc..EXCEPT for the node title link.
Views Simple Title of the Block Contents of the block. Contents of the block. Contents of the block. Contents of the block. Contents of the block.	<div class="block-views"><br />                                         &nbsp; <div class="view <strong>views-simple</strong>"><br />                                         &nbsp;&nbsp; <ul><br />                                         &nbsp;&nbsp;&nbsp; <li><a href="">Contents of the block.</a></li><br />                                         &nbsp;&nbsp;&nbsp; <li><a href="">Contents of the block.</a></li><br />                                         &nbsp;&nbsp;&nbsp; <li><a href="">Contents of the block.</a></li><br />                                         &nbsp;&nbsp;&nbsp; <li><a href="">Contents of the block.</a></li><br />                                         &nbsp;&nbsp;&nbsp; <li><a href="">Contents of the block.</a></li><br />                                         &nbsp; </div><br />                                         </div> *CSS class--> .views-simple *Tightens up the spacing on views-row and removes borders
Scroller (image)	filename: views-view-list--VIEWNAME--block-DELTA.tpl.php<br />                                 <br />                                 <strong><div class="scrollable-container"></strong><br />                                 &nbsp;&nbsp; &nbsp;<strong><div class="scrollable-item"></strong><br />                                 &nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; <strong><h3></strong>Newswire<strong></h3></strong><br />                                 &nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; <strong><div class="scroll"></strong><br />                                 &nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; <div class="views-row">Contents of the block.</div><br />                                 &nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; <div class="views-row">Contents of the block.</div><br />                                 &nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; <div class="views-row">Contents of the block.</div><br />                                 &nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; <strong></div></strong><br />                                 &nbsp;&nbsp; &nbsp;<strong></div></strong><br />                                 <strong></div></strong> *To activate scoller, you must wrap your contents with the code highlighted in blue *This works well with views-view-list--VIEWNAME--block-DELTA.tpl.php templates

Adding branding styles to new blocks

Goal: Theme the weather module with border colors that reflect each individual sites' branding color.
Example: Default border color--grey; Newhope360 borders--green; Farmpress borders--red; WardsAuto borders--dark red

• First put your default style into the module folder --(avoid defining font-family)
  
  filename: sites/all/modules/custom/weather/css/weather.css<br />
                  <br />
                  .weather_forecast { border-top: 1px solid #ccc; border-bottom: 1px solid #ccc; }
• Then go to the pisces_core theme folder and at the bottom of the file put:
  
  filename: sites/all/themes/pisces_core/css/branding.css.less<br />
                  <br />
                  .weather_forecast { border-color: @main_accent_color }
• You won't have to go into every subtheme and add the color. Now all current sites AND future sites will fill in the blanks and pick up the branding color :)

Manual List Splitter (NEVER USE unless you cannot manipulate the HTML)

• First find the class or ID that is wrapping the specific list you would like to split
• Then go to the subtheme js folder and at the bottom of the file:
  
  filename: sites/all/themes/SUBTHEME/js/subtheme.js<br />
                  <br />
                  jQuery(function($) {<br />
                  <strong>&nbsp; $(.block-topics ol, #block-data ul).easyListSplitter({ colNumber: 2 });</strong><br />
                  <strong>&nbsp; $(#sitemap ol).easyListSplitter({ colNumber: 3 });</strong><br />
                  });
• If there are more lists you need to split, use the comma to separate them
• Note that there will be a jolt on the page since the javascript will not kick in until the end