Guides-Advanced

Social Media Icon Styles

This is the code to change the color of each social media icon. You can view all of the icons in their original color as well as their hover states below.

Blog Lovin’

.simple-social-icons ul li.ssi-bloglovin a {
background-color:#24BEF2!important;
color:white!important;
border:0 black solid!important
}

.simple-social-icons ul li.ssi-bloglovin a:hover {
background-color:#0da6d9!important;
color:white!important;
border:0 black solid!important
}

Dribbble

.simple-social-icons ul li.ssi-dribbble a {
background-color:#ea4c89!important;
color:white!important;
border:0 black solid!important
}

.simple-social-icons ul li.ssi-dribbble a:hover {
background-color:#e73277!important;
color:white!important;
border:0 black solid!important
}

Email

.simple-social-icons ul li.ssi-email a {
background-color:#999999!important;
color:white!important;
border:0 black solid!important
}

.simple-social-icons ul li.ssi-email a:hover {
background-color:#808080!important;
color:white!important;
border:0 black solid!important
}

Facebook

.simple-social-icons ul li.ssi-facebook a {
background-color:#3b5998!important;
color:white!important;
border:0 black solid!important
}

.simple-social-icons ul li.ssi-facebook a:hover {
background-color:#324b81!important;
color:white!important;
border:0 black solid!important
}

Flickr

.simple-social-icons ul li.ssi-flickr a {
background-color:#ff0084!important;
color:white!important;
border:0 black solid!important
}

.simple-social-icons ul li.ssi-flickr a:hover {
background-color:#cc0069!important;
color:white!important;
border:0 black solid!important
}

Github

.simple-social-icons ul li.ssi-github a {
background-color:black!important;
color:white!important;
border:0 black solid!important
}

.simple-social-icons ul li.ssi-github a:hover {
background-color:#404040!important;
color:white!important;
border:0 black solid!important
}

Google Plus

.simple-social-icons ul li.ssi-gplus a {
background-color:#dd4b39!important;
color:white!important;
border:0 black solid!important
}

.simple-social-icons ul li.ssi-gplus a:hover {
background-color:#c43421!important;
color:white!important;
border:0 black solid!important
}

Instagram

.simple-social-icons ul li.ssi-instagram a {
background-color:#517fa4!important;
color:white!important;
border:0 black solid!important
}

.simple-social-icons ul li.ssi-instagram a:hover {
background-color:#436989!important;
color:white!important;
border:0 black solid!important
}

LinkedIn

.simple-social-icons ul li.ssi-linkedin a {
background-color:#007bb6!important;
color:white!important;
border:0 black solid!important
}

.simple-social-icons ul li.ssi-linkedin a:hover {
background-color:#006999!important;
color:white!important;
border:0 black solid!important
}

Pinterest

.simple-social-icons ul li.ssi-pinterest a {
background-color:#cb2027!important;
color:white!important;
border:0 black solid!important
}

.simple-social-icons ul li.ssi-pinterest a:hover {
background-color:#b01c21!important;
color:white!important;
border:0 black solid!important
}

RSS

.simple-social-icons ul li.ssi-rss a {
background-color:#ff6600!important;
color:white!important;
border:0 black solid!important
}

.simple-social-icons ul li.ssi-rss a:hover {
background-color:#cc5200!important;
color:white!important;
border:0 black solid!important
}

StumbleUpon

.simple-social-icons ul li.ssi-stumbleupon a {
background-color:#EB4823!important;
color:white!important;
border:0 black solid!important
}

.simple-social-icons ul li.ssi-stumbleupon a:hover {
background-color:#d23614!important;
color:white!important;
border:0 black solid!important
}

Tumblr

.simple-social-icons ul li.ssi-tumblr a {
background-color:#32506d!important;
color:white!important;
border:0 black solid!important
}

.simple-social-icons ul li.ssi-tumblr a:hover {
background-color:#284157!important;
color:white!important;
border:0 black solid!important
}

Twitter

.simple-social-icons ul li.ssi-twitter a {
background-color:#00aced!important;
color:white!important;
border:0 black solid!important
}

