custom plugins

Blog Page Template

The Blog page template, part of Cornerstone, allows users to create a page that displays all posts from the site. It also allows the user to filter those posts by a specific category, author, tag, or any combination of these.

Filtering the Blog

Scroll down to the Custom Fields box. If you don't see this box, go to Screen Options on the top right of the page, and make sure the option is checked.

You can add one or all of the following fields: authors, categories, tags.

Each of these fields will accept one or more values to filter the posts by. If entering multiple values, be sure to separate them with commas.

screenshot

IFrames

Aurora has limited support for the use of iFrames. For security reasons, UITS must be extremely cautious in what domains to trust not to infect the many hundreds of websites that use Aurora. Currently, Aurora only permits the use of iFrames from the Google.com domain. This allows for the inclusion of:

  • Google Maps
  • Google Calendars
  • Google Docs, Spreadsheets, Presentations, and Drawings.

Using IFrames

IFrames must be entered in the text editor, not the visual editor. Pasting an iFrame into the visual editor will do nothing but display a lot of raw HTML code on your webpage.

This is an example iFrame code, taken from the Google Maps iFrame shown below:

<iframe src="https://maps.google.com/maps?f=q&amp;source=s_q&amp;hl=en&amp;geocode=&amp;q=Homer+Babbidge+Library,+Fairfield+Way,+Storrs,+CT&amp;aq=0&amp;oq=homer+&amp;sll=41.782143,-72.236374&amp;sspn=0.293388,0.600128&amp;ie=UTF8&amp;hq=Homer+Babbidge+Library,&amp;hnear=Fairfield+Way,+Storrs,+Connecticut&amp;ll=41.806595,-72.251727&amp;spn=0.006295,0.006295&amp;t=m&amp;output=embed" width="100%" height="250" frameborder="0"></iframe>

<small><a style="color: #0000ff;text-align: left" href="https://maps.google.com/maps?f=q&amp;source=embed&amp;hl=en&amp;geocode=&amp;q=Homer+Babbidge+Library,+Fairfield+Way,+Storrs,+CT&amp;aq=0&amp;oq=homer+&amp;sll=41.782143,-72.236374&amp;sspn=0.293388,0.600128&amp;ie=UTF8&amp;hq=Homer+Babbidge+Library,&amp;hnear=Fairfield+Way,+Storrs,+Connecticut&amp;ll=41.806595,-72.251727&amp;spn=0.006295,0.006295&amp;t=m">View Larger Map</a></small> 

For directions on getting your iFrame code, click the following tutorial links:

Examples

Google Maps

View Larger Map

Google Calendar

Google Docs

Google Slides

Glyphicons Guide

Glyphicons is a library of icons that can be added to links, headers, and buttons with a just bit of HTML. By adding classes to links, headings, or buttons, you can quickly draw attention to a section of your site.

Adding Glyphicons to Your Site

For sites using Cornerstone-based themes like Sherman and Hale 2015, site webmasters can add any of the glyphicons from Bootstrap 3. Go to the glyphicons website to search for glyphicons. When you find one you want to use, simply click on it and a code will appear for you to copy. Copy that code and paste it where you want the glyphicon to show up! It must be pasted in the text editor of the page's or post's edit screen.

Feel free to browse all the glyphicons on glyphicons.com. However, if you know what you're looking for, you can type keywords into the search bar at the top.

Example: up-arrow glyphicon

  1. Type "arrow" into the search bar
  2. Click on the desired icon and copy the HTML that appears

    The following is the full line of HTML that was copied:

    <span class="glyphicons glyphicons-arrow-up"></span>
  3. Paste that line of code into the text editor view of your page's edit screen:
Note: switching back to the visual editor after pasting a glyphicon code may result in the deletion of the code itself.

Styling Glyphicons

General

If you want to target all glyphicons on your site, you may do so using the .glyphicons class. For example, to change the size of all glyphicons to 24px, you would need to add the following to your Custom CSS:

.glyphicons{
font-size:24px;
}

Style by Type

To target only a specific type of glyphicon (such as the up arrow that was used in the previous example), you should do so using all of the classes that appear in its HTML code. For example, the code for the up arrow glyphicon is <span class="glyphicons glyphicons-arrow-up"></span>. The two classes that appear (separated by a space) are "glyphicons" and "glyphicons-arrow-up". Therefore, to target this glyphicon in our Custom CSS, we add a period before each class and remove the space inbetween:

.glyphicons.glyphicons-arrow-up{
font-size:24px;
}

Style by Instance

You can always add additional classes to certain glyphicons to get even more specific. For example, say I want to paste another up arrow glyphicon which I want to be blue, but I do not want the other one on this page to change its color. I can add a class "blue-glyphicon" which would result in the following HTML code:

<span class="glyphicons glyphicons-arrow-up blue-glyphicon"></span>

And I would target this glyphicon in my Custom CSS by adding the following CSS code:

.glyphicons.glyphicons-arrow-up.blue-glyphicon{
color:blue;
}

Now I will add the HTML to this page, resulting in a blue up arrow:

Hale and Prudence Themes

The Hale & Prudence themes were built with Bootstrap 2 and can therefore use any of the Bootstrap 2 Glyphicons. Add them using html like that shown below, swapping out the classes as described in the Bootstrap 2 website.

<i class="icon-search icon-white"></i>

Developers

Developers can make use of glyphicons in their custom themes by referencing to the centrally located global files available within their development sandboxes.