--- title: "Theme - Beecher Stowe" canonical: "https://kb.uconn.edu/space/IKB/10834118469/Theme%20-%20Beecher%20Stowe" format: markdown --- 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. ![Beecher Stowe image](media://6be3cf86-1619-4a02-81ab-ceff06a00453) --- ## 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*: **
**This is my caption**
* 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: *
**This is my caption**
* 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. ```xml

This is a title of a slideshow.

This is the caption. It can be a sentence or two.

This is a link
``` --- ## Buttons – Lowercase text All buttons default to uppercase text, but you can add code to make the text lowercase. ![Different capitalizations of text in buttons](media://d1109e0f-dba0-42bc-b5b3-89a576e176a2) 1. Add the normal code for buttons. 1. ex: *My button text goes here * 2. Add the class ***btn-lowercase***. 1. ex*:* ** btn-lowercase**">My button text goes here * --- ## Full Width Hero (Page Title Included) ![Full Width Hero with Page Title Included](media://efb21236-6628-4831-8ee9-9b542c12a985) 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*:* ***Research**** 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 ![infographic row](media://bdb4b261-6ffc-4afd-b529-71448d3ef80a) 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. ![This is an example of a callout you can create](media://e1ed28e4-dce1-4d88-a810-a8220f77c46b) Simply add ***
**** *to the beginning of the quote and ***
***at the end of the quote. ex.*
**Aenean eleifend lorem id ipsum auctor eleifend. Nulla id dolor dui. Aenean accumsan dolor ut lacus pretium, ac faucibus felis sagittis.**
* --- ## White Text You can add the class **white-text** to any HTML element to make the text white. ex. *

**This text will now be white**

* 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. ![equal height box row](media://9d767e4f-1030-4734-ae5b-17e56890660b) 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. ![example of layouts for widgets](media://f58453ba-e0ef-43d1-9480-1ac3ded3913b) 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. ![The list view layout places the story titles on the left and images on the right.](media://6e6fb4af-5d34-41a3-89f3-7cbd2a09117a) ### 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](https://uconn.atlassian.net/wiki/spaces/IKB/pages/10931143293). 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. ![An example of mixing and matching different layouts](media://408da9c6-a25f-47fd-b528-9fe078078abb) --- ## 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**. ```css #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; } ```