News

Revolution Slider: General Settings & Google Font Settings

Previously, we went over the Main Slider Settings for the Revolution Slider plugin and discussed how Rev slider offers a lot of customization with its long list of options. Today, we’re going to go over two specific subcategories of those options: The “General Settings,” and “Google Font Settings” sections on the New Slider page.

General Settings

General Settings

The General Settings Section

The General Settings section allows you to control features related to how the slider behaves on the page.

Delay – The time it takes for one slide to move to the next. This is measured in milliseconds – so in with the current settings, it each slide will have 9 seconds on-screen before the slider switches to the next one.
Shuffle Mode – Allows you to tell Rev Slider to shuffle through slides randomly, rather than going in any specific, predetermined order
Lazy Load – This delays images loading and essentially waits to load a slide until a user triggers its loading. When a user clicks an arrow on the slider or clicks a portion of the navigation on the slider while the slider is set to lazy load, the slider will take a moment to load the next slide and then display it.
Use Multi Language (WPML) – Allows you to create a slider that can be translated into different languages. For more information, check out this documentation.
Stop Slider – Allows you to stop the slider on the first slider.
Stop After Loops – You can stop the slider after a certain number of loops through.
Stop At Slide – You can tell the slider to stop running at a specific slide.

 

Google Font Settings

Google Font Settings

Google Font Settings in the Revolution Slider Plugin

Beneath the General Settings section, you’ll see the “Google Font Settings” header. Click that, and you’ll be greeted with a section listing your options.

You may be wondering what a Google Font is – Google offers a selection of fonts, for free, that are adaptable across the web. Historically, it has been more difficult to load fonts across different browsers, and fonts can cost quite a bit of money. Google has made a large library of fonts available for anyone to use on their website. To investigate these font options, check out the Google fonts library.

By default, if you look at the box beneath “The google font families to load:,” you will see a link to the stylesheet for PT Sans. By clicking the “Add New” button beneath this, you can copy and paste link to any other Google font stylesheet you wish. You can get access to the Google font stylesheets of particular fonts by looking through the options of the previously mentioned Google fonts library.

Revolution Slider: Main Slider Settings

Revolution Slider listed in the Dashboard Navigation

Revolution Slider listed in the Dashboard Navigation

With Revolution Slider, you can make a variety of cool slideshows (also called carousels by some).
You can even make sure the slider re-sizes for different size screens with a certain setting selected. Revolution slider can be a little overwhelming at first.

How do you get Revolution Slider (nicknamed “Rev Slider” for short) to be active on your site? Go to the “Plugins” page in your site’s dashboard, then scroll down to click “activate” in the list of plugins you see.

Now you should see “Revolution Slider” on the lower left navigation section of your dashboard.

Click that link, and you’ll be greeted with a page listing all your Revolution Sliders. Click on the “Create New Slider” button to get started. This is where all your options can feel a little overwhelming.

Today, we’ll discuss the “Main Slider Settings,” portion of the page (on the left-hand side). In subsequent posts, we’ll also go into detail about other nifty features of Rev Slider.

Slider Settings

Slider Settings

Slider Title – This should be a title that makes it easy for you to recognize the slider when you go to edit it in the dashboard again later, especially if you decide to have multiple sliders on your site. You don’t want to look at a list of slider names later and not know what they refer to.

Slider Alias – You might want this to be the same as the Slider Title, just for simplicity and memorability. This is the feature that allows the plugin to supply you with a Slider Shortcode in the next field.

Slider Shortcode – This is the shortcode that you will call in a page (or post, if you wish) to place the slider in that location.

Source Type Options – This gets a little complicated. Chances are, you won’t want to use the two Post choices for a slider and will go with the gallery instead, but we’ll go over them here anyway.

The Posts Source Type is Selected.

The Posts Source Type is Selected.

This is how the settings look when you opt for “Posts” as your source type.  Since I don’t have any categories, it doesn’t really give me any options for what categories of posts I would like to display in the slider. If we click “Sort Posts By,” we have a number of different options to sort how they are displayed, including the following: Post ID, Date, Title, Slug, Author, Last Modified, Number of Comments, Random, Unsorted, and Custom Order.