.simple-social-icons ul li.ssi-twitter a:hover {
background-color:#0096cc!important;
color:white!important;
border:0 black solid!important
}

Vimeo

.simple-social-icons ul li.ssi-vimeo a {
background-color:#aad450!important;
color:white!important;
border:0 black solid!important
}

.simple-social-icons ul li.ssi-vimeo a:hover {
background-color:#9ccd32!important;
color:white!important;
border:0 black solid!important
}

Youtube

.simple-social-icons ul li.ssi-youtube a {
background-color:#bb0000!important;
color:white!important;
border:0 black solid!important
}

.simple-social-icons ul li.ssi-youtube a:hover {
background-color:#990000!important;
color:white!important;
border:0 black solid!important
}

Auto-Filling Fields in Gravity Forms

First, select the form you would like to edit in the dashboard. After setting up the field you want to populate, hover over it and expand more options by clicking the blue arrow that appears. Then to define what value should be used to dynamically populate the field, click the ‘Advanced’ Tab.

Gravity Forms Auto-fill 1

At this point, you will see an input field called ‘Default Value’. Hovering over the question-mark will show you that you can use merge tags here to pre-populate the value of your field. To access some default merge tags, you can use the dropdown to the right of the ‘Default Value’ input for some merge tags like ‘User Display Name’ and ‘User Email’. For a full list of merge tags, visit the Merge Tags page in the Gravity Forms documentation.

Gravity Forms Auto-fill 2

In order to auto-fill the value of your field with a logged-in user’s email-address, you can use the dropdown or enter {user:user_email} in ‘Default Value’. There are many different tags you can use and they can all be found at the previously-linked Merge Tags page along with helpful information on how to use them.

Note: The ‘user_login’ merge tag will auto-fill the user’s NetID.

Gravity Forms

Gravity Forms provides merge tags that allow you to dynamically populate fields in forms using information about a user logged into your website. In order to use information about a user completing your form, the page your form is on should be private. This feature can be useful if, for example, you want to setup a newsletter subscription form. Using merge tags, you can auto-fill the name and email-address of a user so they do not have to.

Cloning Posts with Page Builder

You can copy the layout and information from one Post or Page onto another as long as it was built using Page Builder. In fact, you can even clone a Post’s contents onto a Page and vice versa!

Steps

  1. Go to the Post or Page to which you want to copy another’s content
  2. Select Page Builder mode
    page-builder-1
  3. Click Layouts
  4. Depending on whether you’re copying information from a Post or a Page, click Clone: Pages or Clone: Posts, respectively
    page-builder-3
  5. Select the Page/Post you wish to copy and click Insert. Select whether you want to insert the contents after what’s currently on the Page/Post, before what’s currently on the Page/Post, or replace anything that’s currently on the page
    page-builder-4

Page Builder

The Site Origin Page Builder is a plugin that allows sites to create rows, columns, and insert widgets directly into a normal page. It is supported by the Sherman and Hale 2015 themes.

When creating or editing a post or page, click on the Page Builder tab next to the Visual and the Text tabs to enable Page Builder, where you can start adding rows, columns and then adding widgets to build the post or page. Page Builder gives unlimited flexibility for layout and widget functions on the posts or pages.

Page Builder

Max Mega Menu

The Max Mega Menu plugin allows sites to have huge dropdown sections that can include menus, arbitrary text, images, or even widgets. It's supported by the Sherman and Hale 2015 themes.

This plugin is only recommended for users comfortable with using more advanced interfaces and site options. To enable this on your site, please contact the Aurora team, and we'll set you up.

Enabling the Mega Menu

Enable Mega MenuTo gain Max Mega Menu capabilities on a menu, go to Appearance > Menus and select your desired menu. On the right you'll see a panel labeled Max Mega Menu Settings, and in that panel you'll see the option to Enable the Mega Menu. Be sure to click Save after you check the box.

Mega Menu Settings

Under the panel labeled Max Mega Menu Settings, users can customize how the appearance of the menu.

The Event drop down allows you to choose whether a user must hover over a menu item or click on it to display its Mega Menu content.

