Guides-Advanced

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

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
}