Month: March 2016

Redirect a Page

Follow these instructions to redirect one of your pages to either another page within your site or an external URL.

  1. In the menu on the left side of your dashboard, go to Tools > Safe Redirect Manager
  2. On the Safe Redirect Manager, click ‘Create Redirect Rule
    Create Redirect Rule

  3. Under Redirect From, type the path to the page you’re redirecting from (the part of the page’s url after http://domain-name.uconn.edu)
  4. Under Redirect To, type either the path to the page you’re redirecting to (if it is another page within your site) or the full url (if it is an external link)
  5. On the right side of the page, click ‘Publish‘.

Colorful Sidebar Menus

If you add a sidebar with a menu widget, you may notice that the menu is displayed in a very simple manner. Below is code that you can add to your custom CSS to add some style to your sidebar menu. This code will work with websites using the Hale 2015 and Sherman themes.

Code

#page-sidebar .widget.widget_nav_menu {
padding-left:0;
padding-right:0
}

#page-sidebar .widget ul {
margin:0
}

#page-sidebar .widget ul li {
padding:1em;
margin:0
}

#page-sidebar .widget ul li.current-menu-item,#page-sidebar .widget ul li.current-menu-item:hover,#page-sidebar .widget ul li.current-menu-item:active {
background:#0f4786
}

#page-sidebar .widget ul li:hover,#page-sidebar .widget ul li:active {
background:#dbe3ed
}

#page-sidebar .widget ul li.current-menu-item a,#page-sidebar .widget ul li.current-menu-item:hover a,#page-sidebar .widget ul li.current-menu-item:active a {
color:#fff
}
Note: The colors are marked in red — feel free to change them to whatever HEX codes you want!

Result

To see how this CSS code looks on an actual sidebar menu, visit the Development page.

Screen Options

Ever feel like you’re missing an option when editing a page, creating a menu, or checking for broken links? It might just be hidden. All of these pages and more have a dropdown button at the top right called Screen Options. Once clicked, new options appear at the top of your page that allow you to choose whether certain modules appear on your screen and even how some of these modules are presented.

 

Screen Options deselected

Screen Options of a Post editing page

Hide the Default Sidebar

The default sidebar shows up on all of your website's postsarchive pages, search results pages, and pages with the Blog template.  If you want to hide the sidebar from any or all of these types of pages, insert the following code into your Custom CSS:

Posts

.single-post #page-sidebar {
display:none
}

.single-post #page-single>.row>.col-md-9 {
width:100%
}

Search Results

#page-search #page-sidebar {
display:none
}

#page-search>.row>.col-md-9 {
width:100%
}

Archives

#page-archive #page-sidebar {
display:none
}

#page-archive>.row>.col-sm-9 {
width:100%
}

Blog Pages

#page-blog #page-sidebar {
display:none
}

#page-blog>.row>.col-sm-9 {
width:100%
}

All Relevant Pages

.single-post #page-sidebar, #page-archive #page-sidebar, #page-search #page-sidebar, #page-blog #page-sidebar {
display:none
}

.single-post #page-single>.row>.col-md-9, #page-archive>.row>.col-sm-9, #page-search>.row>.col-md-9, #page-blog>.row>.col-sm-9 {
width:100%
}

Browser Development Tools

In order to target specific elements on a page with CSS, you will have to figure out which HTML tags/classes to use. This can be easily done on your browser using the built-in development tools.

Instructions

  1. Right click on the element you wish to style with CSS
  2. Click 'Inspect' (Google Chrome) or 'Inspect Element' (Firefox, Internet Explorer, Safari)

You will now see the HTML that makes up the webpage, focused on the line(s) related to the element you're targeting. In addition, Inspect Element allows you to temporarily edit the HTML or CSS of a page which will go away once the page is reloaded.

Hide Visible Widget for Future Use

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

Custom CSS

With the Custom CSS Tool, Site Admins are able to write their own CSS to modify aspects of any template.

This tool is located within Appearance > Custom CSS.

For security purposes, all CSS is sanitized before being allowed onto the site. Once you hit update, you will notice that the formatting may change. That is the sanitizer CSSTidy at work.

You can revert to the previous version of your custom CSS by clicking the Revert to previous version link that appears underneath the editor.

Allowed CSS

The following CSS selectors, values, and properties will work in the Custom CSS plugin.

Default CSS

Additional CSS

Selectors

:before
:after
area
article
audio
section
aside
base
bdi
body
canvas
command
datalist
details
dialog
embed
footer
figure
figcaption
head
header
hgroup
html
keygen
link
main
map
mark
meta
meter
nav
output
progress
rp
rt
ruby
source
style
summary
time
title
track
video
wbr

Properties

align-content
align-items
align-self
background-clip
background-origin
bottom
border-radius
border-image
box-shadow
box-sizing
color
content
display
filter
flex-grow
flex
flex-direction
flex-flow
font-size-adjust
font-stretch
justify-content
left
min-height
min-width
opacity
order
overflow
overflow-x
overflow-y
position
right
tab-size
text-align-last
text-justify
text-overflow
text-shadow
top
visibility
word-break
word-wrap
z-index

Values

src
rgba()
!important

If your site needs to use CSS properties not listed here, look into custom theming.

UC People

UC People is a plugin developed by the ITS Web Development team. It registers a custom post type of People that appears in the left navigation of the WordPress dashboard.

