Skip navigation
Menu

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


 


 

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


    

     
     

Title of the Block


    

    
Contents of the block.

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


    

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


 

  

No special code here

Group View Style

Title of the Block


 

Title 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


 

  

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

           
Contents of the block.

           
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

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

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

  • 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