Guides-Tips

Accordion Styling

If you enable easy accordions on a page or post, you may wish to style them differently from their default CSS. Below are a few different style options with code that you can add to your custom CSS.

Note: The colors are marked in red — feel free to change them to whatever HEX codes you want!

Sleek Accordions

Code

.accordion .panel {
border:0 solid transparent
}

.accordion .panel-default > .panel-heading {
background:none;
padding:5px;
border-bottom:2px solid #0f4786
}

.accordion h4.panel-title a:before {
font-family:'Glyphicons Halflings';
content:"\e259";
font-size:10px;
padding-right:5px
}

.subpage .widget .accordion .panel-title a {
color:#0f4786;
text-decoration:none;
font-size:18px;
font-weight:700
}

Example

Panel 1 Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam semper, justo sed ultrices aliquam, arcu tellus malesuada ante, eget faucibus ante ex id leo. Nunc rutrum, neque nec elementum vulputate, tellus nisi molestie neque, non viverra diam felis sollicitudin diam. Sed venenatis, ipsum sit amet pharetra congue, arcu velit viverra metus, sed iaculis neque libero ac lorem. Praesent dolor turpis, porttitor a augue ac, euismod suscipit magna. Nunc tellus tortor, dapibus at facilisis ut, maximus sed lacus. Nullam et est vitae mauris ornare accumsan. In eu dictum metus. Suspendisse ullamcorper ligula ut fringilla feugiat. Etiam iaculis consectetur varius. Phasellus hendrerit blandit lorem, commodo fringilla purus finibus at.

Panel 2 Title

Proin consectetur, quam quis cursus molestie, quam nunc blandit purus, eu facilisis augue nisl quis felis. In id fermentum felis. Curabitur nec felis sed elit rutrum malesuada sit amet nec ipsum. Donec ac efficitur dui. Fusce semper blandit purus, at eleifend arcu tristique commodo. Suspendisse turpis arcu, aliquet nec rutrum lacinia, interdum sed eros. Proin finibus, felis eget finibus molestie, erat ante mollis leo, et condimentum nunc lectus a velit.

Panel 3 Title

Integer sed laoreet justo. Cras quis urna rutrum, faucibus augue sed, vestibulum enim. Donec porta nulla quis neque rutrum pellentesque. Nulla gravida at dui quis vestibulum. Sed sed ante ac ipsum suscipit mollis. Mauris purus ligula, egestas vitae gravida viverra, tincidunt ac enim. Suspendisse iaculis sem eros, non iaculis est rhoncus sit amet. Aliquam elementum lacinia tempor. Integer accumsan lacus elit, nec mattis eros dictum in. Phasellus auctor est quam, nec euismod quam facilisis quis. Vivamus gravida ante venenatis, dignissim nunc et, pellentesque nisl. Suspendisse lobortis accumsan massa, consectetur fringilla sapien volutpat ut. Pellentesque at arcu at enim condimentum faucibus. Nullam at lectus augue. Curabitur vitae elit ipsum. Suspendisse vel convallis metus.

Modern Accordions

Code

