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.
...
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 Black Text
Metaslider defaults to white text. However, you can change the text to black.
...
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.
...
Create a new page.
Switch to Page Builder view.
Add an Image Widget widget to the row. Do not use it, however, as it will not work.
Hover over the wrench icon on the right side of the row and click Edit Row.
On the right side, under Row Styles > Layout > Row Layout, choose Full Width Stretched.
Click Done to close the row edit window.
Hover over the widget, and select Edit.
Choose your image, and give it Alternate Text. Do not give it a title.
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.
ex:<span>Research</span> Students using laptops listen to a lecture at the School...
Click Done to close the widget edit window.
Click Save/Update.
...
Infographic Row
...
Create a new, two-column row in page builder.
Add a Visual Editor widget to one of the columns.
Hover over the wrench icon on the right side of the row, and click Edit Row.
On the right side, under Row Styles > Layout > Row Layout, choose Full Width Stretched.
Under the Attributestab, add the Row Class infographic-row.
Under the Design tab, add a background image.
For Background Image Display, select Cover.
Click Done to close the row edit window.
Edit the Visual Editor widget.
The Widget Title will be the large number value (ex. 1,433 or $1,000,000).
In the body of the Visual Editor, add the additional text (ex. student to faculty ratio in 2019).
Use a new Visual Editor for each piece of information. In the example above, there are 3 visual editors.
Click Done to close the widget edit window.
Click Save/Update.
...
Pull Quotes
You can make nice callouts with just two html HTML tags.
...
Simply add <blockquote> to the beginning of the quote and </blockquote> at the end of the quote.
...
You can add the class white-text to any html HTML element to make the text white.
...
Hover over the wrench icon on the right side of the row and click Edit Row.
Click on one of your columns, anywhere but in the middle where the percentage text is.
An additional section will appear in the right sidebar below Row Styles called Cell # Styles
Under Cell # Styles > Design > Background Color change the color for your column.
*You can also add padding and any other additional styling from the Cell # Styles section.
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.
...
Switch to Page Builder view.
Add a row.
Add a Custom HTML widget and follow the instructions for how to configure a UConn Today feed.
Edit the Custom HTML widget.
Under Widget Styles > Attributes > Widget Class, add the class today-list. Alternatively, you can add the class to the entire row.
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.
Navigate to Dashboard > Appearance > Custom CSS.
Add the following css CSS and click Save.
| Code Block | ||
|---|---|---|
| ||
#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;
} |
...
Related Articles
| Filter by label (Content by label) | ||||||||
|---|---|---|---|---|---|---|---|---|
|