In combination with new page templates available to Cornerstone-based themes, this plugin provides an easy way to organize and display people.

UC People is available to sites using Cornerstone-based themes, namely ShermanHale 2015 and Prudence 2018.

Examples:

Grid style:

Center for Academic Programs

Table style:

Department of Kinesiology
Department of Political Science

Creating People

To create a person, on the left side navigation on your dashboard go to People > New Person. All fields other than the person's name are optional.

Groups and Tags

People can be organized in two ways, with groups and tags.  These can be managed in the dashboard by selecting 'People' and then choosing either the 'Groups' or 'Tags' options.

Groups

Groups act much like post categories, and can be nested hierarchically. For example, a group might be "Faculty" with nested subgroups of "Adjunct" and "Associate". Groups are useful when creating a page of people, as one feature there is to show people separated by their group assignments.

Tags

Tags are just like the tags used by blog posts. They can also be used to organize people, but do not have the option of being hierarchically nested. For example, a single person might be tagged with "Molecular Modeling", "Nanotechnology", and "Polymers". Later, it would then be possible to display all people in the site with the tag "Polymers".

Creating a “People Page”

One of the features of UC People is a new page template that becomes available. This page template has a lot of great tools to help filter and sort which people you want to display.

To begin, start by creating a new page. On the right, in a box labeled 'Page Attributes', set the 'Template' option to "People". You will notice that below the normal visual editor area for content, there will be a number of new form controls in a box labeled 'People Page'.

Layout

This controls the layout of how the people will be displayed. The Grid option makes a grid of people, with multiple people for each row. This is a great option if you have a lot of images, and want to focus on those.

The Table option has only one person per row, but has a lot more room for details like phone number or email address. This is a great option if you have no images, or want to focus the page more on being a resource to contact people.

Specific People

By default, a people page displays all people in the site. You can see them listed in the left column of this section. However, if you only want to display the information of a few people, you can click on those people in the left column, and they will appear in the right column. Then, the page will only display the people in the right column.

This collection of people can then be further filtered down by the Specific Groups and Specific Tags options.

To return a page to displaying all people, delete all the people in the right column.

Specific Groups & Tags

Choose one or more groups, and only people that belong to the selected group OR any other selected group will appear. This allows you to create one people page for faculty, and another for staff, for example.

Choose one or more tags, and only people that belong to the selected tag OR to any of the other selected tags will appear. This allows you to create a people page of only the people tagged with "Chemistry" for example.

If both Specific Groups and Specific Tags are in use, only people that belong to one of the groups AND have one of the specific tags will appear.

Break Into Groups

When selected, this option will display people broken out into groups ordered alphabetically on the group name. For instance, you could select "Chemistry" as the tag, enable this option, and then the people page would display a list for "Adjunct Faculty", and another for "Associate Faculty".

Information to Display

On each People page, you can choose just how much information you wish to display. Any fields left unchecked will simply be left out. Note: In order to display properly, the person's image should be cropped and resized outside Aurora into a square image between 300x300px and 360x360px.

Viewing a Single Person

Once a person has been published, they are available to be linked to through menus, manual links, or a People Page.

In the Menus section, you will see a new box appear along site pages called 'People'. You will need to select this box, but can then add people into navigation menus the same way you would pages.

Ordering People

By default, people will be ordered alphabetically by first name.

This default ordering can be manipulated by altering the Order attribute of each person.

Order of a person
The Order Attribute

For example, if Abdul, Bogdan, and Carol are all set at order 0, they appear in alphabetical order by last name.

  • Carol Gordon
  • Abdul Kazeem
  • Bogdan Stanek

What's really happening behind the scenes though, is more like this:

  1. Order=0
    1. Carol Gordon
    2. Abdul Kazeem
    3. Bogdan Stanek
  2. Order=1
    1. None.

So, if Bogdan's order number changes to "1", then first the list will display all of the 0's, and then all of the 1's, each in alphabetical order.

  1. Carol Gordon [0]
  2. Abdul Kazeem [0]
  3. Bogdan Stanek [1]

If we then change Abdul to a "1", we'll get this...

  1. Carol Gordon [0]
  2. Abdul Kazeem [1]
  3. Bogdan Stanek [1]

Using this field, it's possible to alter the default ordering of people in lists.

It is important to note that altering the order for a person will effect the order in which they are displayed in any list. If you're using more than one People page, this might be an issue.

Import/Export Users

Import/Export Users is a tool that allows site admins to manage their users through a .csv file editable in spreadsheet programs like Excel. With this file, admins can quickly setup or edit the details of dozens of users and commit all changes with a single upload. It is particularly useful for sites with large numbers of users. Moreover, this tool is supported by all themes and all sites.

Export Users

Go to Tools > Import/Export Users. Click the Export Users button.

This will create a .csv file of all current users, and download that to your computer. You can then edit this file in spreadsheet programs like Excel. You can edit any information about existing users and add new users by adding new rows.

It is important that you do not rename, rearrange, add, or delete any columns. If the .csv file is not formatted correctly, the 'import users" function will not work.

Import Users

Go to Tools > Import/Export Users. Choose the .csv file that you would like to import. The file must be in the exact same format as the one created by the export tool.

Select the Import Users button and the site will update the information of all users and create new users if needed.