Guides-Advanced

Countdown Widget

The Countdown Widget can be used to remind your users of an upcoming deadline.

To add the widget to a page, enter the deadline date as the Event Date by selecting it on the calendar pop-up; Days Until Text is the label you want to display next to the countdown number; actionable text (ex: register by) may be entered in the Ends on Text field and a link can be entered in Widget Link field to make the widget clickable and linking to the desired website.

Countdown Widget Interface

Embedding Documents

Aurora allows you to embed documents into your pages or posts. This can be especially useful for those documents that tend to automatically download when clicked on, such as those of type .doc or .ppt. Below is a complete list of document types supported by this plugin:

  • Microsoft Word (docx, docm, dotm, dotx)
  • Microsoft Excel (xlsx, xlsb, xls, xlsm)
  • Microsoft PowerPoint (pptx, ppsx, ppt, pps, pptm, potm, ppam, potx, ppsm)
  • Adobe Portable Document Format (pdf)
  • Text files (txt)
  • TIFF Images (tif, tiff)
  • Adobe Illustrator (ai)
  • Scalable Vector Graphics (svg)

Embed DocumentOn the edit screen of a post or page, you can embed a document by clicking the Add Document button that appears above the content editor. Then click Upload Document, and you will be able to either choose an existing file or upload a new file.
 
 

Manually Migrating Websites

