UT Shield

University Blog Service

University of Texas at Austin

, Filed Under: Did You Know

Improve Contrast Issues with Twitter Timeline Embeds

We recently had a user write in who wanted to share a tip about how to handle a common accessibility problem when embedding Twitter: Minimum Color Contrast.

I have been working to increase our accessibility scores and was able to improve the Twitter color contrast on our other sites by visiting the “set customization options” at https://publish.twitter.com/# where you can choose a higher contrast color for links.

I also shared instructions with all the Twitter content creators on how-to make images accessible,

https://help.twitter.com/en/using-twitter/picture-descriptions

–Sarah Snow, COLA

The good news is that you can do this on UBS using WordPress oEmbeds!

oEmbeds are a set of powerful features that allow you to integrates 3rd party sources into your site without the need for a plugin. One such oEmbed for Twitter which allows you to embed Tweets, profiles, lists, collections, likes, or Moments. In this post, we’ll look on how to embed Twitter into your pages, posts, and widgets. Then we’ll look into different approaches to how to check for color contrast.

Step one: Which Twitter Account do you want to use?

For this demonstration, we are using the UT Austin Twitter feed: https://twitter.com/UTAustin

Step two: Where do you want to embed it?

Create or edit a post or page and ensure that the editor is in the “Visual” mode. Then paste the Twitter URL onto a line all by itself.

Using Twitter oembeds in the WordPress post editor

You’ll know it’s working because the Twitter feed will “pop” in automatically.

Step three: Publish!

Done!

Now, how do you address color contrast issues that come up?

Step one: Grab your embed code from Twitter

  • Visit the Twitter Publishing page
  • Enter your Twitter feed URL into the field titled “What would you like to embed?”. In our example, we are using – https://twitter.com/UTAustin
  • Click the right-pointing “Next” arrow
  • Select the display option that you want

Step two: Addressing the Color Contrast Issue

This is the tricky part as you’ll need to know what color scheme you’re using, and trying a few things to determine what works with your design AND is color accessible. Twitter gives you the option of light and dark backgrounds, in addition to the option to to enter your own color codes for links. There are a number of tools out there to help with this decision. One tool that I like is contrast ratio.

Step three: Embedding

This will be a little different from the steps that we outlined previously as we won’t rely on the Twitter oEmbed.

  • Once you have selected your color codes on the Twitter Publishing page, click on “Update”.
  • You’ll be prompted with an embed code. Copy this embed code and go back to the page or post where you are posting your Twitter feed.
  • Be sure you’re in “Visual” mode in the editor and paste that code.
  • Click Publish
  • Once you publish you’ll be able to view your embed just like when using oEmbeds!

Accessibility is a large and encompassing topic that covers a large range of issues but taking it one step at a time can take you a long way in ensuring your website is accessible!

Here are some additional resources to help you as you learn more:

Color Contrast, Beyond the Basics

Twitter Accessibility

, Filed Under: Did You Know, News, Themes

UT WordPress Theme Now Available

Today we make available on the University Blog Service UT WordPress Theme. Site Administrators can activate the theme in their dashboards.

What is UT WordPress Theme?

UT WordPress Theme is based on the Genesis Framework and is bundled with branded CSS, images, and other web resources. Originally this was the theme available only through the CMS Hosting Platform, a service offered by ITS starting October 2016, in the WordPress for Texas upstream. We are making the UT WordPress Theme available on the University Blog Service in an effort to better support the UT Brand guidelines.

I want to use UT WordPress Theme on my site(s). What do I do?

If you are considering using UT WordPress Theme with your existing site, we recommend you evaluate UT Theme in the UBS Customer Acceptance Testing environment ( a.k.a., QUAL ) located at qual.sites.utexas.edu/<SITE URL> first. There you are free to make whatever changes you want without consequence to your live site.

Great! How do I get my site look like that?

What gives the theme’s design is the pages, posts, menu items, and widgets we preload into a site when it is created. We refer to this as “default content”. This is great for new sites created on UBS. Site administrators can make minimal changes to their new sites and see how we do design internally. However, existing sites will not have this content immediately available to them. This is to avoid corrupting the site’s existing content and configuration.

UT Theme relies on widgets for a number of elements of the overall design; mainly the footer and sidebars. We also recommend the following changes to achieve that look and feel;

  • Check out how to create the footer areas using Widgets
  • How to set up the Navigation Menu
  • What the default settings for widgets and supporting plugins

You can find specifics about how to implement elements of UT WordPress Theme’s design in this Service Now knowledge article.

What About the UT Responsive Themes?

UT Responsive themes will remain on the service.

My New Site Looks Funny After Switching Away. What Gives?

