We are evaluating the best place for help questions to be, but will continue to post maintenance updates on the CWS blog in the Maintenance and Updates Category.

Thank You,

CWS Leadership

Responsive really means responsive web design.  The goal behind responsive web design is to have the design of a given web page be adjusted dependent on the size of the screen.  So on a phone, the look and feel changes to be more of a mobile experience where reading a full web page doesn’t necessarily make sense.

The theme is a two column theme, with only a main sidebar, and the bottom contact area as available areas to put widgets in.  Remember, not all widgets will look good in different areas so you will have to see what works and doesn’t.

Who can use OSU Responsive?  Responsive is available for everyone, however, there are some things to note.  The use of the OSU logo or tag is restricted to certain use.  The theme will display the tag or not based on the Organization Type as specified by the table below.

Student Organizations are governed by the policies of Student Leadership and Involvement.  If you are a student group and do not know which type of organization you are, please visit the Student Leadership and Involvement site.

What do you need to do to use it?

1.  If you are switching over from an existing theme, and you switch it immediately, it might seem that your site is broken in layout.  It isn’t.  It is simply that the widgets need to be removed and put back into the areas available for it.  So we recommend first removing all the widgets in use from the sidebars.

2.  Go to Appearance -> Themes in your WordPress dashboard, and select the OSU Responsive theme.

3.  Put your widgets back into the sidebar.

4.  Deactivate the Sociable Skyscraper plugin if you are using it.  Use of this inserts a thin horizontal line and makes the theme look broken.  Go to Skyscraper Options in the Select Sociable Plugin expanded menu to deactivate.

And that’s it.  Good blogging to you all.

Accessibility and Brand Guidelines

As part of the OSU Responsive use, the use of a different background image or color must adhere to OSU’s policies regarding Accessibility and Brand.  Any failure to do so may cause your blog to be disabled.  The net takeaway here is don’t change it if you don’t understand the policies, which is why we at Central Web Services, take care of these things for you in creating the default theme.  However, do remember within your articles, accessibility policies still apply if this is used in any official capacity for students, staff, or faculty or OSU.

Tips

When you are writing for responsive design, it is important to remember a few things:

1.  Look to use meaningful words for URL links, and then link those words to the URL using the Link icon in the editor.  Long URL’s do not wrap, and when viewing on a mobile device it doesn’t look nice as the URL stretches off the screen.  The same applies to email addresses.  Link a person’s email to his or her name.

2.  Digest-able content.  If you give someone on a mobile device too much content to read, it’s like giving someone a plate of too much food.  They’ll eat some of it, but then some will be wasted.

3.  Shrink your browser down to a mobile width and see what it looks like, then you can go back and adjust items.  Remember, it should look nice, so if something isn’t working, look for alternatives.  As always, let us know if something can be improved.

Admin Changes

• On your dashboard view, “My Blogs” has been changed to “My Sites”. This change is common throughout, many references to blogs have been changed to sites.
• Menu link wording changes: Posts->Edit becomes Posts->Posts, and Links->Edit becomes Links->Links. These links still take you to pages with the same functionality, only the text of the menu link has changed.

Menus

• Under Appearance, there is now a custom Menu builder. Information on the menu feature can be found in the help documentation at wordpress.org.

Admin Bar

• A new menu bar displayed at the top of blogs when you are logged in. It contains links to commonly used admin screens.

Streamlined Writing Interface

• To declutter the interface, many options on screen have been hidden by default. If you are looking for a feature that is missing, check by clicking on Screen Options (small tab in the top right corner) to enable them to show.

Accessing the administrative features

As with any WordPress blog, reach the administrative page by typing “/wp-admin” at the end of your blog’s URL. For blogs.oregonstate.edu users, that would be: blogs.oregonstate.edu/YOURBLOGNAME/wp-admin.

Widgets and regions

The Authentic theme contains a number of custom widgets and layout regions that can be accessed through the administrative panel. These widgets allow for customization of your blog. To access widgets, go to your blog’s administrative page and select Appearance > Widgets from the right-hand menu.

Through using widgets and regions, you’ll be able to customize your layout to create a distinct front page for your blog and to give it a newsletter feel.

