Guides-Tips

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.