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: Make sure the document is public On the view screen of your document, click the Share button on the upper left corner Click Advanced Under Who has […]

[Read More]

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. Go to Google Maps (https://www.google.com/maps) Enter the location […]

[Read More]

Text Wells

You may use a well to give your div box an inset effect. To do so, simply give the div a well class. Normal WellSample Code: <div class=”well”>Some text goes here.</div> Result: Some text goes here. Large WellSample Code: <div class=”well well-lg”>This is a large well.</div> Result: This is a large well. Small WellSample Code: […]

[Read More]

Posts

Both Posts and Pages are used for displaying your site’s content. Posts can have categories and tags that are used by Post Widgets and Pages with the Blog Page template when filtering posts to display. In addition, all posts use the default sidebar. Post WidgetsIf you’re trying to display certain posts through a widget, you may notice that you […]

[Read More]

Pages

Both Pages and Posts are used for displaying your site’s content. Pages have several different templates that you can choose from which determine how its content is displayed and even what content is displayed. In addition, each page can have its own in-page menu and its own sidebar. Pages can be hierarchical and if a […]

[Read More]

Organizing Content

You can organize your content using Categories and Tags. Learn more about each method in the following videos: To learn more about the difference between categories and tags, reference this WordPress guide.

[Read More]

Media Library

Media consists of the images, video, recordings, and files that you upload and use in your website. You can get to the media library on your Dashboard through Media > Media Library. On the Media Library page there are two possible views: List view and Grid view. List view will show fewer items at one […]

[Read More]

Images

Using Images Inserting Images into Posts and Pages Editing Images The WordPress Gallery Formatting Images with Bootstrap Finding ImagesDon’t just search Google Images and grab something. Make sure you are using something you paid for, something you shot, or something from the public domain. You run the risk of getting yourself, your department, and the university in […]

[Read More]

IFrames

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

[Read More]

Using LaTex Formats

September 7, 2017

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

August 8, 2017

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="http://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>

Update 10.2

Update 10.2 was released today (8/8/2017) with new features: Countdown Widget and Twitter plugin. WordPress Core was upgraded to 4.8.1 and all central third party plugins were updated to the latest version.

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

Excluding 0-9 From A-Z Index

April 3, 2017

If your website has no pages with titles beginning with a number, you may want to consider excluding 0-9 at the top of your A-Z Index page. To get rid of these numbers, add the following CSS code to your Custom CSS:

#page-az .btn-group:nth-child(2) {
display: none;
}

Google Docs

March 27, 2017

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

March 22, 2017

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:

Update 10.1

Update 10.1 was released today (3/22/2017). WordPress Core was upgraded to 4.7.3 and all central third party plugins were updated to the latest version.

Accordion Styling

March 8, 2017

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.