You can also select a sort direction here, plus limit the number of posts you include, and how many words the excerpt from each post will consist of.

If you click on the “Specific Posts” option, you will be given the option to list specific post IDs to select which posts you want.

The gallery option will allow you to upload slides and pictures after you save your settings.

Slider Layout: This is also somewhat complex, but don’t worry, we’ll explain each of them.

  • Fixed: This means your slider will not resize itself based on screen size; you simply put in a set width and height in the “Grid Width” and “Grid Height” boxes below and you are done.
  • Custom: This allows you to devise your own responsive sizes in that area below. For instance, if you know the screen width one of your users will be using is 320 pixels, you might want to make sure your Rev Slider only covers 300 pixels worth of that in width.
  • Auto Responsive: Again, you can customize your width and height of your slider, but Rev Slider will then predict what width it needs to be for each size device it is shown on.
  • Full Screen: In this case, you have the option of making the slider go fully across the page – but be careful, because this will depend upon the template of the page you have set it to display on. It asks for your offset containers – CSS classes and divs that it needs to know about so that it can fit neatly on the screen. Minimum fullscreen height allows you to tell it how to size itself.

One of the nicer things about Rev Slider is that it tries to give you an idea of its anticipated layout in the layout example box near the bottom of the screen. Be sure to play with the different options to be sure you have what you want!

Fullscreen Align: Allows a slider to be aligned on a full-screen page

Unlimited height: Allows the slider to have an unlimited height.

Force Full Width: Makes the slider have a full width

WordPress Security Update

icon-lock

The web.unc.edu team takes website security very seriously. From time-to-time, announcements are made about security vulnerabilities that require immediate action. Yesterday we learned that WordPress site administrators needed to update to the latest release, 3.9.2, to patch a vulnerability. We promptly updated the system this morning at about 7:30AM.

 

Security is a shared responsibility. Learn how you can play a role too.

Coming Soon – WordPress Upgrade to v3.9.1

On Tuesday, July 1st, web.unc.edu will be performing a WordPress Core update to version 3.9.1. This is a relatively minor release although you may notice an improved widget interface and visual editor.  Learn more:

WordPress 3.9 “Smith”
What You Need To Know About WordPress 3.9

When:

Tuesday, July 1 between 6:00AM and 8:00AM. There will be a brief outage of websites (both web.unc.edu and sites.unc.edu sites) including front-end and back-end.

Testing:

