widgets

Header Widget Area

Posted on by

A maximum of 2 widgets can be added to the right side of your header by going to Appearance > Widgets and adding widgets to the section labeled Header Content.

The maximum height of the section is 76px. Any content taller than 76px will be cut off.

All widgets are automatically floated to the right, so the first widget will always be to the far right and the second will stack to the left of it.

If you would like to add an image or  logo to the header area, there are two sizes that work best.

If you are using only 1 widget in the header, you have an available space of 565px x 76px available to work with.

max-header-widget-image-size-full

If you are using 2 widgets in the header, you have an available space of 282px x 76px available to work with.

max-header-widget-image-size-half

By default, the site search disappears from the header once a widget is added. If you would like to keep the search on your site you can add a search widget to the Header Content widget area to bring it back.

UC Slideshow

Posted on by
Note: If you’re using Hale 2015, Sherman, or any other Cornerstone based theme, use Meta Slider instead of UC Slideshow.

UC Slideshow is a custom widget developed by UITS to create basic image slideshows for your homepage.

Setup

slideshow-setup-1

  • Log in and go to Appearance > Widgets.
  • Drag UC Slideshow into one of the Home sections.
  • Click the Save button.

Using UC Slideshow

Use the Add Images button to select up to 5 images from your media library. If you haven’t yet added the images to your media library, cancel. Look for Media > Add in the main system navigation, upload your images, and then return to Add Images.

Text

If you’d like text to appear with the image, fill in the ‘Caption‘ field.

Links

To add a link, paste a web address into the ‘UCS Link‘ field, and the entire image will be clickable. For example: http://aurora.uconn.edu/

Ordering

To change the order of the slides, click and drag the thumbnails along the bottom of the window.

Removing Slides

As you select an image, you’ll see a checkmark appear in the top right corner of the thumbnail. To remove the slide, click the checkmark again.

Additional Features

slideshow-setup-2

Effect

Choose what kind of animated transition will occur in between the slides.

Speed

This determines how much time each slide will remain on the screen before moving to the next.

Theme

This will influence how the display controls will look.

Formatting Your Images

If you don’t crop your images, they may not fit quite right into your slideshow.

Depending on which section you place your slideshow in, the maximum width and height will change. If you want a simple rule, just clip your images to the ‘Full Width’ measurements below. That will also give you the greatest degree of flexibility in deciding where to place things.

Homepage Column Type Width (px) Height (px)
Full Width* 1170 456
Two-Thirds width 770 300
Half width 570 221
Third width 370 144
Quarter width 270 105

* If you save it at this size, it will size down correctly to any of the other configurations. If you’re not sure what layout you want to use, sizing your photos to these dimensions is a good option.

Homepage Customization in Hale or Prudence

Posted on by

Layout and Other Theme Options

Go to Appearance > Themes and select the Customize link. From here, you have the following options:

Site Title & Tagline

Here, you can change the name of your site as it appears in the top bar. The tagline is not currently used in the system.

Template Options

Here, you can choose what kind of homepage layout you’d like, and choose to include a School, or College in your top bar.

Navigation

Here, you can choose which Menu will appear as the main navigation for the site. You can probably leave it as is. To edit your navigation, see the Navigation guide.

Static Front Page

If you’d like to switch from a traditional site layout to a blog, select “Your latest posts”.
After you’ve finished customizing, hit save in to top right corner of the side panel, and those changes will appear on the site.

Homepage Content

Go to Appearance > Widgets. From here, you have the following:

Available Widgets

This is the library, the repository of possible widgets you can use in your site. To add widgets to the Sidebar, or a Home section, drag it in. The change happens immediately. Some widgets will need to to have some settings configured before they work fully.

Widgets Page
Widgets Screen

Inactive Widgets

Located below Active Widgets, you can use this to “save” a widget and it’s settings. If you switch themes, some of your widgets may end up here.

Sidebar

Widgets placed in the Sidebar will appear on the “News” page, the search results page, the archives page, and pages that use the ‘Default w/Sidebar’ page template.

Home1-Home5

These sections correspond to the different areas of a homepage layout. They will always start form the top left, and then wrap down to a second line.

Homepage Customization in Sherman or Hale 2015

Posted on by

The homepages of Sherman, Hale 2015 and Prudence 2018 are configured primarily in the Page Builder. On the homepage, click ‘Edit Page’. If you see the ‘Visual’, ‘Text’, and ‘Page Builder’ tabs on the top right of your page editing area, click ‘Page Builder’.  If you only see ‘Switch to Editor’ this means you’re already in Page Builder mode.

Page Builder View
View of editing screen in Page Builder mode – click to enlarge

Templates

There are a few different template options to choose from for the homepage that cooperate with Page Builder. Users can select Blank, Page Builder, or Page Builder – Cards. Each of these give the homepage a slightly different look, so it is best to try them all out and see which one fits best.

Note: Home and Default Template do NOT work with the Page Builder layout. They were used for the old style homepages that were customized under Appearance > Widgets.

Layouts

