Guides

Using LaTex Formats

LaTeX is widely used in academia for the communication and publication of scientific documents in many fields, including mathematics, statistics, computer science, engineering, chemistry, physics, economics, quantitative psychology, philosophy, and political science. This typsetting language allows users to display properly formatted complicated formulas.

You may embed latex using a variety of different syntaxes. The shortcode syntax is preferred by adding the [ latex] [/latex] tag.
Additionally, you can use native mathjax syntax by surrounding the formula with double dollar signs $$ . Enter the latex code into the Text editor (not Visual editor).

Sample Code:

[latex] E=mc^2 [/latex]

$$ i\hbar\frac{\partial}{\partial t}\left|\Psi(t)\right>=H\left|\Psi(t)\right> $$

will display as

\(E=mc^2\)
$$ i\hbar\frac{\partial}{\partial t}\left|\Psi(t)\right>=H\left|\Psi(t)\right>$$

For more documentation on how to use LaTex, please refer to https://www.latex-project.org

Facebook

Facebook offers Social Plugins for integrating into websites. You can use embed codes for adding content already published on Facebook, and you can enable the Facebook's SDK to enable more features on your site.

Using Embed Codes

Facebook uses iframes to embed content. To add content, you will need to include the iframe code in the text editor of the page you are editing. You can also embed the iframe in a Text Widget. To learn more about using iframes in Aurora, visit the IFrame Guide

To find the Embed code to use, open the menu in the upper right hand of the Facebook content, and select Embed.

Embed Example

 

Embed Example 2

Embedded Post

Embedded Posts are a simple way to put public posts - by a Page or a person on Facebook - into the content of your web site or web page. Only public posts from Facebook Pages and profiles can be embedded.

<iframe style="border: none; overflow: hidden;" 
src="https://www.facebook.com/plugins/post.php?href=https%3A%2F%2Fwww.facebook.com%2FUConn%2Fposts%2F1724631187547128&width=500" 
width="500" height="475" frameborder="0" scrolling="no"></iframe>

Embedded Video

With the embedded video player you can easily add Facebook videos and Facebook live videos to your website. You can use any public video post by a Page or a person as video or live video source.

<iframe style="border: none; overflow: hidden;" 
src="https://www.facebook.com/plugins/video.php?href=https%3A%2F%2Fwww.facebook.com%2FUConn%2Fvideos%2F1688010137875900%2F&show_text=0&width=560" 
width="560" height="311" frameborder="0" scrolling="no" allowfullscreen="allowfullscreen"></iframe>

Embedded Comment

Embedded comments are a simple way to put public post comments - by a Page or a person on Facebook - into the content of your web site or web page. Only public comments from Facebook Pages and profiles can be embedded.

<iframe style="border: none; overflow: hidden;" src="https://www.facebook.com/plugins/comment_embed.php?href=https%3A%2F%2Fwww.facebook.com%2FUConn%2Fposts%2F1713005015376412%3Fcomment_id%3D1713032468707000&include_parent=false" width="560" height="181" frameborder="0" scrolling="no"></iframe>

Using Facebook SDK

Aurora has included an option to add additional Facebook Social Plugins under Settings > General > Enable Facebook SDK

For users comfortable with customizing html, Facebook Social Plugins online documentation has many options for configuring settings. Please be aware that if you use the Get Code button from the Code Configurators in the online documentation, you will not need to follow Step 1 or Step 2. Aurora will do these steps for you when the Enable Facebook SDK setting is enabled. You will only follow Step 3 to copy the configurated plugin to your site.

To add the following plugins configure your code and include it into the text editor of the wordpress page.

Like Button

A single click on the Like button will 'like' pieces of content on the web and share them on Facebook. You can also display a Share button next to the Like button to let people add a personal message and customize who they share with.

<div class="fb-like" 
data-href="http://aurora.uconn.edu/2017/08/08/facebook/" data-layout="standard" 
data-action="like" data-size="small" data-show-faces="true" data-share="true"></div>

Share Button

The Share button lets people add a personalized message to links before sharing on their timeline, in groups, or to their friends via a Facebook Message.

<div class="fb-share-button" data-href="http://aurora.uconn.edu/2017/08/08/facebook/" data-layout="button_count"></div>

Send Button

The Send button lets people privately send content on your site to one or more friends in a Facebook message.

<div class="fb-send" data-href="http://aurora.uconn.edu/2017/08/08/facebook/"></div>

Save Button

The Save button lets people save items or services to a private list on Facebook, share it with friends, and receive relevant notifications. For example, a person can save an item of clothing, trip, or link that they're thinking about and go back to that list for future consumption, or get notified when that item or trip has a promotional deal.

<div class="fb-save" data-uri="http://aurora.uconn.edu"></div>

Follow Button

The Follow button lets people subscribe to the public updates of others on Facebook. Learn more about configuring the Follow Button here.

<div class="fb-follow" data-href="https://www.facebook.com/UConn" data-layout="standard" data-size="small" data-show-faces="true"></div>

Additional Social Plugins

Facebook has the following plugins also available when the SDK is enabled.

Page Plugin