If you are importing a site that is not from a WordPress server, the Import/Export tools available in Aurora will not work. Instead, you will have to manually migrate your site over to the new Aurora-based one. It can be a daunting task to do this, especially if your site has more than a few pages! Below are steps to help you efficiently and completely migrate your site onto Aurora.

  1. Review Your Old Site
    • Go through all of your pages and decide what content you want to keep and what content you can omit from the migration.
  2. Decide on a Theme
    • You can choose between the Sherman theme and the Hale 2015 theme.  To change themes, go to Appearance > Themes. Then, hover over the theme you want and click Activate.
    • Both theme options have several color combinations that you can choose from. For live examples of these, view our Live Sites with Default Template page. To change your theme colors, go to Appearance > Customize > Colors. Choose an option, and click Save & Publish.
  3. Recreate Your Pages
    • First, notice that your new site came with a handful of pages and posts. If you do not want these, delete them.
    • For each page that you are keeping (excluding the homepage -- we'll get to that later), create a page on your Aurora site. Add the title but do not add any content yet. Doing so might send you off track if you have a page containing links to other pages, menus, or people that you haven't created yet.
    • For each blog post or news article that you are keeping, create a post on Aurora. Add the title but do not add content yet. This stage would be a good time to add any sorting Tags or Categories that you might use when creating different pages with the Blog template or Post widgets.
  4.  Add Menus
    • Start with editing your top navigation menu.
      • Note that even if you deleted the pages that came with your website, they will still appear as items in the top nav menu, so you will have to delete these when editing this menu.
    •  Next, create any other menus, including sidebar menus or menus that you would like to appear on your homepage.
  5. Create Sidebars and Add Widgets
    • Think about how many different sidebars you need to build for your site. Go to Appearance > Manage Sidebars to create and name each sidebar.
    • Next, go to Appearance > Widgets to add content to your sidebars, including any sidebar menus you had created during the previous step.
    • You can also take this time to edit the content of your Default Sidebar, which is automatically present next to any Archive page, Search Results page, or Post, or your Mega Footer, which is present at the bottom of every page on your site. Both of these can be edited in Appearance > Widgets.
  6. Add People
    • If you are migrating any pages that list faculty/staff/students/other people, you probably want to create People profiles for each person. Later, you can change those pages' Template to People and easily insert the desired information about specific people.
    • Note that your site came with one People profile -- Jonathan the Husky. If you do not want to keep this profile, you will have to delete it.
  7. Add Content
    • Now, you can go back through each page and add content from your old site as well as designate sidebars to specific pages.
      • Plain HTML should go in the Text editor.
      • If you're copying the content from a browser view, this should be pasted in the Visual editor.
    • Be careful with any internal links/images. Copy/paste works for most material.  Any image will need to be uploaded and re-linked to the current site.  Also links within the page that go to the source site will need to be updated.  Review documentation on how to upload and replace any media (images, pdfs, etc.).
  8. Edit Your Homepage
    • Some homepages are easy to migrate and others are not. You might even wish to consider a complete overhaul of your homepage as you build it on Aurora! For a comprehensive guide on building your homepage in Aurora, see our Homepage Customization guide.
  9. Go Live
    • See our Going Live guide to review the steps you should take immediately before and after going live with your site.

Authors

All posts and pages have one or more authors. The default author is the user who created the post, but more authors can be added and the original author can be removed given that there is at least one more author assigned to that post. In fact, authors do not even have to be users -- profiles may be created for "Guest Authors" and then these profiles may be assigned as authors on posts. Note that this post has two authors, as is displayed in its byline.

Assigning Authors to Posts

To be able to add or change post authors, the Authors section must be enabled on the post's edit screen. This can be done by checking the Authors box under Screen Options at the top of the page.

To add an author, start typing their name in the box labeled 'Search for an author'. The author should then appear below the search box, and you can click on the result to add the author to the post.

Add author to a post

Multiple Authors on a post

Once a post contains multiple authors, you may click and drag an author to change the order they appear in the byline. A Remove link also appears next to each author's name. If you click on the name of an author you can edit their display name.

Adding a Guest Author

To add a guest author, go to Users > Guest Authors and click Add New.

Guest Authors

On the Add New Guest Author screen, fill out any applicable fields and click Add New Guest Author under Save. You may now search for and add this author in a post just as you would any user.

Add a new guest author

Accordions

Sometimes, you may find that a page or post has too much information and requires a lot of scrolling as a result. One way to fix this is by using collapsible accordions. You will need to use the Page Builder editor.

Creating Accordions

In Page Builder, create one new Visual Editor widget for each item in the accordion. In each Visual Editor widget, click on Attributes and check the box under Accordion, so that it is enabled. Then, add the title and content. Note that the title of the visual editor becomes the accordion header, and clicking on the title will expand the item's content. So, each Visual Editor with Accordion enabled must contain a title in the Title field.

If you stack multiple Visual Editors with Accordion enabled on top of each other (in the same column), they will be grouped together and as a result, clicking on one item’s title will expand its content while collapsing all other items.

Styling Accordions

Accordions are easily to style using your site's Custom CSS. We have also put together a guide with several pre-made accordion styles along with CSS that you can copy and paste onto your own website.

Below is an example of an accordion menu.

Panel 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam semper, justo sed ultrices aliquam, arcu tellus malesuada ante, eget faucibus ante ex id leo. Nunc rutrum, neque nec elementum vulputate, tellus nisi molestie neque, non viverra diam felis sollicitudin diam. Sed venenatis, ipsum sit amet pharetra congue, arcu velit viverra metus, sed iaculis neque libero ac lorem. Praesent dolor turpis, porttitor a augue ac, euismod suscipit magna. Nunc tellus tortor, dapibus at facilisis ut, maximus sed lacus. Nullam et est vitae mauris ornare accumsan. In eu dictum metus. Suspendisse ullamcorper ligula ut fringilla feugiat. Etiam iaculis consectetur varius. Phasellus hendrerit blandit lorem, commodo fringilla purus finibus at.

Panel 2

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam consequat commodo elit sit amet mollis. Sed condimentum ipsum sed nulla malesuada sagittis. In mattis interdum dolor eget tempus. Morbi dapibus volutpat arcu, et finibus mi ultricies quis. Donec blandit sapien enim, ut volutpat tellus tempus aliquet. Sed at turpis lectus. Ut sed posuere leo, sit amet condimentum sem. Nam bibendum augue lacus, nec laoreet diam congue et. Suspendisse eget rhoncus magna, ac tincidunt orci. Nam porttitor gravida urna id feugiat. Nullam consequat vehicula tortor, id interdum ex luctus vitae. Nullam dignissim tortor nec molestie condimentum. Donec ante turpis, varius a interdum nec, lobortis venenatis nunc.

Proin consectetur, quam quis cursus molestie, quam nunc blandit purus, eu facilisis augue nisl quis felis. In id fermentum felis. Curabitur nec felis sed elit rutrum malesuada sit amet nec ipsum. Donec ac efficitur dui. Fusce semper blandit purus, at eleifend arcu tristique commodo. Suspendisse turpis arcu, aliquet nec rutrum lacinia, interdum sed eros. Proin finibus, felis eget finibus molestie, erat ante mollis leo, et condimentum nunc lectus a velit. Proin et lacus posuere, tincidunt elit quis, dapibus augue. Fusce placerat tempus efficitur. Etiam nec facilisis velit. Curabitur vulputate dolor ac metus sollicitudin, in commodo lacus aliquam. Sed risus dui, fringilla non ultricies non, pellentesque non enim. Vestibulum ut ornare nulla, non malesuada erat.

Nulla metus metus, ullamcorper vel, tincidunt sed, euismod in, nibh. Quisque volutpat condimentum velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam nec ante. Sed lacinia, urna non tincidunt mattis, tortor neque adipiscing diam, a cursus ipsum ante quis turpis. Nulla facilisi. Ut fringilla. Suspendisse potenti. Nunc feugiat mi a tellus consequat imperdiet. Vestibulum sapien. Proin quam.

Etiam ultrices. Suspendisse in justo eu magna luctus suscipit. Sed lectus. Integer euismod lacus luctus magna. Quisque cursus, metus vitae pharetra auctor, sem massa mattis sem, at interdum magna augue eget diam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi lacinia molestie dui. Praesent blandit dolor. Sed non quam. In vel mi sit amet augue congue elementum. Morbi in ipsum sit amet pede facilisis laoreet. Donec lacus nunc, viverra nec, blandit vel, egestas et, augue. Vestibulum tincidunt malesuada tellus.

Ut ultrices ultrices enim. Curabitur sit amet mauris. Morbi in dui quis est pulvinar ullamcorper. Nulla facilisi. Integer lacinia sollicitudin massa. Cras metus. Sed aliquet risus a tortor. Integer id quam. Morbi mi. Quisque nisl felis, venenatis tristique, dignissim in, ultrices sit amet, augue. Proin sodales libero eget ante. Nulla quam. Aenean laoreet. Vestibulum nisi lectus, commodo ac, facilisis ac, ultricies eu, pede.

Panel 3

Integer sed laoreet justo. Cras quis urna rutrum, faucibus augue sed, vestibulum enim. Donec porta nulla quis neque rutrum pellentesque. Nulla gravida at dui quis vestibulum. Sed sed ante ac ipsum suscipit mollis. Mauris purus ligula, egestas vitae gravida viverra, tincidunt ac enim. Suspendisse iaculis sem eros, non iaculis est rhoncus sit amet. Aliquam elementum lacinia tempor. Integer accumsan lacus elit, nec mattis eros dictum in. Phasellus auctor est quam, nec euismod quam facilisis quis. Vivamus gravida ante venenatis, dignissim nunc et, pellentesque nisl. Suspendisse lobortis accumsan massa, consectetur fringilla sapien volutpat ut. Pellentesque at arcu at enim condimentum faucibus. Nullam at lectus augue. Curabitur vitae elit ipsum. Suspendisse vel convallis metus.

Maecenas vel finibus metus. Maecenas eu aliquam nunc. Sed eros nisl, ornare ut laoreet et, pulvinar vestibulum elit. Etiam ultricies pretium dignissim. Phasellus fringilla vestibulum erat, egestas faucibus purus congue ut. Aenean rhoncus maximus augue, quis bibendum velit laoreet et. Integer a consectetur enim. Sed cursus urna blandit dui elementum mollis. Praesent sit amet dolor imperdiet, cursus lacus id, venenatis urna. Aenean ac dolor lorem.

Here is what the edit screen of this page looks like:

easy-accordions-edit-screen

Note that only the second, third, and fourth Visual Editors have Accordion enabled.

Importing Sites

Accessing the Import Tool

On the dashboard go to Tools > Import.

From there, you can import data that was exported from the listed Web Content Management systems.

Importing from WordPress

If you are importing from another WordPress site, be sure to include the media & attachments. The XML file you're importing only contains the text of pages and posts.

What Gets Imported

Posts, Post Categories, Pages, Authors, and some items from the Media Library get imported. If you select 'Import attachments' and the site is still online at its original address then the import tool will grab copies of every file (images, documents, etc), add them to your media library, and keep them in the appropriate pages and posts. Items in the Media Library that are not currently in use by a page or post on your original site will be left behind.

What's Not Imported

Settings, Sidebar Arrangements, and Widget Configurations are not imported. If you were using a custom theme, or plugins that are not supported in Aurora, those will not be imported either. Depending what kind of theme or plugins you were using, this may "break" your site, so be sure to inspect your site after an import to be certain everything is correct.

Dreamweaver Templates

You cannot import data directly from Dreamweaver template sites, or from sites that were built with basic HTML files. Those sites will need to be copy/pasted into new pages manually.

Exporting Sites

You can export your site at any time by logging in and using the Tools > Export screen.

This option is useful for developers that want to try out a custom theme or plugin using their site's actual data, or for websites in Aurora that need to be moved to another server.

export page screenshot

 

Forms

Note that Gravity Forms uses a separate import/export tool from the rest of WordPress. So, if you need to move forms, be sure to use its tool as well.

Theme Color Customization

This CSS allows you to alter the various colors throughout your Sherman theme. Look for the snippet of code you need and copy/paste it in the Custom CSS section of your site. The color attribute supports values like red and blue as well as more fine-grained hex codes such as #ee6832 and #ffcc33. You can easily find a color’s hex value at http://www.colorpicker.com/.

Header

/* Background Color on Header - Primary */
#masthead {
background:red
}

