News

Child Theming with SASS

March 24, 2016

Cornerstone is built with SASS, and if you build your child theme with SASS, you’ll be shocked at how fast you can make a ton of changes. Though you are able to use CSS, Cornerstone was optimized for SASS.

Initial Child Theme Setup

To begin you must create the basic file structure like any other WordPress child theme. Below is an example. UITS has already compiled a starter kit for you in your sandbox. Your Cornerstone Starter kit should consist of:
  • javascripts
    • min
      • starterkit.min.js
    • starterkit.js
  • sass
    • variables.scss (SASS variables are located here)
  • css
    • variables.css
  • screenshot.jpg
  • functions.php
  • README.md
  • style.css
  • style.scss (This is the ideal place to do style changes)

Understanding SASS

The SASS variables available to you come from three possible documents. Cornerstone registers a large number of new variables mostly pertaining to navigation and widgets. cs-sass-bootstrap This is the pre-compiled Bootstrap scss in the global directory, and it has hundreds of variables.cs-sass-cs Cornerstone registers a large number of new variables, mostly pertaining to navigation and widgets.cs-sass-sherman Sherman, a child theme built with SASS, can redefine any of the variable in Bootstrap or Cornerstone before they are compiled. Rather than wrestling with a dizzying number of selectors and tracking down every single place a single color or font may be referenced, you can edit a few variables and be 80% complete with your redesign. It’s fantastic!

Using a Compiler

In order to make changes, you will have to edit style.scss using the SASS variables. You will also need a SASS compiler. A common one is PREPROS.
prepros scrrenshot
Using Prepros

Editing variables.scss

Once you have a general understanding of the variables and the file structure you can start editing variables.scss. This file contains listed default variables from both Bootstrap and Cornerstone. A change is simple: search for your target tag and change the attribute to whatever you would like it to be.
Overview of the variables.scss file
Overview of the variables.scss file

Example

To change the default link color for the navigation bar you would have to scroll down to the “$navbar” variables and make the changes you would like.
Variables we will be changing. The hex codes would be located here.
Variables we will be changing. The hex codes would be located here.
Look before any changes have been made to variables.
Look before any changes have been made to variables.
change variable
Look after changes have been made. Now, the navigation bar links are light blue!

Editing style.scss

In order to edit the style of your theme you will need to edit it using SASS in style.scss. Variables do not go in style.scss.

Example

Below is an example of how you can change the style of your theme’s master header.
Header before a style change.
Header before a style change.
Changes to styles.scss files.
Changes to styles.scss files.
Theme after style.scss change has been applied.
Theme after style.scss change has been applied.

Child Theming with CSS

Cornerstone was built with SASS, but you can still develop with normal CSS.
Don’t use @import in your CSS file, or your site will break in IE8.
Instead, add this to your functions.php file: 
<?php
function link_parent_theme_style() {
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
wp_enqueue_style( 'child-style', get_stylesheet_uri() );
}
add_action('wp_enqueue_scripts', 'link_parent_theme_style');
?>
Typically, a child theme will @import the css of the parent theme. Bootstrap 3, the framework which Cornerstone is based on, offers very limited support for Internet Explorer 8. By default, a Bootstrap 3 site in IE8 will render the mobile view. One column of content, and the collapse mobile navigation. Being that IE8 accounts for a sizable (~7%) of traffic on Aurora, Cornerstone makes use of respond.js, which uses javascript to mimic media queries for IE8. However, respond.js will not work on anything loaded via @import. So this alternate method is required.

Hale 2015

hale 2015Hale 2015 was a theme released in August 2015 as a part of Aurora Update 9. The bold blue Sherman theme was released in the summer of 2014, and its advanced features and customization options proved very popular. However, a number of customers requested a theme with all the functionality of Sherman but with the softer tones of the original Hale theme that was released in 2013. Hale 2015 addresses this issue, adapting the popular Hale design and keeping the powerful features of Sherman. A child of the Cornerstone theme, Hale 2015 will continue to benefit from all new features added to Aurora for years to come.

Sherman

sherman Sherman is a child theme of Cornerstone, and utilizes SASS to be as lightweight as possible. Its design is bold, yet clearly a product of the university. It is named after Roger Sherman, Connecticut’s representative to the Continental Congress, and one of the Founding Fathers.

Sherman

sherman Sherman is a child theme of Cornerstone, and utilizes SASS to be as lightweight as possible. Its design is bold, yet clearly a product of the university. It is named after Roger Sherman, Connecticut’s representative to the Continental Congress, and one of the Founding Fathers.

Themes and Plugins

Themes

UConn currently has four central themes as well as a number of custom themes and child themes created for specific UConn sites.

Plugins

To ensure the security and stability of Aurora, plugins are limited to set number determined by the Aurora Governance Committee. Plugins do get added regularly, but must be thoroughly tested and reviewed for compatibility with existing plugins.

Custom Themes and Plugins

Custom development is allowed for the Aurora WordPress server, but each plugin and theme, as well as any update, will have to go through Code Audit before being allowed in the system. Contact webdev@uconn.edu if you're interested in starting a custom project to get a development environment, and to be added to the developer contact lists. You may also want to look at our Live Sites with Custom/Child Themes.

Additional Links

Colorful Sidebar Menus

March 22, 2016

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.

User Roles

March 10, 2016

Actions that users can perform based on the role they’ve been given.

Administrator

Editor

Author

Contributor

Profile User

Subscriber

Buttons

March 3, 2016

To add buttons to your page/post, you must be in the 'Text' editor view.

Compatible Tags

You can make buttons out of the following HTML tags:
Tag Sample Code
 a 
<a class="btn btn-default" href="https://www.google.com" role="button">Link</a>
 button 
<button class="btn btn-default" type="submit">Button</button>
 input (type: button) 
<input class="btn btn-default" type="button" value="Input">
input (type: submit) 
<input class="btn btn-default" type="submit" value="Submit">

Button Classes

You may use the following btn btn-* classes to produce buttons of different colors:
Class Sample Code Output
btn-default 
<button type="button" class="btn btn-default">Default</button>
btn-primary 
<button type="button" class="btn btn-primary">Primary</button>
btn-success 
<button type="button" class="btn btn-success">Success</button>
btn-info 
<button type="button" class="btn btn-info">Info</button>
btn-warning 
<button type="button" class="btn btn-warning">Warning</button>
btn-danger 
<button type="button" class="btn btn-danger">Danger</button>
btn-link 
<button type="button" class="btn btn-link">Link</button>

Button Sizes

You may use the following btn btn-* classes to produce buttons of different sizes:
Class Sample Code Output
btn-lg 
<button type="button" class="btn btn-primary btn-lg">Large button</button>
N/A (default) 
<button type="button" class="btn btn-primary">Default button</button>
btn-sm 
<button type="button" class="btn btn-primary btn-sm">Small button</button>
btn-xs 
<button type="button" class="btn btn-primary btn-xs">Extra small button</button>

Block Buttons

You may also create buttons that fill the entire width of the parent div by adding a btn-block class. For example: