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.

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

  1. &lt;div class=&quot;<strong>thumbnail</strong>&quot;&gt;<br />
  2.                                         &nbsp; &lt;a&gt;&lt;img class=&quot;imagecache-small_img_default&quot;/&gt;&lt;/a&gt;<br />
  3.                                         &lt;/div&gt;<br />
  4.                                         &lt;div class=&quot;teaser-content&quot;&gt;<br />
  5.                                         &nbsp; &lt;div class=&quot;teaser-meta&quot;&gt;<br />
  6.                                         &nbsp;&nbsp;&nbsp; &lt;div class=&quot;created&quot;&gt;Jul. 1, 2011&lt;/div&gt;<br />
  7.                                         &nbsp;&nbsp;&nbsp; &lt;div class=&quot;type&quot;&gt;article&lt;/div&gt;<br />
  8.                                         &nbsp;&nbsp;&nbsp; &lt;div class=&quot;source-name&quot;&gt;WardsAuto&lt;/div&gt;<br />
  9.                                         &nbsp; &lt;/div&gt;<br />
  10.                                         &nbsp; &lt;h3 class=&quot;<strong>title</strong>&quot;&gt;<br />
  11.                                         &nbsp;&nbsp; &lt;a href=&quot;http://penton.com&quot;&gt;Article Link&lt;/a&gt;<br />
  12.                                         &nbsp; &lt;/h3&gt;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;<br />
  13.                                         &nbsp; &lt;div class=&quot;<strong>teaser-body</strong>&quot;&gt;<br />
  14.                                         &nbsp;&nbsp;&nbsp; Body of teaser.<br />
  15.                                         &nbsp; &lt;/div&gt;<br />
  16.                                         &lt;/div&gt;

*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

  1. &lt;div class=&quot;<strong>more-link</strong>&quot;&gt;<br />
  2.                                         &nbsp; &lt;a&gt;View All&lt;/a&gt;<br />
  3.                                         &lt;/div&gt;

*CSS class--> .more-link

Call to Action Button

 

  1. &lt;div class=&quot;<strong>button-link</strong>&quot;&gt;<br />
  2.                                 &nbsp; &lt;a&gt;Submit&lt;/a&gt;<br />
  3.                                 &lt;/div&gt;

 

*CSS class--> .button-link

Call to Action Button extended with .align-left

 

  1. &lt;div class=&quot;<strong>button-link align-left</strong>&quot;&gt;<br />
  2.                                 &nbsp; &lt;a&gt;Submit&lt;/a&gt;<br />
  3.                                 &lt;/div&gt;

 

*CSS class extender--> .align-left

Block Highlight

Title of the Block
Contents of the block.
Contents of the block.
Contents of the block.

  1. &lt;div class=&quot;<strong>block-highlight</strong>&quot;&gt;<br />
  2.                                         &nbsp;&nbsp; &nbsp;&lt;h5 class=&quot;block-title&quot;&gt;Title of the Block&lt;/h5&gt;<br />
  3.                                         &nbsp;&nbsp; &nbsp;&lt;div class=&quot;block-content&quot;&gt;Contents of the block.&lt;/div&gt;<br />
  4.                                         &lt;/div&gt;

*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.

  1. &lt;div class=&quot;<strong>block-highlight pointer</strong>&quot;&gt;<br />
  2.                                         &nbsp;&nbsp; &nbsp;&lt;h5 class=&quot;block-title&quot;&gt;Title of the Block&lt;/h5&gt;<br />
  3.                                         &nbsp;&nbsp; &nbsp;&lt;div class=&quot;block-content&quot;&gt;Contents of the block.&lt;/div&gt;<br />
  4.                                         &lt;/div&gt;

*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.

  1. &lt;div class=&quot;<strong>block-highlight pointer align-left</strong>&quot;&gt;<br />
  2.                                         &nbsp;&nbsp; &nbsp;&lt;h5 class=&quot;block-title&quot;&gt;Title of the Block&lt;/h5&gt;<br />
  3.                                         &nbsp;&nbsp; &nbsp;&lt;div class=&quot;block-content&quot;&gt;Contents of the block.&lt;/div&gt;<br />
  4.                                         &lt;/div&gt;

