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 |
*CSS class–> .thumbnail |
View Content Button |
*CSS class–> .more-link |
Call to Action Button
|
<div class="button-link">
*CSS class–> .button-link |
Call to Action Button extended with .align-left
|
<div class="button-link align-left">
*CSS class extender–> .align-left |
Block HighlightTitle of the Block
Contents of the block.
Contents of the block.
Contents of the block.
|
*CSS class–> .block-highlight |
Block Highlight, extended with .pointerTitle of the Block
Contents of the block.
Contents of the block.
Contents of the block.
|
*CSS class–> .block-highlight |
Block Highlight, extended with .pointer, extended with .align-leftTitle of the Block
Contents of the block.
Contents of the block.
Contents of the block.
|
*CSS class extender–> .align-left |
List SplitterTitle of the Block
Title of the Block
|
|
Views SimpleTitle of the Block
|
|
Scroller(image)
|
filename: views-view-list--VIEWNAME--block-DELTA.tpl.php
*To activate scoller, you must wrap your contents with the code highlighted in blue |
Imagessmall_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.jsjQuery(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
