Diving with Sway (or What I Did on my Autumn Vacation)

Although I threaten to do so in the description of this blog, I rarely talk about diving. I think that the last time that I did so was about 3 years ago. However, I recently encountered an intersection of my vocation and my avocation that I thought was worth sharing.

In September/October this year, my wife and I went on a liveaboard dive trip down the entire Sea of Cortez (or the Gulf of California to you folks in the USA). A liveaboard is a cruise of sorts where you live on the boat and go diving multiple times per day. You get to see some amazing things that would otherwise be unavailable.

I like to document my dives using mostly photos and simetimes video.  The GoPro given to the Office MVPs last year (thanks, Microsoft!!!) at the MVP Summit has increased my use of video. Ultimately I return from these dive trips with a large collection of pictures and video, which I share out via Flickr, Facebook, OneDrive and YouTube. The problem is, these collections are disconnected, and while i try to tag and title the items, none of these collections really tell the story.

Thats where Sway comes in.

I’ve had access to Sway for a while, and while I did dabbble in it a bit originally, I didn’t really “get it”. I had a lot of video this time, and the trip warranted more “narration” than a simple collection of pictures could provide. I decided to give Sway another shot, with (I think) good results. You can see for yourself below. Click on the “Made with Sway” icon at the bottom left to open in full screen.

I found the Sway was exactly the right tool for this task. I was able to bring together diverse media elements from the trip, and organize them in ways that suited the narrative (not always chronologically). Adding the narrative itself completes the picture, and the presentation can stand on its own. I think, to sum it up, that Sway adds context to content.

Sway is an online tool. There are native clients available for Android, iOS ans Windows 10, but you are always working with online content – there are no files stored locally. Creation is simple. There are a number of preconfigured layouts which can be tweaked to some degree, and content addition is a simple matter of dragging and dropping from a set of cloud based repositories. You can share (and collaborate) at any time, and when ready, you can publish it on docs.com, where it will be available in galleries, search engines, etc.

In addition to travelogs, I can see this having great usefulness in the education space. I don’t think it will be replacing PowerPoint anytime soon – they serve different purposes. I would say though that in the absence of a presenter, I would likely rather have access to a sway than a PowerPoint deck – the Sway can do so much more on its own for explanations.

Finally, Sway is free. You’ll need a Microsoft account (either consumer or organizational) to use it, but you can simply point your browser at sway.com and get going on it. Give it a shot! I think you’ll like it. I do, and I think I’m going to dip into my back catalog to create more. WHen I do, I’ll be posting them in my diving collection on docs.com.

Advertisements

Using Themes and CSS with SharePoint 2010

Branding SharePoint just got a lot easier with the release of 2010. I used to have a basic rule of thumb when it came to using themes with 2007. Don’t use them. And if you must use them, don’t do further customization down the road. This is no longer true with 2010. The themes in 2010 are quite literally Office theme files (.thmx) and can be edited and created with PowerPoint.

There are really two types of branding exercises with SharePoint. The first is for public facing, typically anonymous sites with a high degree of customization and complete control over all of the visual elements. The second is for authenticated, typically intranet type sites where some customization is necessary, but where appropriate, out of the box visual elements can be used. In either case, themes are a good place to start the branding exercise, but they are particularly compelling with the latter, which is what this article is focused on.

Themes are essentially a collection of colours, and default fonts. You can apply a theme to a site by going to Site Settings, and selecting Site Theme under the Look and Feel heading.

image

As can be partially seen here, there are two other major theme features in 2010 that were not available in 2007,the ability to inherit a theme from a parent site,and the ability to push a theme down to sub sites, much like the way that master pages work.

From here you can select a theme, and if you like modify it. You can change the base colour for the 12 colour categories (the colour scales are calculated automatically), and you can set the base font face for headings and body. If you do modify these colour, you should be aware that you are not modifying the theme files themselves, which live in the theme gallery, but the derived CSS classes that are automatically generated whenever a theme is applied to a site. As such, you will find yourself working with a “custom theme”. Unfortunately, there is no way to save the custom theme off to the gallery, or locally, and that severely limits its reusability options. If anyone from Microsoft is reading this, please consider it a feature request.

The best way to edit a theme is by using PowerPoint, and it’s exceedingly easy. You can create a theme from scratch easily enough, but if you wanted to use one of the themes that ship with 2010 as a starting point, you can simply navigate to Site Settings (from the root site), and select Themes under the gallery heading. This is a simple document library, so select the theme in question, and click “Download a Copy” from the ribbon.

image

Once the file is downloaded, just double click on it to open up PowerPoint. PowerPoint will open up to a blank presentation. Click on the Design tab in the ribbon, and you will see that your theme colours are currently selected. You will edit your theme using the “Colors”, “Fonts” and “Effects” buttons.

image

Here’s where it gets a little non-intuitive. To change your colours, click the colors button and select “Create New Theme Colors”. I know… they’re not new, but to PowerPoint they are.

image

Edit away to your heart’s content, and then give the theme a good descriptive name so that you can refer to it later. You will likely use this name when saving your theme in a moment, but for now, this name will be used by PowerPoint to identify this group of colours. When you’re done selecting colours, save them, and repeat the process as necessary for fonts and effects. Once done, it’s time to save your theme. Simply use File-Save As, and select the “Office Theme (*.thmx”)” file type, and give the file a good descriptive name. Once that’s done, navigate back to the theme gallery, upload it, and it will be available for selection now under site theme.

What happens if you want your customization to go a little further? Maybe you’d like to tweak some of the CSS classes a little?   Should your start figuring out what the system classes are and start changing them? What’s the best approach?

Under no circumstances (OK, maybe a couple, but don’t) should you modify the core CSS files. There are many ways to accomplish your goal, I use several depending on the use case, but one of the easiest is to simply create a CSS Override file, and tell the system to use it. I start with a blank file called CoreOverrides.css (call it whatever you want) and I store it in the root of the style library. The next step is to tell the site to use it.

From the root site, Go into site settings, and select the Master Page link in the Look And Feel section. Then scroll down to the “Alternate CSS URL” section.

image

The description for this section is just as poorly written in 2010 as it was in 2007. It implies that by turning this on, you’re turning the internal classes off. This is not at all  true. The file that you indicate here gets loaded into the CSS stack after all other system classes have loaded, and therefore any classes defined here will have precedence over any identically named system classes. That’s why I call it Overrides.

How do you know which classes need to be modified? That’s where hacking comes in, or a lot of patience. You can study the master pages and page layouts, use view source on a rendered page, or use the IE developer tools. I use all 3, but I’m beginning to like developer tools a lot.

Load the page in question into IE, and then press the F12 key (or select Tools-Developer Tools from the menu). You will get a child browser widow pop up and from here you can navigate the entire DOM of the page. However, we want to see what CSS is being applied to a particular element, and the easiest way to do that is to select the CSS tab, and then select Find-Select Element By Click from the menu. You can then hover over any element on your page which will be outlined, and when you have the one that you want, click it , and its CSS stack will be displayed.

Once you find the class who’s behaviour you wish to change, simply copy its definition over to your overrides file, and edit away. Keep in mind though that you’re overriding a pre-existing class definition, and therefore you need to be explicit. If you want to remove a background image, you cant simply remove its definition, you must set it to “none”. Also, because some properties can be very sticky, I find the use of the !important directive to be very helpful.

Happy branding!