The Page Plugin lets you easily embed and promote any Facebook Page on your website. Just like on Facebook, your visitors can like and share the Page without leaving your site. There are many available settings available to configure this plugin. You will have to enable the Facebook SDK from the admin panel and use an iframe.
Visit Facebook's Guide to Page Plugins to learn more.

<iframe style="border: none; overflow: hidden;" 
src="https://www.facebook.com/plugins/page.php?href=https%3A%2F%2Fwww.facebook.com%2Fpg%2FUConn&tabs=timeline&width=340&height=500&small_header=false&adapt_container_width=true&hide_cover=false&show_facepile=true" 
width="340" height="500" frameborder="0" scrolling="no"></iframe>

Quote

The quote plugin lets people select text on your page and add it to their share, so they can tell a more expressive story. Highlight any text on this page to see the Quote popup. To add this feature to your page, include the following html to the bottom of your page's content.

<div class="fb-quote"></div>

Comments

The option to allow a Facebook comment thread on your post is available. It is recommended that comment moderating is set up before implementing this feature. Check out Facebook's Guide to Comment Moderation.

<div class="fb-comments" 
data-href="http://aurora.uconn.edu/2017/08/08/facebook/" 
data-numposts="3"></div>

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

Google Docs

While you can display a document on your site by uploading it, you may also do so using its iFrame code if it is a Google Doc. Here’s how:

  1. Make sure the document is public
    1. On the view screen of your document, click the Share button on the upper left corner
    2. Click Advanced
    3. Under Who has access, click Change… and select either On – Public on the web or On – Anyone with a link
    4. Click Save, then Done
  2. Get the iFrame code
    1. On the view screen of your document, click File > Publish to the web
    2. Click the Publish button.
    3. Click the Embed tab. From there, you may copy the resulting iFrame code.
  3. Paste the iFrame code into the text editor of the page on Aurora.

Maps

Maps can be a great way to display a location on your site. They allow users to zoom in and out and view the surrounding area without having to leave the page! Aurora supports the embedding of Google Maps. Below are instructions on how to do so.

  1. Go to Google Maps (https://www.google.com/maps)
  2. Enter the location
  3. Click on Share
  4. Click on Embed map
  5. Copy the iFrame code that displays
  6. Paste in the text editor of your page/post

Example

Here's an embedded map to the Student Union:

Accordion Styling

If you enable easy accordions on a page or post, you may wish to style them differently from their default CSS. Below are a few different style options with code that you can add to your custom CSS.

Note: The colors are marked in red — feel free to change them to whatever HEX codes you want!

Sleek Accordions

Code

.accordion .panel {
border:0 solid transparent
}

.accordion .panel-default > .panel-heading {
background:none;
padding:5px;
border-bottom:2px solid #0f4786
}

.accordion h4.panel-title a:before {
font-family:'Glyphicons Halflings';
content:"\e259";
font-size:10px;
padding-right:5px
}

.subpage .widget .accordion .panel-title a {
color:#0f4786;
text-decoration:none;
font-size:18px;
font-weight:700
}

Example

Panel 1 Title

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 Title

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.

Panel 3 Title

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.

Modern Accordions

Code

.accordion .panel-default > .panel-heading {
background:linear-gradient(#eaeaea,#fff);
border-radius:6px
}

.accordion.panel-group .panel {
border-radius:6px
}

.accordion .panel-default > .panel-heading + .panel-collapse > .panel-body {
border-top:0 solid transparent
}

.subpage .widget .accordion .panel-title a {
color:#0f4786;
font-size:20px;
text-decoration:none
}

Example

Panel 1 Title

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 Title

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.

Panel 3 Title

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.

Statement Accordions

Code

.accordion .panel {
border:3px solid #000
}

.accordion .panel-title {
font-weight:700;
text-align:center;
text-transform:uppercase;
letter-spacing:2px
}

.accordion .panel-default > .panel-heading {
background:#fff
}

.subpage .accordion .panel-title a {
color:#000;
text-decoration:none
}

.panel-group .panel-heading + .panel-collapse > .panel-body,.panel-group .panel-heading + .panel-collapse > .list-group {
border-width:0
}

Example

Panel 1 Title

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 Title

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.

Panel 3 Title

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.

Bold Accordions

Code

.accordion .panel-heading{
border-radius:0;
}

.accordion .panel:first-child,.accordion .panel:first-child .panel-heading {
border-top-left-radius:6px;
border-top-right-radius:6px
}

.accordion .panel:last-child,.accordion .panel:last-child .panel-body {
border-bottom-left-radius:6px;
border-bottom-right-radius:6px
}

.accordion .panel + .panel {
margin:0;
border-top-width:0
}

.accordion .panel .panel-heading {
background:#0f4786
}

.accordion .panel-default .panel-body {
background:#5589C3;
color:#fff
}

.subpage .widget .accordion .panel-heading a,.subpage .widget .accordion .panel-heading a:hover,.subpage .widget .accordion .panel-heading a:active {
color:#fff;
font-size:14px;
text-decoration:none
}

Example

Panel 1 Title

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 Title

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.

Panel 3 Title

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.

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