*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

  1. &lt;div class=&quot;block-views&quot;&gt;<br />
  2.                                         &nbsp; &lt;div class=&quot;view <strong>split-col2</strong>&quot;&gt;<br />
  3.                                         &nbsp;&nbsp; &lt;ul&gt;<br />
  4.                                         &nbsp;&nbsp;&nbsp; &lt;li&gt;Topic 1&lt;/li&gt;<br />
  5.                                         &nbsp;&nbsp;&nbsp; &lt;li&gt;Topic 2&lt;/li&gt;<br />
  6.                                         &nbsp;&nbsp;&nbsp; &lt;li&gt;Topic 3&lt;/li&gt;<br />
  7.                                         &nbsp;&nbsp;&nbsp; &lt;li&gt;Topic 4&lt;/li&gt;<br />
  8.                                         &nbsp; &lt;/div&gt;<br />
  9.                                         &lt;/div&gt;
&lt;div class=&quot;view <strong>split-col3</strong>&quot;&gt;*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

  1. &lt;div class=&quot;block-views&quot;&gt;<br />
  2.                                         &nbsp; &lt;div class=&quot;view&quot;&gt;<br />
  3.                                         &nbsp;&nbsp; &lt;ul&gt;<br />
  4.                                         &nbsp;&nbsp;&nbsp; &lt;li&gt;&lt;a href=&quot;&quot;&gt;Contents of the block&lt;/a&gt;&lt;/li&gt;<br />
  5.                                         &nbsp;&nbsp;&nbsp; &lt;li&gt;&lt;a href=&quot;&quot;&gt;Contents of the block.&lt;/a&gt;&lt;/li&gt;<br />
  6.                                         &nbsp;&nbsp;&nbsp; &lt;li&gt;&lt;a href=&quot;&quot;&gt;Contents of the block.&lt;/a&gt;&lt;/li&gt;<br />
  7.                                         &nbsp;&nbsp;&nbsp; &lt;li&gt;&lt;a href=&quot;&quot;&gt;Contents of the block.&lt;/a&gt;&lt;/li&gt;<br />
  8.                                         &nbsp;&nbsp;&nbsp; &lt;li&gt;&lt;a href=&quot;&quot;&gt;Contents of the block.&lt;/a&gt;&lt;/li&gt;<br />
  9.                                         &nbsp; &lt;/div&gt;<br />
  10.                                         &lt;/div&gt;
No special code here

Group View Style

  1. &lt;div class=&quot;block-views <strong>teaser-shorten</strong>&quot;&gt;<br />
  2.                                         &nbsp; &lt;h3 class=&quot;<strong>group-title</strong>&quot;&gt;Title of the Block&lt;/h3&gt;<br />
  3.                                         &nbsp; &lt;div class=&quot;view&quot;&gt;<br />
  4.                                         &nbsp;&nbsp; &lt;ul&gt;<br />
  5.                                         &nbsp;&nbsp;&nbsp; &lt;li&gt;&lt;a href=&quot;&quot;&gt;Contents of the block.&lt;/a&gt;&lt;/li&gt;<br />
  6.                                         &nbsp;&nbsp;&nbsp; &lt;li&gt;&lt;a href=&quot;&quot;&gt;Contents of the block.&lt;/a&gt;&lt;/li&gt;<br />
  7.                                         &nbsp;&nbsp;&nbsp; &lt;li&gt;&lt;a href=&quot;&quot;&gt;Contents of the block.&lt;/a&gt;&lt;/li&gt;<br />
  8.                                         &nbsp;&nbsp;&nbsp; &lt;li&gt;&lt;a href=&quot;&quot;&gt;Contents of the block.&lt;/a&gt;&lt;/li&gt;<br />
  9.                                         &nbsp;&nbsp;&nbsp; &lt;li&gt;&lt;a href=&quot;&quot;&gt;Contents of the block.&lt;/a&gt;&lt;/li&gt;<br />
  10.                                         &nbsp; &lt;/div&gt;<br />
  11.                                         &lt;/div&gt;
