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

Dev Wardsauto Com Site Files Wardsauto com Files Imagecache Small Img 11 Toyota Prius 1

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

Jul. 1, 2011

article

WardsAuto

Article Link

Body of teaser.

*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



					  View All

*CSS class--> .more-link

Call to Action Button

Submit



				  Submit

*CSS class--> .button-link

Call to Action Button extended with .align-left

Submit



				  Submit

*CSS class extender--> .align-left

Block Highlight

Title of the Block

Contents of the block.

Title of the Block

Contents of the block.

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

Title of the Block

Contents of the block.

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

Title of the Block

Contents of the block.

*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

Topic 1

Topic 2

Topic 3

Topic 4

*CSS class--> .split-col2*CSS class--> .split-col3*Adding either class to a div or view surrounding a or tag will generate the splitter

Regular View

Title of the Block

Contents of the block

Contents of the block.

No special code here

Group View Style

Title of the Block

Contents of the block.

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

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

Contents of the block.

*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

Dev Wardsauto Com Site Files Wardsauto com Files Authors Eric Mayne 2011 1

blogger imagecache preset: none, defined in cck in features

medium_img: category featured image; 355 x 200

Dev Pisces Penton Com Site Files Pisces Penton com Files Imagecache Medium Img Tree 0

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

Dev Pisces Penton Com Site Files Pisces Penton com Files Uploads 2010 12 Garden

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

Dl Dropbox Com U 6854233 Guide Screenshot Weather

First put your default style into the module folder --(avoid defining font-family)

filename: sites/all/modules/custom/weather/css/weather.css

		

		.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

		

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

Dl Dropbox Com U 6854233 Guide Screenshot Colsplitter

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

		

		jQuery(function($) {

		  $(.block-topics ol, #block-data ul).easyListSplitter({ colNumber: 2 });

		  $(#sitemap ol).easyListSplitter({ colNumber: 3 });

		});

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