The page builder allows users to add different widgets in different areas of the page. To begin, click ‘Add Row’ at the top of the page editing area. Users can add as many rows as they would like. Before the row is added, the user can choose how many columns will be in that row and what percentage of the row each column will take up. There are many pre-made column ratios to choose from as well. Once the columns are set up, click ‘insert’ to officially insert the row into your homepage.

Home Page Builder Add New Row
Page Builder Add New Row screen – click to enlarge

If you roll your mouse over the wrench button above the top right corner of the row, you will see options to edit, duplicate, or delete it. You can move a row up or down by clicking and dragging the arrow button next to the wrench button.

Row Options

If you click to edit a row, you will see a screen similar to when you first added the row. However, in addition to editing the column number/sizes, you may also edit some row styles found on the right side of the screen.

Attributes

This section allows you to add a Row ID to your row or Row/Cell classes. In addition, you can add your own custom CSS to be applied to that specific row.

Layout

Here you can choose whether you want your row to have a bottom margin or padding. You can also choose a ‘gutter’ amount, which is the space between each column in the row. You can decide how much you want to stretch the row under ‘Row Layout’ and in which order you want each column to collapse for smaller screens under ‘Collapse Order’.

Design

Design allows you to choose a background color/image and a border color for your row.

Widgets

Each column on the Page Builder layout can hold 0, 1, or multiple widgets. To insert a widget, simply click ‘Add Widget’ and choose the widget you would like to add. Once a widget has been added, you can drag and drop it to the column you wish to place it in. If you roll your mouse over a widget you will see options to edit, duplicate, or delete it.

Widget Options

If you click to edit a widget, you will get a screen split into two sections. On the left side, you can edit the content of your widget. On the right side, you can edit the styles of your widget.

Attributes

This section allows you to add widget classes and custom css.

Layout

Here you can add padding around the widget.

Design

Design allows you to colors for different aspects of your widget including background, border, font, and links. In addition, you may also choose to add a background image to the widget here.

Changing Themes

Posted on by

On WordPress, it’s easy to change themes for a website. Simply go to Appearance > Themes, and you can preview how your site might look in another theme.

Before you decide to switch to a different theme, there are some things you should keep in mind.

The Good News

Switching themes does not destroy any pages or content that you’ve created for your site. Moreover, switching themes is reversible; if you change it and don’t like it, you can switch back.

The Tricky Parts

Top Navigation

When you switch themes, it’s possible for your top navigation menu to break. This can be fixed by going to Appearance > Menus, finding your Top Nav menu, and checking the ‘Primary Menu‘ checkbox.

Homepage

Many themes have a custom homepage page template that may not exist in a new theme. For example, switching from Hale to Sherman may wipe out the homepage. However, the widgets that created those homepages aren’t gone. If you go to Appearance > Widgets and scroll down, you’ll see them in an area for ‘unassigned widgets‘. Drag them back up to the correct sidebars and your homepage will reform itself.

In the newer themes (Hale 2015 and Sherman), you can use Page Builder to build the homepage and sub pages.  See Homepage Customization tools.

Sidebars

Some themes have sidebars that are specific to them and changing themes will move any widgets within those sidebars to the ‘unassigned widgets‘ section in Appearance > Widgets. You may need to find a new place to keep that content.

Bootstrap Layouts & Special Elements

The older Hale and Prudence themes were built on the Bootstrap 2 framework. The newer Sherman and Hale 2015 themes are built with the Bootstrap 3 framework. If your site makes use of Bootstrap columns, buttons, or accordion menus, they may not work if you switch from a Bootstrap 2 theme to a Bootstrap 3 theme.  They will fall back to being simple single column layouts, links, or text sections until you change the code to comply with the version of Bootstrap that your new theme uses.

Hide Visible Widget for Future Use

Posted on by

If you have a widget on a page or post using Page Builder that you don't want to display but also don't want to delete, you can hide it. To do so, go to the widget's Edit screen and click on Attributes. Then, add the following line of code to the widget's CSS Styles:

display: none;

You can't do this for widgets in Appearance > Widgets since they do not have an option to enter custom CSS.

hide widget

Going Live

Posted on by

Before Going Live

Check Admin Email

Be sure to check the admin email for the account, which is listed under Settings > General > E-mail Address. This email is used for a number of purposes and is essential for any sites using the Gravity Forms plugin. The admin email receives all form results and notifications pertaining to Gravity Forms.

email address

Check for Broken Links

Go to your dashboard and check to see if there are any broken links. If there are, be sure to repair them before you go live.
Broken Links Page Screenshot

Accessibility Check

Every site should have contact information in an obvious place (footer, main navigation, homepage). Read through the Accessibility Guidelines and perform spot checks on any pages you think might be problematic.

Search Engine Visibility

From the dashboard, go to Settings > Reading. Make sure the Search Engine Visibility option is unchecked. If left checked, this will block Google and other search engines from listing your content in their search results.

Request Live Site Address

Submit the Go Live Request form. Once the change is made, you will be notified. Some will see the changes immediately, although it may take a few hours for everyone to see the new version of the site. You can reboot your computer to see the change immediately, or if you’re comfortable in the command line you can clear your DNS cache.