Feature

The feature region can be used to create a front-page image or to highlight a feature blog post. You can add a feature region by dragging the Home Page Feature widget to the feature region in the widgets control panel.

You will be asked to input a link to an online image. This image should be exactly 620 pixels in width and roughly 250 pixels in height. The height can be variable, but the width is fixed.

You will also be able to input a link to a blog post or other page or site. Finally, you can input a caption to appear below the photo.

Sub-features

This area is for highlighting three separate pages of your site or within your program or department. You create this space by dragging the Home Page Sub Level Features widget into the sub-features region on the Widget panel.

You must choose 3 photos of exactly 200 pixels in width and 72 pixels in height. These photos can exist online in your blog’s media library or elsewhere on the web. You will also be required to input a link for each photo, and a caption. It provides a great opportunity to highlight different posts or pages within your blog on the home page of your site.

Sub-features can be used with the feature or separately.

Middle and right sidebars

You can customize the content of middle and right sidebars to suit your needs using all of the default widgets that WordPress provides.

Middle sidebars only appear on the blog’s home page and on blog post pages. It does not appear on blog pages.

Contact information

This widget allows you to customize the contact information appearing in the blog’s lower-left-hand corner.

This information comes from the OSU Brand Guidelines.  You can read more about this theme and see a video tutorial on the Brand Guidelines WordPress Themes page.

New Themes

In this release, we’ve added three new themes for use by all blog types.  These themes feature many customizations for users to personalize their blog.

Dixi

The Dixi theme sports an optional, customizable “home page” that can be set up to display up to four different, tabbed feed displays on the front page.  Additionally, Dixi has a special video embed feature that allows you to embed your favorite video and display it in a preset block on your custom home page.

Here’s a list of some of the other really interesting things you can do with Dixi:

• Body Features
  • Change background colors
  • Change content background color
  • Change body line color (such as for grids)
  • Add background images
• Text Features
  • Change body font globally
  • Change headline font globally
  • Change font size
  • Change all text based colors (body text, links, etc)
• Custom Image Header Features
  • Upload custom image header – to your own height requirements

Nelo

The Nelo theme, like Dixi, includes  an optional, customizable “home page” front, but Nelo maintains a focus on images versus feeds.  Nelo’s home page allows for up to five different, well-sized images to be uploaded and displayed.  The Custom Homepage control panel also allows you to enter URLs for each block section of content.

But this isn’t all Nelo does…here’s how Nelo stacks up, in terms of other features:

• Body Features
  • Change background colors
  • Change content background color
  • Change body line color (such as for grids)
  • Add background images
• Text Features
  • Change body font globally
  • Change headline font globally
  • Change font size
  • Change all text based colors (body text, links, etc)
• Custom Image Header Feature
  • Upload custom image header – to your own height requirements

Triden

Triden is a feed machine.  Best suited for news-based blogs, this theme has the space for five separate news feeds in separate feed blocks.  Similar to Dixi and Nelo, Triden also has an optional custom homepage feature.

Triden also possesses the same base customizable features as Dixi and Nelo:

• Body Features
  • Change background colors
  • Change content background color
  • Change body line color (such as for grids)
  • Add background images
• Text Features
  • Change body font globally
  • Change headline font globally
  • Change font size
  • Change all text based colors (body text, links, etc)
• Custom Image Header Features
  • Upload custom image header – to your own height requirements

Plugins

We’ve also added a few new plugins to the site in this release.

Admin Message

First up, a plugin that allows the blogs.oregonstate.edu administrators to send a message to all users on their admin screens.  You’ll notice that we used it to announce this release and link to this post with the details.  This will be our primary use of this tool.

Global Site Tags Widget

The Global Site Tags Widget was added as a way for us to provide more functionality to our main blog directory.  It creates a tag cloud of all tags used on all blogs in blogs.oregonstate.edu.  You have access to include this functionality in your blog too, using the Global Site Tags widget found on the admin screen under Appearance -> Widgets.  A more detailed post on this feature is available.

Google Analytics

