Theme - Beecher Stowe

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

Open

Theme Colors

There are 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 are 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  the Right Side

Metaslider defaults to the caption on the left. However, you can place captions on the right, instead.

1. Navigate to Dashboard > Metaslider Pro.

2. Choose your slideshow.

3. Write your text in the caption area.

   1. If the caption area is grayed out, click 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. However, you can change the text to black.

1. Navigate to Dashboard > Metaslider Pro.

2. Choose your slideshow.

3. Write your text in the caption area.

   1. If the caption area is grayed out, click 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 will make the text black, put it on the right side, and include a title, text, and link.

Buttons – Lowercase text

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

Open

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 to Page Builder view.

3. Add an Image Widget widget to the row. Do not use it, 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 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.

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).

    1. Use a new Visual Editor for each piece of information. In the example above, there are 3 visual editors.

11. Click Done to close the widget edit window.

12. Click Save/Update.

Pull Quotes

You can make nice callouts with just two HTML tags.

Simply add <blockquote> to the beginning of the quote and </blockquote> at the end of the quote.

ex. <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

You can add the class white-text to any HTML element to make the text white.

ex. <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 to Page Builder view.

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

As the name suggests, an Equal Height Box Row is a row that creates equal height content boxes. A colored background (not 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 to Page Builder view.

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.

Equal Height Row

Equal Height Row creates equal height rows with less formatting than the box-row.

1. Switch to Page Builder view.

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 equal-height-row

5. Add widgets to columns.

6. Save/Update the page.

**There is no native styling for equal height content, so you must add a background color to either the widgets or the columns themselves.

Adding Background Colors to Columns

1. Hover over the wrench icon on the right side of the row and click Edit Row.

    

2. Click on one of your columns, anywhere but in the middle where the percentage text is. 

3. An additional section will appear in the right sidebar below Row Styles called Cell # Styles

4. Under Cell # Styles > Design > Background Color change the color for your column.

   1. You can also add padding and any other additional styling from the Cell # Styles section.

5. 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 a title below. This example shows two widgets side by side.

A second option is to display stories with the image on the right and the text on the left, which is called list view. This example shows two list view widgets side by side.

List View

1. Switch to Page Builder view.

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. Alternatively, you can add the class to the entire row.

6. Save/Update the page.

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

Home Link

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. If you would like your site to have the home link, you can bring it back.

1. Navigate to Dashboard > Appearance > Custom CSS.

2. Add the following CSS and click Save.

Related Articles