/* Line Between UConn Header and Site Header - Secondary */
#uc-header {
border-bottom-color:green
}

Footer

/* Links - Primary */
#mega-footer .widget a {
color:red
}

/* Line Above Footer - Secondary */
#footers {
border-color:green
}

Mega Menu

/* Mega Menu Background Color */
#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu > ul.mega-sub-menu {
background:linear-gradient(to bottom,black,black)
}

/* Mega Menu Header Links */
#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu > ul.mega-sub-menu > li.mega-menu-item > a.mega-menu-link {
color:red
}

/* Mega Menu Header Links On Hover */
#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu > ul.mega-sub-menu > li.mega-menu-item > a.mega-menu-link:hover {
color:#fff
}

/* Mega Menu Subheader Links */
#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu > ul.mega-sub-menu > li.mega-menu-item li.mega-menu-item > a.mega-menu-link {
color:#fff
}

/* Mega Menu Subheader Links On Hover */
#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu > ul.mega-sub-menu > li.mega-menu-item li.mega-menu-item:hover > a.mega-menu-link {
color:red
}

/* Mega Submenu Background Color */
#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-flyout ul.mega-sub-menu li.mega-menu-item a.mega-menu-link {
background-color:#000
}

/* Mega Submenu Links */
#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-flyout ul.mega-sub-menu li.mega-menu-item a.mega-menu-link {
color:#fff
}