.accordion .panel-default > .panel-heading {
background:linear-gradient(#eaeaea,#fff);
border-radius:6px
}

.accordion.panel-group .panel {
border-radius:6px
}

.accordion .panel-default > .panel-heading + .panel-collapse > .panel-body {
border-top:0 solid transparent
}

.subpage .widget .accordion .panel-title a {
color:#0f4786;
font-size:20px;
text-decoration:none
}

Example

Panel 1 Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam semper, justo sed ultrices aliquam, arcu tellus malesuada ante, eget faucibus ante ex id leo. Nunc rutrum, neque nec elementum vulputate, tellus nisi molestie neque, non viverra diam felis sollicitudin diam. Sed venenatis, ipsum sit amet pharetra congue, arcu velit viverra metus, sed iaculis neque libero ac lorem. Praesent dolor turpis, porttitor a augue ac, euismod suscipit magna. Nunc tellus tortor, dapibus at facilisis ut, maximus sed lacus. Nullam et est vitae mauris ornare accumsan. In eu dictum metus. Suspendisse ullamcorper ligula ut fringilla feugiat. Etiam iaculis consectetur varius. Phasellus hendrerit blandit lorem, commodo fringilla purus finibus at.

Panel 2 Title

Proin consectetur, quam quis cursus molestie, quam nunc blandit purus, eu facilisis augue nisl quis felis. In id fermentum felis. Curabitur nec felis sed elit rutrum malesuada sit amet nec ipsum. Donec ac efficitur dui. Fusce semper blandit purus, at eleifend arcu tristique commodo. Suspendisse turpis arcu, aliquet nec rutrum lacinia, interdum sed eros. Proin finibus, felis eget finibus molestie, erat ante mollis leo, et condimentum nunc lectus a velit.

Panel 3 Title

Integer sed laoreet justo. Cras quis urna rutrum, faucibus augue sed, vestibulum enim. Donec porta nulla quis neque rutrum pellentesque. Nulla gravida at dui quis vestibulum. Sed sed ante ac ipsum suscipit mollis. Mauris purus ligula, egestas vitae gravida viverra, tincidunt ac enim. Suspendisse iaculis sem eros, non iaculis est rhoncus sit amet. Aliquam elementum lacinia tempor. Integer accumsan lacus elit, nec mattis eros dictum in. Phasellus auctor est quam, nec euismod quam facilisis quis. Vivamus gravida ante venenatis, dignissim nunc et, pellentesque nisl. Suspendisse lobortis accumsan massa, consectetur fringilla sapien volutpat ut. Pellentesque at arcu at enim condimentum faucibus. Nullam at lectus augue. Curabitur vitae elit ipsum. Suspendisse vel convallis metus.

Statement Accordions

Code

.accordion .panel {
border:3px solid #000
}

.accordion .panel-title {
font-weight:700;
text-align:center;
text-transform:uppercase;
letter-spacing:2px
}

.accordion .panel-default > .panel-heading {
background:#fff
}

.subpage .accordion .panel-title a {
color:#000;
text-decoration:none
}

.panel-group .panel-heading + .panel-collapse > .panel-body,.panel-group .panel-heading + .panel-collapse > .list-group {
border-width:0
}

Example

Panel 1 Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam semper, justo sed ultrices aliquam, arcu tellus malesuada ante, eget faucibus ante ex id leo. Nunc rutrum, neque nec elementum vulputate, tellus nisi molestie neque, non viverra diam felis sollicitudin diam. Sed venenatis, ipsum sit amet pharetra congue, arcu velit viverra metus, sed iaculis neque libero ac lorem. Praesent dolor turpis, porttitor a augue ac, euismod suscipit magna. Nunc tellus tortor, dapibus at facilisis ut, maximus sed lacus. Nullam et est vitae mauris ornare accumsan. In eu dictum metus. Suspendisse ullamcorper ligula ut fringilla feugiat. Etiam iaculis consectetur varius. Phasellus hendrerit blandit lorem, commodo fringilla purus finibus at.

Panel 2 Title

Proin consectetur, quam quis cursus molestie, quam nunc blandit purus, eu facilisis augue nisl quis felis. In id fermentum felis. Curabitur nec felis sed elit rutrum malesuada sit amet nec ipsum. Donec ac efficitur dui. Fusce semper blandit purus, at eleifend arcu tristique commodo. Suspendisse turpis arcu, aliquet nec rutrum lacinia, interdum sed eros. Proin finibus, felis eget finibus molestie, erat ante mollis leo, et condimentum nunc lectus a velit.

Panel 3 Title

Integer sed laoreet justo. Cras quis urna rutrum, faucibus augue sed, vestibulum enim. Donec porta nulla quis neque rutrum pellentesque. Nulla gravida at dui quis vestibulum. Sed sed ante ac ipsum suscipit mollis. Mauris purus ligula, egestas vitae gravida viverra, tincidunt ac enim. Suspendisse iaculis sem eros, non iaculis est rhoncus sit amet. Aliquam elementum lacinia tempor. Integer accumsan lacus elit, nec mattis eros dictum in. Phasellus auctor est quam, nec euismod quam facilisis quis. Vivamus gravida ante venenatis, dignissim nunc et, pellentesque nisl. Suspendisse lobortis accumsan massa, consectetur fringilla sapien volutpat ut. Pellentesque at arcu at enim condimentum faucibus. Nullam at lectus augue. Curabitur vitae elit ipsum. Suspendisse vel convallis metus.

Bold Accordions

Code

.accordion .panel-heading{
border-radius:0;
}

.accordion .panel:first-child,.accordion .panel:first-child .panel-heading {
border-top-left-radius:6px;
border-top-right-radius:6px
}

.accordion .panel:last-child,.accordion .panel:last-child .panel-body {
border-bottom-left-radius:6px;
border-bottom-right-radius:6px
}

.accordion .panel + .panel {
margin:0;
border-top-width:0
}

.accordion .panel .panel-heading {
background:#0f4786
}

.accordion .panel-default .panel-body {
background:#5589C3;
color:#fff
}

.subpage .widget .accordion .panel-heading a,.subpage .widget .accordion .panel-heading a:hover,.subpage .widget .accordion .panel-heading a:active {
color:#fff;
font-size:14px;
text-decoration:none
}

Example

Panel 1 Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam semper, justo sed ultrices aliquam, arcu tellus malesuada ante, eget faucibus ante ex id leo. Nunc rutrum, neque nec elementum vulputate, tellus nisi molestie neque, non viverra diam felis sollicitudin diam. Sed venenatis, ipsum sit amet pharetra congue, arcu velit viverra metus, sed iaculis neque libero ac lorem. Praesent dolor turpis, porttitor a augue ac, euismod suscipit magna. Nunc tellus tortor, dapibus at facilisis ut, maximus sed lacus. Nullam et est vitae mauris ornare accumsan. In eu dictum metus. Suspendisse ullamcorper ligula ut fringilla feugiat. Etiam iaculis consectetur varius. Phasellus hendrerit blandit lorem, commodo fringilla purus finibus at.

Panel 2 Title

Proin consectetur, quam quis cursus molestie, quam nunc blandit purus, eu facilisis augue nisl quis felis. In id fermentum felis. Curabitur nec felis sed elit rutrum malesuada sit amet nec ipsum. Donec ac efficitur dui. Fusce semper blandit purus, at eleifend arcu tristique commodo. Suspendisse turpis arcu, aliquet nec rutrum lacinia, interdum sed eros. Proin finibus, felis eget finibus molestie, erat ante mollis leo, et condimentum nunc lectus a velit.

Panel 3 Title

Integer sed laoreet justo. Cras quis urna rutrum, faucibus augue sed, vestibulum enim. Donec porta nulla quis neque rutrum pellentesque. Nulla gravida at dui quis vestibulum. Sed sed ante ac ipsum suscipit mollis. Mauris purus ligula, egestas vitae gravida viverra, tincidunt ac enim. Suspendisse iaculis sem eros, non iaculis est rhoncus sit amet. Aliquam elementum lacinia tempor. Integer accumsan lacus elit, nec mattis eros dictum in. Phasellus auctor est quam, nec euismod quam facilisis quis. Vivamus gravida ante venenatis, dignissim nunc et, pellentesque nisl. Suspendisse lobortis accumsan massa, consectetur fringilla sapien volutpat ut. Pellentesque at arcu at enim condimentum faucibus. Nullam at lectus augue. Curabitur vitae elit ipsum. Suspendisse vel convallis metus.

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‘.

Automatically Adding Paragraph Tags

When you publish a page that uses Page Builder and contains widgets, be aware that a check box labeled "Automatically add paragraphs" will be checked in all Visual Editor widgets. This adds paragraph tags wherever the widget believes they should be. If you do not want these tags in your code, simply uncheck the box and update the page.

Automatically Add Paragraphs

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.

Authorize.net Shortcode

Use the following code to add an authorize.net payment button to your page:

[uc_authorizedotnet linkid="9448ec59-6f97-49fd-b8b4-8dc4bc9e503c" button="Continue to Payment Page"]

The linkid parameter should be pulled out of the form code from authorize.net. And the button parameter is the text you would like to display on the payment button.

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

Full-Width Homepage Slideshow or Image

Follow these instructions for a full-width slideshow or image at the top of your homepage. Examples of this can be found on the UConn website as well as The Major Experience website. Note that your homepage must be using the Page Builder and the Template must be Blank. Also, your theme must be either Sherman or Hale 2015.

Slideshow

  1. Create the slideshow. You can find more information about our Meta Slider slideshow tool here.
  2. Go to your homepage edit screen. Under Page Attributes, make sure that the Template is set to ‘Blank’.
    Full Width Slider Blank Template
  3. On your homepage, create the top row with 1 column. In the Row Styles, open Layout, and underneath Row Layout select ‘Full Width Stretched’.
    Full Width Slider Row Styles
  4. Insert a Meta Slider widget into the row and select the slideshow. Do not add a title.
  5. Add the following code to your Custom CSS:
    • SHERMAN THEME
      .home .entry-content {
      margin-top:0
      }
    • HALE 2015 THEME
      .home #content {
      padding:0
      }

Image

  1. Please Note:  Currently extra CSS may need to be added for the image to stretch full screen.  Follow the instructions below, if the image is left justified.
  2. Upload the image. Note: It may be a good idea to crop the image before adding it to your homepage. Normally, the ideal full-width homepage image will be very wide and very short.
  3. Go to your homepage edit screen. Under Page Attributes, make sure that the Template is set to ‘Blank’.
    Full Width Slider Blank Template
  4. On your homepage, create the top row with 1 column. In the Row Styles, open Layout, and underneath Row Layout select ‘Full Width Stretched’.
    Full Width Slider Row Styles
  5. Insert an Image widget into the row and select the image. Do not add a title, but you must add alternate text.
  6. Add the following code to your Custom CSS:
    • SHERMAN THEME
      .home .entry-content {
      margin-top:0
      }
    • HALE 2015 THEME
      .home #content {
      padding:0
      }
  7. If your image is Left Justified and not fully stretched, add the following to your Custom CSS:
    • Custom CSS
      .siteorigin-panels-stretch img {
          width: 100%;
      }