The Effect drop down allows you to choose how the menu content appears on the screen (Fade, Fade Up, Slide, Slide Up) and with what speed (Slow, Med, Fast).

 

Editing Mega Menu Items

If the Mega Menu is enabled, you will see a Mega Menu button appear on each of your menu items as you hover over them. Click on one to edit that item as well as its sub menu. Within this editor you have three different tabs: Mega Menu, Settings, and Icon.

Mega MenuMega Menu Edit Screen pic

  • In the Mega Menu edit screen, you must first change the drop down menu labeled Sub menu display mode from Flyout menu to Mega Menu. If you keep it as Flyout menu, only the sub items listed underneath the menu item in your menu structure will appear and any widgets you had added to the item's Mega Menu will be disabled. When you switch to Mega Menu, you will be able to display widgets as well as sub menu items.
  • Add widgets to the mega menu by choosing them from the drop down menu at the top right. Once a widget is added, you can edit it by clicking on the wrench icon that appears in it.
  • You can choose how many columns your mega menu has through a drop down menu at the top right. In addition, you can choose the number of columns each individual widget takes up by clicking the left (decrease) or right (increase) arrows that appear on it. You may drag and drop widgets or sub menu items to rearrange them.

SettingsMega Menu Settings Edit Screen

  • The Settings edit screen contains various options for users to edit the appearance of the menu item, such as hiding the text, hiding the arrow, aligning it on the header, and disabling its link. Users may also choose to hide the item on mobile view or on desktop view. This edit screen also allows users to choose how the sub menu is aligned and whether to hide it on mobile.

Icon

  • The Icon edit screen gives users the option to choose an icon to be displayed next to the text on the menu item.

Meta Slider

Meta Slider is the primary slideshow tool for Aurora. It can be accessed from the left-hand menu on your dashboard.

To add a new slider, click the + tab at the top of the screen. You can then rename your slider by clicking directly on its tab.

   

Then, simply click the Add Slide button to start adding slides!

 

Types of Slides

On the left-hand side of the Add Slide window, there is a menu with different types of slides that can be added to a Meta Slider. Below is a description of each.

Image

The most common type of slide is an Image slide. For this slide the user must either choose an image from their Media Library or upload a new image.
 

External URL

This slide type is used if the user wants to embed an image located elsewhere on the web. To use this slide type, the user must click Add to slider before they can insert the image URL.
 

Layer Slide

To create an image slide with layers, such as text, links, and more, add a Layer Slide. Like the Image slide type, the user must either select an image from the Media Library or upload one. Once the slide is added to the slider, the user can click ‘Launch Layer Editor’ under the General tab of the slide in order to add/edit layers. The above image shows the layer edit screen.

For more information, view the layer slides guide on the Meta Slider official website.

Vimeo/YouTube

Both Vimeo and YouTube are sites that host videos. For both of these slide types, the user must add a video URL from Vimeo or YouTube, respectively, and that video will be embedded into the slide.
 

Post Feed

This slide type embeds posts into the slider. Like the External URL slide type, the user must click Add to slider before they can choose which posts are displayed.

Under the slide's Display Settings tab users can choose how many posts will be displayed (Post Limit), and each post displayed will have its own slide. Through Display Settings users can also choose how the posts are ordered. If the user only wants posts of a certain category, the user may choose this under the slide's Taxonomy tab. Only posts with a Featured Image can be displayed.

Common Settings

There are many settings through which a user can customize their slideshow. Here is a breakdown of some of the more commonly utilized options available:

  • Navigation — Users can opt to have different types of navigation displayed below their slider to make it easier for viewers to get to a specific slide. However, there is also the option to hide the navigation altogether, which may be a better option for a slideshow consisting only of images. Users can also opt to display left and right arrows on their slider as navigation.
  • Slide delay — Located in the Advanced Settings, the slide delay determines how long each slide is shown before moving onto the next. If any slides have captions, users should be aware how long it takes to read these captions and alter the delay speed accordingly.
  • Stretch — The Flex, R., and Nivo sliders all have the option under Advanced Settings of 100% wide output. If this box is checked, it means that the slider will grow to fit the space it is in if necessary, even if the space is wider than its set width.