/* Mega Submenu Links On Hover */
#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-flyout ul.mega-sub-menu li.mega-menu-item a.mega-menu-link:hover {
color:red
}

Body

/* Headings - Secondary */
h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6 {
color:green!important
}

/* Widget Titles - Secondary */
.home #content .panel-grid .widget .widget-title {
color:green
}

/* Widget Titles - Secondary */
.home #content .widget .widget-title {
color:green
}

/* Main Page Links - Secondary  */
.home #content .panel-grid .widget a {
color:green
}

/* Subpage Links - Secondary */
.subpage .widget a {
color:green
}

/* Subpage Links - Secondary */
.entry-content a {
color:green
}

/* Subpage Visited Links - Primary */
.entry-content a:visited {
color:red
}

/* Sidebar Links - Secondary */
#page-sidebar .widget a {
color:green
}

/* Subpage Widget Titles - Secondary */
.subpage .widget .widget-title {
color:green
}

/* AZ Page Links - Secondary */
a.az-letter-page {
color:green
}

/* Events Calendar Date - Secondary */
.home #content .panel-grid .widget .uc-cal .uc-cal-item .uc-cal-event .uc-cal-event-date {
color:green!important
}

/* Events Calendar Title - Secondary */
#content .panel-grid .widget .uc-cal .uc-cal-event-title {
color:green!important
}

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.