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

<div class="<strong>thumbnail</strong>"><br />
                                          <a><img class="imagecache-small_img_default"/></a><br />
                                        </div><br />
                                        <div class="teaser-content"><br />
                                          <div class="teaser-meta"><br />
                                            <div class="created">Jul. 1, 2011</div><br />
                                            <div class="type">article</div><br />
                                            <div class="source-name">WardsAuto</div><br />
                                          </div><br />
                                          <h3 class="<strong>title</strong>"><br />
                                           <a href="http://penton.com">Article Link</a><br />
                                          </h3>      <br />
                                          <div class="<strong>teaser-body</strong>"><br />
                                            Body of teaser.<br />
                                          </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

<div class="<strong>more-link</strong>"><br />
                                          <a>View All</a><br />
                                        </div>

*CSS class--> .more-link

Call to Action Button

 

<div class="<strong>button-link</strong>"><br />
                                  <a>Submit</a><br />
                                </div>

 

*CSS class--> .button-link

Call to Action Button extended with .align-left

 

<div class="<strong>button-link align-left</strong>"><br />
                                  <a>Submit</a><br />
                                </div>

 

*CSS class extender--> .align-left

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 />
                                            <h5 class="block-title">Title of the Block</h5><br />
                                            <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 />
                                            <h5 class="block-title">Title of the Block</h5><br />
                                            <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 />
                                            <h5 class="block-title">Title of the Block</h5><br />
                                            <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 />
                                          <div class="view <strong>split-col2</strong>"><br />
                                           <ul><br />
                                            <li>Topic 1</li><br />
                                            <li>Topic 2</li><br />
                                            <li>Topic 3</li><br />
                                            <li>Topic 4</li><br />
                                          </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

<div class="block-views"><br />
                                          <div class="view"><br />
                                           <ul><br />
                                            <li><a href="">Contents of the block</a></li><br />
                                            <li><a href="">Contents of the block.</a></li><br />
                                            <li><a href="">Contents of the block.</a></li><br />
                                            <li><a href="">Contents of the block.</a></li><br />
                                            <li><a href="">Contents of the block.</a></li><br />
                                          </div><br />
                                        </div>
No special code here

Group View Style

<div class="block-views <strong>teaser-shorten</strong>"><br />
                                          <h3 class="<strong>group-title</strong>">Title of the Block</h3><br />
                                          <div class="view"><br />
                                           <ul><br />
                                            <li><a href="">Contents of the block.</a></li><br />
                                            <li><a href="">Contents of the block.</a></li><br />
                                            <li><a href="">Contents of the block.</a></li><br />
                                            <li><a href="">Contents of the block.</a></li><br />
                                            <li><a href="">Contents of the block.</a></li><br />
                                          </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

<div class="block-views"><br />
                                          <div class="view <strong>views-simple</strong>"><br />
                                           <ul><br />
                                            <li><a href="">Contents of the block.</a></li><br />
                                            <li><a href="">Contents of the block.</a></li><br />
                                            <li><a href="">Contents of the block.</a></li><br />
                                            <li><a href="">Contents of the block.</a></li><br />
                                            <li><a href="">Contents of the block.</a></li><br />
                                          </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 />
                                    <strong><div class="scrollable-item"></strong><br />
                                        <strong><h3></strong>Newswire<strong></h3></strong><br />
                                        <strong><div class="scroll"></strong><br />
                                            <div class="views-row">Contents of the block.</div><br />
                                            <div class="views-row">Contents of the block.</div><br />
                                            <div class="views-row">Contents of the block.</div><br />
                                        <strong></div></strong><br />
                                    <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

 

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)
    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>  $(.block-topics ol, #block-data ul).easyListSplitter({ colNumber: 2 });</strong><br />
                    <strong>  $(#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

Sponsored Introduction Continue on to (or wait seconds) ×