After Going Live

You will receive an email notifying you that the site is live.  Now you should complete the following items:

Check for Broken Links Again

Run Broken Link Checker

Depending on how you made your site, it’s possible that there could be broken links in the Navigation or Homepage after the site address changes. Run one more check to be sure everything is ok.

  1. Tools > Broken Links
  2. Click the Search button on the top right
  3. Leave all the fields blank, and click Search

Manually Check Any Widgets

The Broken Link checker doesn’t scan the contents of widgets like the visual editor and others. On your homepage and any other page that uses sidebars, check the links by clicking on them to make sure they work correctly.

Google Setup

Optional, but recommended.

Analytics

Aurora uses Google Analytics to track site-specific traffic information. If you are interested in site traffic statistics, please follow the instructions to set up Google Analytics for your website.

Crawling

Google will eventually find your site and index it. With Google Webmaster Tools, you can speed up the process. This requires Analytics to have already been setup on your site, so if you haven’t done that yet, do that now. While verifying your ownership, use alternative methods: Google Analytics. You may have to clear the site cache under Settings > WP Cache in order to properly verify.

Requesting a Google Crawl of your site

Remove Old Site

It’s always a good idea to deactivate the old site to prevent your visitors from accessing the old/incorrect information. Old sites can show up in Google search results even after you’ve moved your address to the new site.

To remove old sites from the UITS web2 or web9 servers, contact webdev@uconn.edu.
To remove old sites from other servers (Business, NEAG, Libraries, Law, Health, etc) please contact the administrator of that server.

UC Events Calendar

Posted on by

The UC Events Calendar Widget will display events from any account, or combination of accounts, from the main UConn Events Calendar.

Note that the widget marked Calendar is a WordPress default widget that displays a calendar of posts, and is unrelated to the UConn Events Calendar plugin.

To find the widget, log in and go to Appearance > Widgets. Then, drag UC Events Calendar into a Home section.

How to Use

RSS Feed

Paste the link to an RSS feed from the calendar into this section. You can follow the link next to the text field to create an RSS feed.

Events

This is the number of upcoming events that will appear.

Style

UConn Calendar, as text.
Text will give you the dates and titles of events in a simple text format.
UConn Calendar, with Icons
Icons will place each date in a block, and also include the start time for each event.

calendar-widget-options

Shortcodes

You can embed either a list of Upcoming events or a full Month view of events on any post or page using a shortcode.

Calendar Number

The calendar number is the last number in the web address when viewing a specific calendar on events.uconn.edu.

screenshot
When viewing the UConn Master Calendar, the number is “42”
screenshot
Here on the Benton Museum Calendar, the number is “99”

Embed an Upcoming List

Use this shortcode but replace the ‘cal’ number with that of your own calendar. You can the maximum amount of events that appear by changing the number next to ‘limit‘.

[uc_cal view="upcoming" cal="42" limit="10"]

Embed a Month View

Copy and paste the code below into your page and replace the cal number “42” for your calendar’s number. As an example, take a look at the current month of Aurora Training Calendar.

[uc_cal view="month" cal="42" limit="10"]

Multiple Calendars

You can show events from multiple calendars by entering a comma separated list of calendars’ numbers.

[uc_cal view="month" cal="141, 42" limit="10"]

Limitations

You can only have one calendar shortcode on a page. Any additional shortcodes you add will be ignored by the system.

Link to the Current Month of Your Calendar

To link to the current month, week or day of your calendar, you should follow the format below.

http://events.uconn.edu/current/[month|week|day]/[Calendar Number].

For example, http://events.uconn.edu/current/month/42 takes you to the current month view of the UConn Master Calendar.

Widgets & Sidebars

Posted on by

WordPress widgets add content and features to your sidebars. Examples are the default widgets that come with WordPress for post categories, tag clouds, navigation, search, etc. Plugins will often add their own widgets.

Sidebars

You can create a sidebar by going to Appearance > Manage Sidebars. Under Add New Sidebar, type a name for your sidebar and click 'Add'.

Once a sidebar has been created, add widgets to it by going to Appearance > Widgets. You will see available widgets on the left side of the page and sidebars on the right. Simply drag and drop a widget onto the sidebar in which you want it to appear. Note that the Default sidebar automatically appears with Archives, Search Results, and when viewing single posts.

To get a sidebar you've created to appear on a specific page, go to edit the page. On the right side there will be a box titled 'Page Settings', under which you can choose to display one of your sidebars. There is also a checkbox to apply this same sidebar to all child pages. If you want to apply the same sidebar to an entire section of a site, this option will be useful.

Template Support

Most pages support this feature.

Theme May Assign Sidebar Uses Default Sidebar
Sherman, Hale 2015 Default Page,
A-Z Index,
Blank,
Blog,
Homepage,
User Profile		 Archives,
Search Results,
Posts
Hale & Prudence Default Page,
A-Z Index,
User List,
User Profile,
User Table		 Archives,
Default w/Sidebar,
Posts,
Search Results