Theme Guide

By

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

*CSS class–> .more-link

Call to Action Button

Submit

 

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

 

*CSS class–> .button-link

Call to Action Button extended with .align-left

Submit

 

 <div class="button-link align-left">
  <a>Submit</a>
</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="block-highlight">
    <h5 class="block-title">Title of the Block</h5>
    <div class="block-content">Contents of the block.</div>
</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="block-highlight pointer">
    <h5 class="block-title">Title of the Block</h5>
    <div class="block-content">Contents of the block.</div>
</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="block-highlight pointer align-left">
    <h5 class="block-title">Title of the Block</h5>
    <div class="block-content">Contents of the block.</div>
</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">
  <div class="view split-col2">
   <ul>
    <li>Topic 1</li>
    <li>Topic 2</li>
    <li>Topic 3</li>
    <li>Topic 4</li>
  </div>
</div><div class="view split-col3">*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

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">
  <div class="view views-simple">
   <ul>
    <li>Contents of the block</li>
    <li>Contents of the block</li>
    <li>Contents of the block</li>
    <li>Contents of the block</li>
    <li>Contents of the block</li>
  </div>
</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

<div class="scrollable-container">
    <div class="scrollable-item">
        <h3>Newswire</h3>
        <div class="scroll">
            <div class="views-row">Contents of the block.</div>
            <div class="views-row">Contents of the block.</div>
            <div class="views-row">Contents of the block.</div>
        </div>
    </div>
</div>

*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

dimensions: 141 x 79

Blogger profile

imagecache preset: none, defined in cck in features

dimensions: 60 x 70

medium_img: category featured image

dimensions: 355 x 200

 

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

From theChief MarketerNetwork

Programming

Disney Jr. Strikes While the Iron’s Hot

From
Branding/Marketing

Are We in the Opposite of Cancel Culture?

From
Latest

CMS Cracks Down on Medicare TPMOs

From