WordPress Themes rely on sidebars for their function and design. UT WordPress theme is no different. Often times two different themes will use the same name for sidebars. When this happens, themes will pack their widgets into the same sidebar and set whatever widget there as “Inactive”. As UT WordPress Theme uses widgets heavily, this can be impactful if a number of themes are being evaluated for a site. We recommend referring to the theme implementation article to overcome this issue.

, Filed Under: Did You Know, Plugin Documentation

How to use Simple Calendar Plugin

The Simple Calendar Plugin is an easy way to add Google Calendar events to your WordPress site. This plugin is available to your site by default.

There are a few steps you must follow before embedding your Google Calendar onto your site page.

  • Create a Google API Key
  • Activate Simple Calendar from your plugin dashboard.
    • Login to your site. From the Dashboard, click Plugins and activate Simple Calendar.
  • Enter the Google API Key from your clipboard into the activated plugin:
    • Calendar > Settings

screen-shot-2017-04-26-at-3-22-34-pm

For the full listing of help topics for the Google Calendar plugin, please go to – https://simplecalendar.io/

 

, Filed Under: Did You Know, News, Plugin Documentation

New UT Branding Bar Plugin

The UBS stewardship team is happy to announce a new plugin called: UT Branding Bar. This plugin is optimized for sites using the UT Responsive Theme.

Activating this plugin will place the University Brand Bar bar across the top of your site.

The University Brand Bar provides visitors to UT websites with a quick identifier of the UT brand and a consistently implemented route back to the UT Austin homepage. – UT Brand Guidelines

Here is what it looks like –

UT Branding Bar Example

That’s GREAT – but can I hide the existing UT Branding logo built into the theme header?

YES! Simply add custom CSS code following  these steps:

  1. Go to Appearance > Customize
  2. Click the “CSS Styles” tab in the left-hand menu
  3. Paste this CSS code into the box “Custom CSS Styles”
#UTbranding {
    padding-top: 40px;
    -moz-box-shadow: 0px 1px 2px #707070;
    -webkit-box-shadow: 0px 1px 2px #707070;
    box-shadow: 0px 1px 2px #707070;
    background: none repeat scroll 0 0 #FFFFFF;
    height: 50px;
    width: 100%;
    display: none;
    }

       4. Click Save & Publish

5. Now your site will look like this –

UT Branding Bar Plugin Example

ADDITIONAL INFORMATION:

If you activate this plugin and would like to remove the Black bar at the top of your site, do this:

  1. Go to Plugins
  2. Search for or find: MU Admin Bar
  3. Click Deactivate

We have added a Log In link in the footer of the UT Responsive Theme that will allow users to log in to their sites.

Please Note:

This plugin was developed for the UT Responsive Themes. It is recommend that site administrators use the UT Branding plugin with the UT Responsive theme. Your results may vary if using a different theme.

, Filed Under: Did You Know, News

Phase Out of blogs.utexas.edu Domain for sites.utexas.edu

Hello Blog Owners!

In August 2014, the University Blogs Service transitioned away from blogs.utexas.edu to sites.utexas.edu as the service’s primary domain. Currently, this domain is being hosted on the UBS server alongside sites.utexas.edu where all visitors of blogs.utexas.edu are being redirected to sites.utexas.edu.

We are in the process of completing the final stage to this transition and do away completely with blogs.utexas.edu. This will occur in two steps;

First, anyone visiting a “blogs.utexas.edu” URL will no longer be redirected along to sites.utexas.edu but to a page advising of this change. The purpose of this is to give visitors the opportunity to update their applications that rely on the old domain to use sites.utexas.edu instead.

The final step will be to instruct UTNIC to remove the DNS entry for blogs.utexas.edu after which point the domain will be retired and visitors will no longer reach the service.

These changes will occur first on June 30th, 2016 after 5:00 PM. The final “remove” step will occur on August 19th, 2016 by the day on September 15th, 2016.

Be sure to review any bookmarks, podcatchers, RSS feed readers, or any application that relies in some way on blogs.utexas.edu will no longer work. Your websites and content will still exist but will require that it be accessed with sites.utexas.edu.

We certainly do appreciate your patience and understanding during these changes.

Be sure to send your blogs related questions to help@sites.utexas.edu

Best,

The University Blogs Team

 

EDIT: Updated “remove” date to September 15th, 2016.

, Filed Under: Did You Know, Plugin Documentation

Wave of the Future: Google Analytics

This post will walk you through getting your site up with Google Analytics and properly configured. Let’s get started!

Before beginning, please be sure to review the best practices policy for the use of analytics on campus. Ensure that you have the following before beginning to configure your blog site:

• Site administrator credentials for a University Blog Service blog
• An email address that is not hosted on UTMail

First, create a Google Account. This can be your own personal Gmail/Google account if you have one. For departmental blogs or sites with multiple administrators, we do strongly recommend that a new Google Account be created for the group and that the credentials be shared in Stache with fellow administrators.