Types of Sliders

There are four types of sliders that you can choose from: Flex, R., Nivo, and Coin. Each slider has a slightly different feel to it and some of the settings vary from slider to slider. The best way to determine which slider is right for a specific slideshow is to try them all out! Users can easily preview a slideshow without adding it to a Page or Post by clicking the Save & Preview button at the top right of the slideshow's edit screen. Below are examples of each slideshow type.

Flex Slider

  • Sunrise From the International Space Station
    Sunrise From the International Space Station

Nivo Slider

Aurora 1 Aurora 3 Aurora 2

R. Slider

  • Antennae Galaxies
    Antennae Galaxies
  • Great Lakes and Central U.S. Viewed From the International Space Station
    Great Lakes and Central U.S. Viewed From the International Space Station
  • Aurora at UITS
    Aurora at UITS
  • Space
    Space
  • Aurora Borealis
    Aurora Borealis
  • Sunset Over the Gulf of Mexico
    Sunset Over the Gulf of Mexico
  • Sunrise From the International Space Station
    Sunrise From the International Space Station

Coin Slider

Private Pages

Private options

To make a single page private in an otherwise public site, simply edit the Visibility attribute of the page, located within the Publish block on the top right when editing a page.

Making a page private will:

  • Remove the page from the Navigation
  • Remove the page from any WordPress Menus
  • Remove the page from your site’s A-Z Template
  • Require a NetID SSO Login before viewing

Having a private page will limit the access to that page. However, any images, documents, or other media on the page will not be private. It is possible for users to access the links of those items directly, with no login required. This feature is appropriate for sites that wish to limit access to certain content, but do not require things to be secure in a more rigorous sense.

Keep in mind that these pages do not meet legal standards for security.

 

Linking to Private Pages

Private pages are removed from all navigation and menus. If you wish to link to them somewhere on your site, you will need to either create links to these pages manually with copy and paste or create a page having the List Private Pages template.

List Private Pages Template

This template displays all the private child pages of the current page.

One way to use this template effectively:

  1. Create a new page; you can call it “My Private Pages”
  2. On the right under Page Attributes, change ‘Template‘ to ‘List Private Pages
  3. Now go to Pages > All Pages
  4. Select a number of pages you wish to be made private
  5. Use the Bulk Actions menu item, edit the pages and change ‘Parent‘ to ‘My Private Pages
  6. Go to Pages and then to the page “My Private Pages”
  7. Select View Page, and then copy the web address from the browser
  8. Log back into the dashboard, and go to Appearance > Menus
  9. Select the ‘Footer‘ menu
  10. Add a Custom Link to your menu
  11. Paste the URL to “My Private Pages” into the field, and name it “Intranet” or “Staff Only”
  12. Save the menu

Now, you’ll have a small intranet section of your larger site, conveniently linked in the footer of every page.

A-Z Index Template

This page template will automatically generate a list of all pages from your Aurora site and list them in alphabetical order.

To assign a page the A-Z index template, locate the menu on the right side of the editing screen entitled ‘Page Attributes.’ Under ‘Template‘, select ‘A-Z Index‘.

page attributes screenshot
Find the Page Attributes box on the right and click the Template menu.
Screenshot
Then, select ‘A-Z Index’.

For a working example, view the Aurora site’s A-Z Index.

Excluding Pages

By default, the A-Z Index will display every single published page in the site, but it is possible to override that behavior and specify a few pages to leave out.

To do this, first you must find the ID number of the page you wish to exclude. Edit the page in question, and look at the URL bar in your browser. You’ll see a number there that looks like this:

screenshot
In this example, the ID number is 1799

Next, you’ll edit the A-Z Index page. If you scroll down, you’ll see a box labeled custom fields.

If you don’t see this box, you’ll want to go to the ‘Screen Options’ tab at the very top right of the page and click the checkbox next to Custom Fields, and then scroll down once more.

In the Custom Fields box, add a new custom field called exclude, and add the number of the page to exclude. When adding multiple pages, use a comma to separate the ID numbers.

screenshot

Save the changes to the page, and you’re done!

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