*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

  1. &lt;div class=&quot;block-views&quot;&gt;<br />
  2.                                         &nbsp; &lt;div class=&quot;view <strong>views-simple</strong>&quot;&gt;<br />
  3.                                         &nbsp;&nbsp; &lt;ul&gt;<br />
  4.                                         &nbsp;&nbsp;&nbsp; &lt;li&gt;&lt;a href=&quot;&quot;&gt;Contents of the block.&lt;/a&gt;&lt;/li&gt;<br />
  5.                                         &nbsp;&nbsp;&nbsp; &lt;li&gt;&lt;a href=&quot;&quot;&gt;Contents of the block.&lt;/a&gt;&lt;/li&gt;<br />
  6.                                         &nbsp;&nbsp;&nbsp; &lt;li&gt;&lt;a href=&quot;&quot;&gt;Contents of the block.&lt;/a&gt;&lt;/li&gt;<br />
  7.                                         &nbsp;&nbsp;&nbsp; &lt;li&gt;&lt;a href=&quot;&quot;&gt;Contents of the block.&lt;/a&gt;&lt;/li&gt;<br />
  8.                                         &nbsp;&nbsp;&nbsp; &lt;li&gt;&lt;a href=&quot;&quot;&gt;Contents of the block.&lt;/a&gt;&lt;/li&gt;<br />
  9.                                         &nbsp; &lt;/div&gt;<br />
  10.                                         &lt;/div&gt;
*CSS class--> .views-simple
*Tightens up the spacing on views-row and removes borders

Scroller

(image)

  1. filename: views-view-list--VIEWNAME--block-DELTA.tpl.php<br />
  2.                                 <br />
  3.                                 <strong>&lt;div class=&quot;scrollable-container&quot;&gt;</strong><br />
  4.                                 &nbsp;&nbsp; &nbsp;<strong>&lt;div class=&quot;scrollable-item&quot;&gt;</strong><br />
  5.                                 &nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; <strong>&lt;h3&gt;</strong>Newswire<strong>&lt;/h3&gt;</strong><br />
  6.                                 &nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; <strong>&lt;div class=&quot;scroll&quot;&gt;</strong><br />
  7.                                 &nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &lt;div class=&quot;views-row&quot;&gt;Contents of the block.&lt;/div&gt;<br />
  8.                                 &nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &lt;div class=&quot;views-row&quot;&gt;Contents of the block.&lt;/div&gt;<br />
  9.                                 &nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &lt;div class=&quot;views-row&quot;&gt;Contents of the block.&lt;/div&gt;<br />
  10.                                 &nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; <strong>&lt;/div&gt;</strong><br />
  11.                                 &nbsp;&nbsp; &nbsp;<strong>&lt;/div&gt;</strong><br />
  12.                                 <strong>&lt;/div&gt;</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

 

Images

small_img: teaser image; 141 x 79

Blogger profile; 60 x 70

blogger imagecache preset: none, defined in cck in features

medium_img: category featured image; 355 x 200

portrait image: topic, curated topic pages; 153 x 90

portrait imagecache preset: none, defined in cck in features

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)
    1. filename: sites/all/modules/custom/weather/css/weather.css<br />
    2.                 <br />
    3.                 .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:
    1. filename: sites/all/themes/pisces_core/css/branding.css.less<br />
    2.                 <br />
    3.                 .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:
    1. filename: sites/all/themes/SUBTHEME/js/subtheme.js<br />
    2.                 <br />
    3.                 jQuery(function($) {<br />
    4.                 <strong>&nbsp; $(.block-topics ol, #block-data ul).easyListSplitter({ colNumber: 2 });</strong><br />
    5.                 <strong>&nbsp; $(#sitemap ol).easyListSplitter({ colNumber: 3 });</strong><br />
    6.                 });
  • 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

Sponsored Introduction Continue on to (or wait seconds) ×