Code Snippets

Developers may begin their builds with their own starting CSS which has generic styles that are used in almost all builds. Developers should also make sure to include matching styles for Dear Doctor photos, photo galleries, the map portlet, forms and other portlets that may not (yet) be on the site.

Breadcrumbs


<div id="siteCrumbs">

<pagecontextbar/> 

</div>

Click here for JavaScript file to change the default divider between breadcrumbs. Upload this file to your website and link it in the template.

Place these scripts in the <HTMLhead> of the template.


<script type="text/javascript">var switchTo5x=true;</script>

<script type="text/javascript" src="https://ws.sharethis.com/button/buttons.js"></script>

<script type="text/javascript">stLight.options({publisher: "88aaf4db-9d11-4207-bc6d-6d941cfcb83d", doNotHash: false, doNotCopy: false, hashAddressBar: false});</script>

Place the below code in your interior theme.


<span class="share_text">Share:</span>

<span class='st_sharethis'></span>

<span class='st_facebook'></span>

<span class='st_googleplus'></span>

<span class='st_twitter'></span>

<span class='st_pinterest'></span>

<span class='st_email'></span>

Featured Image

The featured image is most often used on interior pages that have a background image in the overview (h1) area.


<div class="background"> 

<PageMetadata attribute="featured_image" source="themepage" displaytype="image"/>

</div>

Dynamic Slideshow Text Height

This code makes the figcaption area auto-expand in height instead of being the height of the longest caption.


.cycle-slideshow .cycle-slide { height: 0}

.cycle-slideshow .cycle-slide-active {height: auto}

Dynamic Testimonial Height

This code makes the testimonials area auto-expand in height instead of being the height of the longest testimonial.



.testimonials div.slick-slide { height: 0; }

.testimonials div.slick-active { height: auto; }

Media Queries

Min-Width


@media screen and (min-width:768px) { }

Max-Width


@media screen and (max-width:768px) { }

Anchor Link Fix

Adjust according to the height of your fixed header.


.jump-link {
display: block;
margin-top: -170px;
padding-bottom: 170px; }

Append To

Place this script code in the <HTMLhead> of the template.


<script>

$(document).ready(function(){

$('.navInside').appendTo('#primary-navigation');

});

</script>

Place this code where you want the element to be moved to (template, theme, page layout etc.)


<nav id="primary-navigation"></nav>

Google Search Bar

Use the code for your specific site and place in the <HTMLhead> of the template.


<script> 

(function() {

var cx = '##################';

var gcse = document.createElement('script');

gcse.type = 'text/javascript';

gcse.async = true;

gcse.src = 'https://cse.google.com/cse.js?cx=' + cx;

var s = document.getElementsByTagName('script')[0];

s.parentNode.insertBefore(gcse, s);

})();



window.onload = function(){

document.getElementById('gsc-i-id1').placeholder = 

'Search...';

};

</script>

Place below code wherever you want the search box to display in the template.


<div class="searchBox">

&lt;gcse:Searchbox-only resultsUrl="/search-results"&gt;&lt;/gcse:Searchbox-only&gt;

</div>

Go to the search results page, then go to the page layout. Create a custom page layout with the following code:


<template>

&lt;gcse:Searchresults-only&gt;&lt;/gcse:Searchresults-only&gt;


<column order="1" />

</template>