We’ve added a Google Analytics plugin which is available to all blogs.  You can find the configuration on the admin screen under Settings -> Google Analytics.  By default, all blogs are added to the primary OSU profile.  If you would like access to this profile, you can contact Web Communications.  You can also sign up for your own independent tracking code through Google and update the settings on your blog.  A more detailed post on this feature is available.

As always, if you have any issues with this release, please contact CWS using our help ticket.

By default, all blogs are added to the primary OSU profile.  If you would like access to this profile, you can contact Web Communications and they will be happy to help you get the ball rolling.

If you would like to start up your own profile, just do the following:

1. Go to: http://www.google.com/analytics/sign_up.html
2. If you do not yet have a Google account, you must sign up for one to use Google Analytics.  Create an account, if necessary, and then log in to the account.
3. You will be redirected to the Google Analytics starting page – click Sign Up.
4. You will be redirected to the Analytics: New Account Signup page, enter the following information:
   1. Website’s URL field
   2. Account Name field
   3. Time Zone Country or Territory field
   4. Time Zone field
5. Click Continue
6. You will then be redirected to a page where you will have to fill out the following information:
   1. Last Name field
   2. First Name field
   3. Country or Territory field
7. Click Continue
8. You will be redirected to the User Agreement page – read the terms and click the Yes check box to continue
9. Click Create New Account
10. Your Google Analytics code will be presented to you.  Look for the UA-xxxxxx-x number within the code – this is what you’ll need for the Google Analytics setting on your blog

Configuring your blogsite for Google Analytics

Once you have your Google Analytics tracking code, login to your blogsite and do the following:

1. Go to Dashboard > Settings > Google Analytics
2. Paste your Google tracking number into the Tracking Code field on the page
3. Click Save Changes

To check your stats, just log in to Google Analytics and your report will immediately show.  Google Analytics operates on a 24 hour delay, so you must wait at least one day after configuring your settings to start tracking results.

To Use the Global Site Tags Widget

1. From within your Dashboard, go to Appearance > Widgets
2. Locate the Global Site Tags widget in the Available Widgets group at the top of the page. Click on the widget and drag it into an available region such as Sidebar 1, Sidebar 2, etc.
3. Once the widget has been positioned, click on its arrow to open up the widget control panel
   1. Title: this is optional. If you don’t enter a title it will show the default widget title.
   2. Tag Cloud Order: This will determine what order your tags show, choose either Tag Count or Most Recent
   3. Number of Tags: Select a value here.  Numbers are available in one digit increments from 1 to 100.
   4. Largest Font Size: This will show the most popular tags as the largest font in the cloud. Sizes, in pixels, are available in one digit increments from 1 to 100.  It’s recommended that this font be larger than the Smallest Font Size you select (see next step).
   5. Smallest Font Size: This will show the newer or least popular tags as the smallest font in the cloud. Sizes, in pixels, are available in one digit increments from 1 to 100.  It’s recommended that this font be smaller than the Largest Font Size you select.
   6. Click the Save button when completed
4. Click on the Visit Site link to see your new widget in action.

Here’s a list of some of the other really interesting things you can do with Dixi:

• Body Features
  • Change background colors
  • Change content background color
  • Change body line color (such as for grids)
  • Add background images
• Text Features
  • Change body font globally
  • Change headline font globally
  • Change font size
  • Change all text based colors (body text, links, etc)
• Custom Image Header Features
  • Upload custom image header – to your own height requirements

To explore all of the different features available with the Dixi theme, first you’ll have to activate it by going to Dashboard > Appearance > Themes.

After the theme is activated, just go to Dashboard > Appearance > Theme Options to change your theme’s settings.

But this isn’t all Nelo does…here’s how Nelo stacks up, in terms of other features:

• Body Features
  • Change background colors
  • Change content background color
  • Change body line color (such as for grids)
  • Add background images
• Text Features
  • Change body font globally
  • Change headline font globally
  • Change font size
  • Change all text based colors (body text, links, etc)
• Custom Image Header Feature
  • Upload custom image header – to your own height requirements

To explore all of the different features available with the Nelo theme, first you’ll have to activate it by going to Dashboard > Appearance > Themes.

After the theme is activated, just go to Dashboard > Appearance > Theme Options to change your theme’s settings.