Next, log into the Google Analytics page, http://www.google.com/analytics/web, using the blog’s Google Account.

  • Click “Sign Up”
  • Fill out the New Account details using your blog information
  • And select “Get tracking ID”

screen-shot-2017-02-09-at-3-23-32-pm

Next log into the Dashboard for your WordPress blog site. Perform the following actions after logging in:

• Click on “Plugins” in the left hand menu.
• Look for a plugin named “Google Analytics for WordPress.”
• Click on the “Activate” link under it.

The Dashboard will refresh once the plugin had been successfully activated. At this point the plugin will need to be configured to follow the best practices for Google Analytics use on campus.

• Click on the “Analytics” in the left hand menu, then on “Settings” link underneath.
• Click “Authenticate with your Google account” and provide the email used to create your google analytics profile
• Copy the code provided and paste into the open box in your site dashboard
• Click on “Save changes”.

screen-shot-2017-02-09-at-3-42-05-pm

screen-shot-2017-02-09-at-3-42-49-pm

  • Select your site from the “Select Profile” dropdown

screen-shot-2017-02-09-at-3-46-32-pm

  • Click “Save Changes”

 

That’s it! You’re done! If you should have any questions, please feel free to send a quick email to help@sites.utexas.edu!

 

, Filed Under: Did You Know, News

The Events Calendar plugin

Events are fun – so are calendars! Publish your events with our new plugin – The Events Calendar. This is a carefully crafted, extensible plugin that lets you easily share your events.

You can activate it from your Plugins directory in your blog. Click Plugins from the left-hand side menu of your Dashboard. Once activated, view the Help link for  step-by-step instructions and videos.

From your Dashboard > left-hand side menu > Events > Help.

Or use this link – http://tri.be/support/documentation/events-calendar-pro-new-user-primer/

Enjoy….

, Filed Under: Did You Know

New Plugin! WooSlider!

There’s a new plugin on the block: WooSlider. Activate the plugin and you’re on your way to making a slideshow in minutes.

What is it?
WooSlider is an easy to use, highly customizable slideshow plugin. You can create slideshows of images or of blog posts. WooSlider is fully responsive which means your content will look great, regardless of the device it is viewed on.

Demo Slideshow:
[wooslider slide_page=”example” slider_type=”slides”] How do I use it in my blog?Dashboard-Slideshows
1. After activating the plugin, you’ll see “Slideshows” listed on your administrative navigation:

2. Go to Slideshows > Add New Slide to create new slides just as you would blog posts. Slides can be any combination of images and text

3. Put slides into slideshow groups just as you would categorize blog posts.

4. To insert slideshows into a post, Go to Add Media> Slideshows > Slideshow Type. Here you have the option to create a slideshow from already attached images, from previous blog posts, or from the slideshow group you just created.

5. Customize the slider in the Advanced Settings button on the same screen.

6. Click the Insert Slideshowbutton and some code will be inserted into your post. You now have a slideshow.

Where can I find more info?

 

, Filed Under: Did You Know, News

Our customers spoke – we listened.

We have a new theme based on the UT Responsive Theme. Our customers told us they would like to have an option to use the UT Responsive Theme – but with a smaller header image. The new UT Responsive Small Image theme serves this purpose.

new UT Responsive Small Image theme
UT Responsive Small Image theme

Your options for using the UT Responsive Theme are:

– UT Responsive Theme – image size: 960w x 320h
– UT Responsive Small Image has a header image of: 960w x 100h

To activate these themes on your blog, log in to your Dashboard and on the right-hand side, go to:

Appearance > Themes
In the “Search Installed Themes” box, type: Responsive

You will then see the two UT Responsive Themes provided by the University Blogs Team (provided one of these themes is not already your current theme).

To change the header image, go to:

Appearance > Header

Click the Choose File button and browse to the new graphic you created. Then click upload.

You also have the option to remove a header graphic completely. Click: Remove Header Image to do this. The title of your blog will show instead.

We hope you find these themes useful. Additional information about this theme can be found here. https://sites.utexas.edu/utresponsive/

, Filed Under: Did You Know, News

Activate FireStats Plug-in to View Traffic Statistics for Your Blog

Are you curious about what search terms lead people to your blog?  Want to know hits, page views and popular pages for your blog?  Just activate the FireStats plug-in.

How Do I Activate the FireStats plug-in for my Blog?

  1. From the Dashboard page, click the Plugin link.
  2. Then, click the Activate link for the FireStats plug-in.
  3. You then can view traffic statistics from the Dashboard page by clicking FireStats below the Dashboard icon in the upper left corner.

During the 12/16/2009 WPMU upgrade on sites.utexas.edu, the FireStats plug-in may have been deactivated on some blogs. Please take the time to reactivate this plug-in if you are interested in these statistics.

×