Web.unc.edu support staff test key enterprise sites, representative sites on web.unc.edu, and stock plugins interoperability. As there are a vast number of web.unc.edu configurations (themes/plugin combinations, etc.), site administrators are encouraged to test their sites in the testing environments we have setup for this purpose. A few things to consider first:

  • The test site (your site domain with a ‘webdev.unc.edu’ address… websites on sites.unc.edu should go to http://sitename.sitesdev.unc.edu). ) is not a production site.  Any and all changes made on webdev.unc.edu will be deleted on or before the beginning of the next upgrade cycle. In addition, site content may not be current since this is a testing environment.
  • If you are off campus you will need to use VPN to access the test site.
  • Content on test sites is approximately 3 weeks old.
  • When viewing your Dev site through SSL (https), you may see a message stating that:
    • “This connection is untrusted.” (Firefox)
    • “The site’s security certificate is not trusted.” (Chrome).
    • “There is a problem with this website’s security certificate.” (Internet Explorer)
Chrome Untrusted Connection

In Chrome – Click “Proceed Anyway”

In Firefox - Click "Add Exception"

In Firefox – Click “Add Exception”

Internet Explorer Untrusted Connection

In Internet Explorer – Click “Continue to this website”

Since this is a testing environment and not open to visitors outside of UNC, it is okay to proceed to the site. Steps to sign-in and test your test site:

  1. If your website is http://sitename.web.unc.edu, then you can test by going to http://sitename.webdev.unc.edu (Note: websites on sites.unc.edu should go to http://sitename.sitesdev.unc.edu).  All you have to do is add the ‘dev’ into the URL to get to your site.
  2. After signing-in, perform common tasks such as adding and editing posts, pages, menus, and media.
  3. View changes on the front-end of the website.

Feedback and Help:

If you have any other questions, please contact the Web.UNC group at webdotunc[at]groups.unc.edu. You should also feel free to post issues you come across on the Web.UNC support forums.  It is likely if you are seeing something that we’ve missed in our testing then others might be experiencing the same thing.

BeSafe.unc.edu

“Anne, Billy, and the rest of ITS were truly the MVPs of putting this website together. What impressed me most was the pace at which they worked. We were on a deadline to get the website completed by April, so when I met was them in early March, I was very concerned we wouldn’t make it, but they worked so fast to get a site designed and put the content up. They were also fantastic about translating our ideas for the site into reality. Finally, they showed a true commitment to ensuring the future success of the site. Anne sat down with me and taught me how to work with Word Press so that I could continue to improve the site”.-South Moore

The Executive Branch of Student Government Public Safety Committee approached us in early March about creating and launching the Be Safe site as a one stop source for safety information at UNC-Chapel Hill and the surrounding community. Anne McCarthy, our Web Support Specialist, led the effort for the development of the site by working with South Moore of Student Government. With a focus on easy accessibility, the responsiveness of the site was a high priority! To learn more about how we made sure the site was mobile friendly, read our step by step post about the Responsive Design Development.  Through trainings, lots of emails, and even more edits the site was ready to go live by the goal date of April 1st. Click on the image of their site featured below in the Student Union to explore their helpful resources!

besafeunion

BeSafe.unc.edu Responsive Design Development

Be-Safe-logo

BeSafe.unc.edu is a new site that is centered on providing a “comprehensive source for safety information at Carolina”. Using our Avada theme, the site is automatically responsive. However, it is responsive without being specific to the content on the site itself which leaves room for improvement.  To start, what does “responsive” mean?

“Responsive Web Design or RWD as it is commonly referred to, implies the formatting of Website design in a way that it most optimal for viewing and navigation across a wide range of devices, including traditional PCs, smartphones and tablet devices.” Read more…

 

Difference in Mobile vs Desktop Views

Try pulling up BeSafe.unc.edu on a computer.  View the image below to see what the first part of the site would look like on your computer. Click the image to expand the image.

Desktop View

Desktop View

 

Now try pulling up BeSafe.unc.edu on your phone! View the image below to see what the first part of the site would look like on your phone. Click the image to expand the image.

Mobile View

Mobile View

 

Just from these images you can see how drastically different the two views are. Avada did the “heavy lifting” to make this site responsive but there are still tweaks that can be done to bring the site to a new level in terms of user experience. Seeing as the site is meant for students and students tend to access sites via their phones, the mobile view of this site was critically important.

 

Before and After CSS Tweaks

To show what the site looked like on an iPhone 5 before and after any custom CSS edits were made via the Improved Simpler CSS plugin, view the following images and take note of the accompanying descriptions to understand what decisions were made and why.

Before: Blue Border               After: Green Border

before-after 1 color

Pay attention to the differences in the size of the logo. Decreasing the logo size on mobile/tablet allows the user to begin looking at content that matters to them instead of a logo that is too large.

 

Before-after color 2

Already at this point there is more information being shown on the “After” view than “Before” which saves both time and space.

 

before-after color 3

The focus on decreasing excess space may seem minor when viewing a site on a computer but on a mobile/tablet space is a valuable commodity. Treat it as such and make sure to view your site on a tablet/mobile to see what users are seeing.

 

before-after color 4

Notice that the paragraph text seen on the Before version is removed on the After version. The decision to do this was based on the fact that having a smaller screen size makes the content posted even more important. This content was playing an introductory role and is not necessary enough to warrant making space for it on the mobile/tablet view.

 

before-after color 5

CSS was in place on the site to force the footer widgets to stay at a certain height so that they were uniform on the site. Because of this, the Before mobile version shows the same which causes a lot of extra white space to show that makes for extra scrolling for the person viewing the site. Adding in a media query specifically for the mobile and tablet versions of the site allows those version to render widgets that have a height that corresponds to the amount of content. This decreases extra scrolling and white space which leads to a better mobile user experience!

 

before-before color 6

At this point, the “After” view is done. These final two images show the extra space that users would have had to scroll if CSS tweaks hadn’t been added to optimize the experience.

 

With just a few customization, the site is now much more user friendly and in line with the goal of giving members of the UNC community the resources they need to be safe!

Resources

Lynda.comSign in with your Onyen and password and watch tutorials on Responsive Web Design!

Responsive.is and Responsinator: Two wonderful websites that show what your site looks like on different devices in both portrait and layout view. As you are building your site, this is an easy way to see what your users will be seeing when they access your site on different devices. It also allows you to view your site on devices that you may not have!

How ConnectCarolina Uses MailPoet

ConnectCarolina uses the MailPoet plugin Wysija Newsletters to send Newsletters on a biweekly basis. Their personalized template shown below is one they made by using the drag and drop feature to add onto one of the 50 themes in place.

connectcarolina mailpoet

January 16th, 2014 Newsletter

 

Wysija Newsletters is web.unc.edu’s Newsletter plugin that allows users to send Newsletters to people while on the WordPress dashboard.

  • Drag and drop interface with the option to choose from over 50 different themes.
  • Automatically send a notification email to subscribers when a new post is published
  • Tracks how users interact with the Newsletters/emails that are sent (bounce, clicks, % opened, etc.).
  • Newsletters display properly on over 30 different email clients including Outlook, Gmail, Yahoo, iPhone, etc.

 

 

 

Note: To activate this plugin, see this Support Document.

Executive Branch of Student Government

“ITS helped us from beginning to end, we showed them what we wanted and they helped us make it happen! Thank you to Marcus and everyone at ITS for the tireless assistance.”
-Hannah Fussell

The Executive Branch of Student Government came to us in the Fall of 2013 wanting to create a brand new, responsive site. We had recently added a new theme called Avada that proved to be perfect for the job! Marcus Thompson, our WordPress Specialist, took the lead and worked with Hannah and Brent, two students on the Executive Branch, to create and customize their new site to meet their needs and goal of increased transparency. Click on the image of their site below to explore how they used Avada!

exec branch

How to Create a Pullquote

Overview

Skill level: Advanced- need knowledge of HTML and CSS
Plugins: Improved Simpler CSS

For this post, you will need to activate the Improved Simpler CSS Plugin. If you do not know how to activate a plugin, please follow these instructions.

Screen Shot 2014-03-10 at 12.35.28 PM

Example of a pullquote

For this example, we are going to create a pullquote like the one featured above on the Department of Philosophy site. To do this, activate the Improved Simpler Plugin then navigate to Appearance > Custom CSS. Once there, add the following CSS and select “Save”:

.pullquote {
 width: 170px;
 display:block;
border-left: 3px solid #56A0D3;
font-size: 1.15em;
font-style:italic;
padding: 0 1em 0 1em;
margin: 0 0 1em 1em;
font-weight: bold;
float: right;
width: 35%;
clear: right;
background-color: white;
}

After you have added this Custom CSS, you can then go into the Text Editor and add div with a class “pullquote”. For the example above, this looks like the following:

pullquote

 

Click “Publish” or “Update” if it is an already published page.

Coming Soon – WordPress Upgrade to v3.8.1

WordPress Version 3.8.1 Admin Area

WordPress v3.8.1 – New Post Screen

On Thursday, March 13th, web.unc.edu will be performing a WordPress Core update to version 3.8.1. This update features a significant style change to the WordPress Admin interface; as well as the addition of a new magazine style theme – Twenty Fourteen. For more information on these updates, check out the links below: http://www.sitepoint.com/whats-new-wordpress-3-8/ http://wordpress.org/news/2013/12/parker/

When:

WordPress Version 3.8.1 Responsive Mobile View

v3.8.1 Responsive Mobile View

Thursday, March 13 between 6:00AM and 8:00AM. There will be a brief outage of websites (both web.unc.edu and sites.unc.edu sites) including front-end and back-end.

Testing:

Web.unc.edu support staff test key enterprise sites, representative sites on web.unc.edu, and stock plugins interoperability. As there are a vast number of web.unc.edu configurations (themes/plugin combinations, etc.), site administrators are encouraged to test their sites in the testing environments we have setup for this purpose. A few things to consider first:

  • The test site (your site domain with a ‘webdev.unc.edu’ address… websites on sites.unc.edu should go to http://sitename.sitesdev.unc.edu). ) is not a production site.  Any and all changes made on webdev.unc.edu will be deleted on or before the beginning of the next upgrade cycle. In addition, site content may not be current since this is a testing environment.
  • If you are off campus you will need to use VPN to access the test site.
  • Content on test sites is approximately 3 weeks old.
  • When viewing your Dev site through SSL (https), you may see a message stating that:
    • “This connection is untrusted.” (Firefox)
    • “The site’s security certificate is not trusted.” (Chrome).
    • “There is a problem with this website’s security certificate.” (Internet Explorer)
Chrome Untrusted Connection

In Chrome – Click “Proceed Anyway”

In Firefox - Click "Add Exception"

In Firefox – Click “Add Exception”

Internet Explorer Untrusted Connection

In Internet Explorer – Click “Continue to this website”

Since this is a testing environment and not open to visitors outside of UNC, it is okay to proceed to the site. Steps to sign-in and test your test site:

  1. If your website is http://sitename.web.unc.edu, then you can test by going to http://sitename.webdev.unc.edu (Note: websites on sites.unc.edu should go to http://sitename.sitesdev.unc.edu).  All you have to do is add the ‘dev’ into the URL to get to your site.
  2. After signing-in, perform common tasks such as adding and editing posts, pages, menus, and media.
  3. View changes on the front-end of the website.

Feedback and Help:

If you have any other questions, please contact the Web.UNC group at webdotunc[at]groups.unc.edu. You should also feel free to post issues you come across on the Web.UNC support forums.  It is likely if you are seeing something that we’ve missed in our testing then others might be experiencing the same thing.

Custom Favicon

You can now create and upload custom favicons for your site. After creating a favicon, site administrators can upload it to their site in Settings > Custom Favicon. Simply upload the image, insert it into the post, and it will then appear in the URL bar, browser tabs, and other places to help give your site a unique identity.

New for 2014! Avada Theme

Web.unc.edu is pleased to announce the addition of Avada (pronounced like Nevada without the “n”); a powerful, highly flexible and customizable WordPress theme that gives the user control over many style and layout options. Its modern design includes a responsive layout, Retina ready graphics and five different sliders.

Some of Avada’s features include:

  • 100% fully responsive (theme and sliders)
  • High resolution graphics
  • Advanced admin panel that allows for customization of layouts, styles and colors
  • Shortcode generator
  • 2D/3D Layer Slider
  • Revolution Slider
  • Flex Slider
  • Elastic Slider
  • Theme Fusion Slider
  • Boxed and wide layout possibilities
  • Font Awesome icon integration
  • Advanced blog and portfolio options
  • Advanced font options
  • Unlimited sidebars
  • Many custom widgets

Avada acts, in many ways, as blank canvas of design layouts without the need for any coding knowledge. Check out some web.unc.edu sites using Avada:

The Executive Branch of Student Government

The John Curtis Student Enrichment Fund

Global Gap Year Fellowship

Additional custom styling was these sites was achieved utilizing the Improved Simpler CSS plugin and are not part of the Avada theme.

Latest News in the Dashboard

Now you can find the latest web.unc.edu news and info right in the dashboard. After signing-in to WordPress, you’ll notice these posts on the main Dashboard screen:

web-news