Beecher Stowe is a new central theme for Aurora. It functions like any other theme on the system in that you can switch and little to no additional setup needs to be done. There are additional features of Beecher Stowe, however, that require a little extra work.

Beecher Stowe image



Theme Colors

There's 5 theme colors available for the Beecher Stowe theme, selectable from Dashboard > Appearance > Customize > Colors

  • Husky Blue   
  • Imperial Purple   
  • Pumpkin Orange
  • Emerald Green
  • Ruby Red



Theme Fonts

There's 5 font combinations available for the Beecher Stowe theme, selectable from Dashboard > Appearance > Customize > Font Style

  • UConn Brand Standard - Proxima Nova/Proxima Nova
  • Plex - IBM Plex Sans/IBM Plex Sans
  • Newsworthy - DM Serif Display/Open Sans
  • Book - Libre Baskerville/Libre Baskerville
  • Compressed - Oswald/Source Sans Pro



Metaslider - Caption on right side

Metaslider defaults to the caption on the left. If you'd like the caption on the right, follow the instructions below.

  1. Dashboard > Metaslider Pro
  2. Choose your slideshow
  3. Write your text in the caption area
    1. **If the caption area is grey out click the button, "Enter manually" on the right
  4. To get your caption on the right, wrap the caption in a div with the class slide-right
    1. ex: <div class="slide-right">This is my caption</div>
  5. Save your slideshow

Metaslider - Caption black text

Metaslider defaults to white text. If you'd like the caption text to be dark follow the instructions below.

  1. Dashboard > Metaslider Pro
  2. Choose your slideshow
  3. Write your text in the caption area
    1. **If the caption area is grey out click the button, "Enter manually" on the right
  4. To make text white, wrap the caption in a div with the class slide-black
    1. ex: <div class="slide-black">This is my caption</div>
  5. Save your slideshow

Metaslider - Example, right and black

In this example we'll make the text black, put it on the right side, and include a title, text, and a link.


<div class="slide-black slide-right">
	<h1>This is a title of a slideshow.</h1>
	<p>This is the caption. It can be a sentence or two.</p>
	<a href="https://www.google.com">This is a link</a>
</div>
XML



Buttons - Lowercase text

All buttons default to uppercase text but you can add code to make the text lowercase.

  1. Add the normal code for buttons
    1. ex:  <a href="https://google.com" class="btn btn-default">My button text goes here </a>
  2. Add the class btn-lowercase
    1. ex: <a href="https://google.com" class="btn btn-default btn-lowercase">My button text goes here </a>



Full Width Hero - Page Title Included


  1. Create a new page
  2. Switch the page to Page Builder
  3. Add an Image Widget widget to the row
    1. Do not use the Image widget, however, as it will not work
  4. Hover over the wrench icon on the right side of the row and click Edit Row
  5. On the right side under Row Styles > Layout > Row Layout choose Full Width Stretched
  6. Click Done to close the row edit window
  7. Hover over the widget and select Edit
  8. Choose your image and give it Alternate Text. Do not give it a title
  9. The caption is where you can add a page title and some additional supporting text. The page title will come from a span wrapped around some text.
    1. ex: <span>Research</span> Students using laptops listen to a lecture at the School...
  10. Click Done to close the widget edit window
  11. Click Save/Update to commit your changes



Infographic Row

  1. Create a new, two column row in page builder
  2. Add a Visual Editor widget to one of the columns
  3. Hover over the wrench icon on the right side of the row and click Edit Row
  4. On the right side under Row Styles > Layout > Row Layout choose Full Width Stretched
  5. Under the Attributes tab add the Row Class infographic-row
  6. Under the Design tab add a background image
    1. For Background Image Display select Cover
  7. Click Done to close the row edit window
  8. Edit the Visual Editor widget
  9. The Widget Title will be the large number value, ex: 1,433 or $1,000,000
  10. In the body of the visual editor add the additional text, ex: student to faculty ratio in 2019
  11. **Use a new visual editor for each piece of information. In the example above there's 3 visual editors
  12. Click Done to close the widget edit window
  13. Click Save/Update to commit your changes



Pull Quotes

You can make nice callouts like the example below with just two html tags.

The code you"ll need:

<blockquote>Aenean eleifend lorem id ipsum auctor eleifend. Nulla id dolor dui. Aenean accumsan dolor ut lacus pretium, ac faucibus felis sagittis.</blockquote>



White Text

Sometimes you want to have a row with a dark background and light text.

You can add the class white-text to any html element to make the text white, for example:

<p class="white-text">This text will now be white</p>

**Another option is to add the class to a row/widget in page builder:

  1. Switch the page to Page Builder
  2. Add a row
  3. Hover over the wrench icon on the right side of the row and click Edit Row
  4. Under Row Styles > Attributes > Row Class add the class white-text
  5. Save/Update the page



Equal Height Box Row

A row that creates equal height content boxes. A colored background besides pure white should be used for the best presentation.

**The height is calculated by the overall column size so multiple widgets can be added to a column without causing issues

  1. Switch the page to Page Builder
  2. Add a row with at least 2 columns
  3. Hover over the wrench icon on the right side of the row and click Edit Row
  4. Under Row Styles > Attributes > Row Class add the class box-row
  5. Add widgets to columns
  6. Save/Update the page



UConn Today View Options

The UConn Today plugin has a couple of options for layouts. The default option has a large image above and title below. This example shows two widgets side by side:

A second option is to display the stories with the image on the right and the text on the left, which we'll call list view. An example of two list view widgets side by side:

To achieve a list view like the example above:

  1. Switch the page to Page Builder
  2. Add a row
  3. Add a Custom HTML widget and follow the instructions for how to configure a UConn Today feed
  4. Edit the Custom HTML Widget
  5. Under Widget Styles > Attributes > Widget Class add the class today-list
    1. Alternatively you could add the class to the entire row
  6. Save/Update the page


You can also mix and match. The example below has one regular UConn today widget and one list view widget



The home link in Beecher Stowe is now hidden by default. Current web trends have moved away from a home link in favor of clicking the site title or logo (ex: Apple, Google, Amazon, Microsoft, etc..). If you would like your site to have the home link you can bring it back with the following instructions.

  1. Navigate to Dashboard > Appearance > Custom CSS
  2. Add the following css and then save
#masthead .navbar-default .navbar-collapse .navbar-nav > li:nth-of-type(1) {
	display:inline-block;
}

#masthead .navbar-default .navbar-collapse .navbar-nav > li:nth-of-type(2) > a {
	margin-left:0px;
}

/* ==== Mobile Home Link ==== */
#masthead #nav-wrapper .navbar-default .navbar-nav > li:nth-of-type(1) {
	display:inline-block;
}
CSS

Basic Aurora WordPress Articles

  1. Accessibility
  2. Dashboard
  3. Manage Storage Space and Specification
  4. Theme - Beecher Stowe
  5. Pages
  6. Posts    
  7. Edit Content                                                                                                                 
  8. Layout page using Page Builder
  9. Images
  10. Media Library
  11. Accordions
  12. Buttons
  13. Color Picker
  14. Columns
  15. Glyphicons
  16. Videos