Category Archives: CSS

Design Manager and The Return of the Snazzy Looking 15 Minute Weather Web Part


You may also be interested in: fpweb.net


 

Editor’s note: Contributor Erik Abderhalden is a consultant with Rightpoint. Follow him @erikboderek

They say there’s only two seasons in Chicago: construction and winter. Thankfully most of the major highway and tolls are construction free now (sans I-90 west of 290), and winter is a while away. Or is it? Chicago weather is downright bizarre. How do you keep tabs on what it’s like outside? 15 minute weather web part to the rescue!

What I love about the 15 minute weather web part is how easy it is to style. Unlike other weather web parts, you can really get into this one and style it however you want. In my initial post this would just be another ol’ web part sitting pretty in a zone. What if I’m too cool for zones? OK Fonzie, chill. We can create the weather web part as a snippet and place it anywhere we want and style it however we want. Since we’re too cool for zones, we can even embedded in – wait for it – the master page.

Thanks to the HTML snippet generator in SharePoint 2013 you can place it anywhere you want in the master page. Here’s how. Make sure Publishing is enabled on your site first.

  1. Download jQuery Tools here and zWeatherFeed here and place them in your site. Download jQuery too – especially if your master page isn’t already using it.
  2. Follow the configuration steps in my original post (stop after the first code block)
  3. Save the code as a text file
  4. Upload the text file to your Style Library and publish it
  5. Follow steps 1-5 here.
  6. In the Design tab select Media and Content > Content Editor
  7. 2013-11-12-WeatherWebpart-Part02-01.png

  8. In the content link property, enter the URL of where the text file from step 4 was uploaded
  9. Expand the Appearance section and set Chrome Type to None
  10. Click the Update button right of the web part properties
  11. 2013-11-12-WeatherWebpart-Part02-02.png

  12. Click Copy to Clipboard. Don’t worry that the preview is empty.
  13. Open up your master page in SharePoint Designer
  14. Make sure you open up the HTML version of your master page and not the .master
  15. Look for SharePoint: AspMenu ID="TopNavigationMenu". A line or two after it there should be a / asp: ContentPlaceHolder> and a / SharePoint: AjaxDelta> . Create a div with the class "weather".
  16. Paste the content copied from the snippet generator inside that div. It should look something like this:
  17. 2013-11-12-WeatherWebpart-Part02-03.png

  18. Save the master page and check out your site

OK – so it looks a little wonky. Let me help you with some CSS. Throw this in a CEWP or reference it via an external stylesheet in your master page. This won’t be perfect because the position of the classes depends on other elements in your master page, but this should whet your appetite.



When done, your web part should look like this. If you have multiple locations in your text file, the web part will rotate through them as well.

2013-11-12-WeatherWebpart-Part02-04.png

I wanted to share one caveat. If you’re using design manager to package up your publishing assets to move between environments or create a boilerplate site template, leaving the 15 minute weather web part, or any other web part embedded in the master page, is a bad idea. Strange things happen when you import the package. I’ll save you the headache now instead of later.

Finally I need to share some credit where credit is due. This post wouldn’t be possible without the help of my awesome coworker Liz Sdregas.

SharePoint: Create a Snazzy Looking Weather Web Part in 15 Minutes or Less


You may also be interested in: fpweb.net


 

Editor’s note: Contributor Erik Abderhalden is a consultant with Rightpoint. Follow him @erikboderek

When people ask me what’s the weather is like outside, I think of Good Morning Vietnam when Robin Williams asks his fictional weather reporter Roosevelt E. roosevelt what the weather’s like. Roosevelt snaps back, "You got a window? Open it."

When it comes to intranet sites, one of the more frequent requests is the ability to display weather. Not everyone in corporate America has the ability to open a window, nay even sit by a window. Thus a weather widget, or in the case of SharePoint a web part, is utilized to showcase the current temperature and give workers something to look forward to when they leave work or plan their weekend.

If you Google "SharePoint weather web part" you get a slew of solutions and they all have different functionality. What if instead of downloading a web part you could use a content editor web part and some JavaScript, CSS and accomplish the same functionality for free? It’s easy to set up and takes about 15 minutes from start to finish.

In this solution, I’ll be utilizing Zazar’s zWeatherFeed JavaScript and some CSS. zWeatherFeed utilizes Yahoo weather and is easily customizable to meet your requirements.

First, download the zWeatherFeed JavaScript here. If you’re like me and reside in the United States, we don’t use Celsius like the rest of the world, so we need to change the script to use Farenheit instead of Celsius. In your favorite script editing program, open up the script you just downloaded. Do a search for "unit" and replace the value of "c" to "f". The location varies if you downloaded the .min.js or .js file. Here’s what you need to look for:

zweather.min.js
unit:"c"
zweather.js
var defaults = { unit: ‘f’,

Great. Upload the JS to a safe place on your SharePoint site.

Now create a new text file. In the text file we’re going to place our code to call the JavaScript, and set up the HTML formatting for the weather.

The code is as follows. Be sure to update line 3 to reflect the JavaScript’s actual location.



In line 7 of the code are all the zip codes the web part will diplay the weather for. You can use up to 10 zip codes so update the code to be reflect all the zip codes you wish to display. When done, upload the file to your site.

Now you’ll need some styling. First things first, download this image and add it to your SharePoint site. This will be used to toggle between the different weather forecasts and displays at the bottom of the web part.

We’re not doing anything fancy here other than following the instructions about styling the .day and .night classes so the web part’s background will reflect if it’s presently day or night in the currently location. You can add the stylesheet to the page via your prefered MO: another CEWP, in the same text file as the JS, an external stylesheet etc.,

However you place the stylesheet, be sure to update line 53 to reference the image you downloaded in the previous step. If you don’t include the reference, no worries, but you won’t have the nice navigation in the web part because that’s what truly defines this web part as snazzy opposed to all those non-snazzy weather web parts.



Be sure to upload the CSS to your site. Now that the fun stuff is done, it’s just configuring the page. Add a content editor web part to the page and reference the JavaScript in the web part’s content link property. Repeat if applicable for the CSS. And voila! You’re now the proud owner of a snazzy looking weather web part!

2013-11-05-WeatherWebpart-01.png

XSL in SharePoint

 

A few months ago, Dustin Miller, Heather Solomon and I completed our workshop series, "Customized Branding Solutions with CSS and XSL". During the third session, I recorded some "Hot Tips" as Dustin was delivering his sessions on Enhancements with XSL: Advanced Grouping. I thougt you might find the tips helpful.

  • Ignore SharePoint when sketching out a solution.
  • Create a central library of XSL and CSS snippets at the top of the site collectionfor easy access from any site.
  • Break XSL into separate templates for much easier management
  • Load common files to the top level site collection so that all subsites have access to the snippets.

I like a lot of the ideas that Dustin showed in the workshop. I’ll be expanding on those here in the near future, so if you want to get your hands a little dirty, watch and follow along as I learn to hack my way through the weeds of XSL and CSS in SharePoint.

SharePoint and Beginning Branding: CSS is the Key


You may also be interested in: Documentation Toolkit for SharePoint


 

A few months ago we conducted a series of branding workshops with Heather Solomon and Dustin Miller. One of the sessions with Heather, Customized Branding Solutions in SharePoint 2007/2010/2013, confirmed for me that CSS is absolutely the way to go for power users who want to update their SharePoint sites. The session started with an overview of browser tools that are essential for site developers and how they can be used to "discover" the various components to update a page.

I think "developer" is the wrong word here, however. When I think of a developer, I think of some code geek buried up to their elbows in Visual Studio. With CSS, any site manager can make some very effective updates to their site without access to the server. In the case covered during the session, Heather walked us through taking a bullet list menu and updating it into a full fledged horizontal, customized set of buttons, all with CSS.

From there, she tackled the Quick Launch by turning the headers into a gradated background and adding library icons to each.

2013-07-23-SharePointBeginningBranding-01.png

All of this was done in real time, in the browser as a way to prototype a new solution without having to bring down the site or make changes to the existing site.

Dynamic, real time prototyping is a great way to be able to experiment with a new look and feel in SharePoint while getting client buy in for a new concept. If you haven’t tried it, download FireFox and install the FireBug plug-in to get started. It’s as much fun as starting all over again. Here’s a quick tutorial on FireBug. It’s talking about WordPress but you can use the same techniques to play around with the SharePoint interface.

http://www.youtube.com/watch?feature=player_embedded&v=956IDvJ2Aa0

HTML5 and SharePoint 2010 – Part 5: Modernizr


You may also be interested in: Documentation Toolkit for SharePoint


 

Editor’s note: Contributor Eric Overfield, a leading expert in SharePoint Branding and User Interface design, is President and co-founder of PixelMill. Follow him @ericoverfield

In my previous articles on HTML5/CSS3 and SharePoint 2010 we inspected HTML5 and CSS3 and endeavored to integrate these into the SharePoint environment. Mostly a success with some caveats. We browsed through the basic requirements necessary to use HTML5 in your SharePoint sites although I referenced a few HTML5 master page templates that have already been built by outstanding SharePoint Branding community members and recommended them as your basis so you could begin with a solid HTML5/SharePoint foundation without having to start from scratch. Let us continue with a look at more caveats.

But many of my users are still on IE7 or IE8

Yes, unfortunately may of our user base is still using IE8 or older. We can complain all we want, but such is life. We saw how we could use html5him to enable HTML5 elements such as <nav> and <header> but what about other features of HTML5 including <canvas>, or how about CSS3 properties such as rounded borders or text shadowing?

Modernizr to the Rescue

What we need is a tool that can provide us the knowledge of what features are available on each client, and if possible provide shims for backward compatibility, and that tool is Modernizr. Modernizr is a lean JavaScript library that can detect HTML5 and CSS3 features available at the client side. After the Modernizr library is loaded by the client during a page view, we can use simple conditional feature detection statements to see if a client’s browser allows a particular feature, say if borderradius (rounded borders) is allowed, or if the video or canvas tag is supported. You can even use Modernizr to detect what kind of video is supported (currently Modernizr checks for ogg, webm and h264 support). There is a large set of features you can check for; for an entire list, review their feature set list.

The point of this is to allow you to use JavaScript/jQuery/CSS to provide different experiences based on each particular client’s browsers available features, without having to keep a master list of user agents handy. This is going to become even more important as we start moving towards responsive sites. Say that you are looking to move your SharePoint videos to the <video> tag. Well, if that tag is not supported in a client’s browser then you could use JavaScript/jQuery to grab the <video> source value and load it into a Flash player, or provide some other fallback measure. Or, say that rounded corners are unavailable then have those clients load a different CSS style sheet that provides different styling. Sure, you could use the <!–[if lt eIE 7]> <![endif]–> tag in your head to load a different css file in for IE7 users but that might not help in the case of video, audio or canvas tags.

Another advantage of Modernizr available to you is the use of polyfills. Polyfills are JavaScript shims that help replicate “modern” api’s in older browsers including shims for tags such as video, audio and canvas. Interesting. There is a polyfill for almost all HTML5 apis and you can learn what is currently available at https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills. If we take the case above of what to do when the <video> element is unavailable, we could use a prebuilt polyfill to replicate the functionality.

Installing It

Enabling the Modernizr library in your SharePoint site is easy but as always with SharePoint, there are tradeoffs. Let’s not forget that SharePoint 2010 was not built with IE9 or HTML5 in mind.We will continue with our sample HTML5 SharePoint site we have been working with.

1. Download the most recent stable Modernizr library from www.modernizr.com. When you download a production build, you get to decide which elements you actually want to check for. Select only those elements which you will provide conditions for to keep the Modernizr footprint to a minimum. Under “Extra” make sure to include Modernizr.load as we will use that for polyfills among other reasons.

2. Add your custom modernizr library to your SharePoint site. In my case I placed this in /Style Library/html5/scripts, and named my custom library modernizr.custom.js.

2013-07-09-SharePoint2010HTML5-Part05-01.png

If you have publishing enabled don’t forget to publish a major version.

2013-07-09-SharePoint2010HTML5-Part05-02.png

3. Open your custom master page and in the head section, you will need to add a <script> tag to link to the Modernizr library. By default a Modernizr script will include html5shiv/html5shim, so we will need to remove the existing html5hiv/html5shiv reference (if you already included it).

2013-07-09-SharePoint2010HTML5-Part05-03.png

Note: In my screenshot you might also notice that I am using a <script> tag instead of a <SharePoint:ScriptLink> tag. I have found that as soon as you use the <SharePoint:ScriptLink> tag, the very large core.js script is loaded as well, even if it is not used, say for an anonymous publishing site.

Note: There have been issues reported about older versions of Modernizr not working well with SharePoint in IE7 and IE8. The primary reason is because Modernizr extends the Array Prototype. Bryan Gulley wrote a blog post a few month back, “How to make Modernizer and other libraries compatible with SharePoint” I recommend you read his post if you run into problems with Modernizr and SharePoint.

4. Finally, use the Modernizr Library. Just by including the reference to the library, it will be loaded by the client on page load. To use Modernizr functions, as an example, check for audio and if supported play the proper audio file:


if (Modernizr.audio) {
    var audio = new Audio();
    audio.src = Modernizr.audio.ogg ? 'background.ogg' :
        Modernizr.audio.mp3 ? 'background.mp3' :
                                  'background.m4a';
   audio.play();
}

Or how about using Modernizr.Load and a polyfill for the canvas:


Modernizr.load([
  {
    test : Modernizr.canvas,
    nope : ['canvas-polyfill.js', ‘canvas-polyfill.css']
  }
]);

This tag will check to see if the canvas tag is supported, and if it is not, load another js and css file. Possibly your canvas-polyfill.js file will use FlashCanvas (http://flashcanvas.net/) to provide a shim so that your canvas will still work. Cool huh? Please note that I have not included the canvas-polyfill.hs or canvas-polyfill.css at this time, they are being referenced for demo purposes only.

2013-07-09-SharePoint2010HTML5-Part05-04.png

For an exhaustive list of properties available to you, please reference the Modernizr feature set list.

Another neat trick worth knowing

One of the outcomes of loading the Modernizr scripts is what it adds to your <html> tag. This is something that you cannot see using the IE Developer tool bar as it will only show you the html tags and their properties at load time, not what is stored in memory. Nor will you see it in the html source file. Let’s take a quick peek.

The <html> tag before Modernizr is added as viewed in the HTML view in Firebug for Firefox. Notice there is no “class” assigned to the <html> tag.

2013-07-09-SharePoint2010HTML5-Part05-05.png

The <html> tag after Modernizr is added. Wow, that is quite a lot of new classes made available to us.

2013-07-09-SharePoint2010HTML5-Part05-06.png

Nice huh? So we can use those additional classes as well to provide simple to complex styles based on what is available. Want to set all video tags to display: none, if the <video> element is unavailable? Add the following to your stylesheet. It’s that quick.


html.no-video video {
                    display: none;
}

I know that I gave a very quick introduction to Modernizr, but it is a simple yet extremely powerful tool. What you need to remember is that Modernizr provides a quick way to check to see if a client browser supports a particular feature. If it does or does not you can then execute additional code. If you are looking for tutorials run a quick search at Google: modernizr tutorial.

What’s Next?

Now that we have a strong foundation to build HTML5 sites, let’s start digging into some of the cool features of HTML5. Why don’t we check out how to use the audio, video or canvas elements with polyfills? Or how about neat CCS3 tricks? Next time my friends. Until then, happy coding.

HTML5 and SharePoint 2010 – Part 4: Adding the Code (Continued)


You may also be interested in: O’Reilly – SharePoint 2010 at Work


 

Editor’s note: Contributor Eric Overfield, a leading expert in SharePoint Branding and User Interface design, is President and co-founder of PixelMill. Follow him @ericoverfield

Step 5

In Step 5 we link to the powerful HTML5 IE enabling script, html5shim, which adds “some” HTML5 compatibility to older versions of IE, in particular IE8 and older. You can learn more about html5shim from Google at http://code.google.com/p/html5shim/. Normally I prefer to download my own copy of JavaScript files so that I may compress them on my own, combine them with other scripts and other such reasons, but it is quicker to link to the publically available version as well as the addition of caching improvements.

The benefits of html5shim include enabling the rendering of HTML5 elements such as <header>, <footer>, <article>, <section>, <nav> in IE8-. Without html5shim, IE8- will render the content in new HTML5 elements in a similar manner as it would to content in a div, but the unrecognized HTML5 elements cannot contain children, nor will CSS be applied. Big problem! Since this is not good, html5shim automagicially allows older versions of IE to at least render the page and apply the proper styling to the new HTML5 elements. Html5shim will also recognize any custom HTML5 elements you may use such as <customnav>, <myaside>, or most any element name you decide to create. Nifty.

Note: Html5shim does not add new multimedia capabilities such as the <canvas>, <audio> or <video> support to IE8-. Currently there is no simple workaround for this.

Additional Steps (Optional)

Now that we understand the first five steps, let’s move on. There are a few more general updates that could be made to the new HTML5 Master Page including removing the trailing forward slash (/) before closing an element when the element does not need a closing tag. As an example, consider our meta tag:

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>

In XHTML 1.0 Strict the trailing / before the end of the meta element was required, at least to be standards compliant. Sure, almost all browsers did not actually “require” it, but it was supposed to be there. Well in HTML5, that trailing / is not required, thus this element could be modified to:

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

My opinion though, I suggest leaving the trailing forward slashes in but that is because as a coder, one of my passions lies in beautiful code and the trailing forward slash properly closes an otherwise open element.

HTML5 also allows for the shortening of a few additional elements. <script> and <link> elements no longer require a “type” value and the character encoding as specified in a meta tag has been greatly compacted. A resource on these additional modifications can be found at Heather Solomon’s blog post Convert SharePoint 2010 master page to HTML5.

2013-06-22-SharePoint2010HTML5-Part04-01.png

HTML5 templates

As I mentioned in my previous article there are a few HTML5 ready Master Pages for SharePoint 2010 that have already been created that can provide you a boilderplate Master Page to speed your learning curve and deployment. Three that I recommend you consider include:

Kyle Schaeffer’s Responsive HTML5 Master Page
http://kyleschaeffer.com/sharepoint/v5-responsive-html5-master-page/

Dan Kline’s SharePoint 2010 HTML5 Master Page at Codeplex:
http://sharepoint2010html5.codeplex.com/

Heather Solomon recently updated her “Just The Essentials” Master Pages for SharePoint 2010 to include HTML5 ready Master Pages
http://blog.sharepointexperience.com/2011/09/09/just-the-essentials-sharepoint-master-pages/

My suggestion is that you download all three of these and install them on your development environment (Possibly on one of your CloudShare servers? Do you not yet know about CloudShare? It’s one the nicest developments tools I know of for SharePoint. Create a new SharePoint environment, including a SharePoint 2013 Preview environment in minutes. Then if you accidently break it you can start over in a few minutes more with a fresh rebuild. No, I am not a sales rep, I simply think it’s a great tool.) Review each Master Page and the included css and pick and chose from these different implementations. Each Master Page is slightly different and may or may not fit your own style. Using a pre-built Master Page is one of the quickest ways to get started with HTML5 and SharePoint. Leverage the experience of these experts!

What’s Next?

2013-06-22-SharePoint2010HTML5-Part04-02.png

I know that you are anxious to jump even deeper into HTML5 and CSS3 but there is still more foundation we want to build. There are more issues with IE7 and IE8 that we want to discuss as well as another great tool for HTML5, CSS3 and browser feature detection, that being Modernizr. We will touch on this next time before moving onto cool HTML5 feature and tricks. Until then, happy coding.

HTML5 and SharePoint 2010 – Part 3: Adding the Code


You may also be interested in: Mobilize SharePoint Webinar by Sitefinity


 

Editor’s note: Contributor Eric Overfield, a leading expert in SharePoint Branding and User Interface design, is President and co-founder of PixelMill. Follow him @ericoverfield

In my first two articles (one and two) on HTML5 and SharePoint 2010, I provided an overview of HTML5, what it is, and why it is important for us SharePoint Branding folks to start learning it and using it. I’ve already provided a quick introduction on how to add the fundamental HTML5 elements to SharePoint but let us now review this proess in greater detail so that we build a solid foundation of HTML5 and how it will interact with SharePoint.

  1. Open your SharePoint 2010 development site in SharePoint Designer 2010 and create a copy of your v4.master found in the _catalogs/masterpage directory. For this example, I renamed my Master Page copy v4-html5.master.
  2. 2013-06-21-SharePoint2010HTML5-Part03-01.png

  3. Open your custom Master Page in SPD in Advanced Editing Mode, select the code view, and near the top, normally just before your <html> tag, look for <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  4. 2013-06-21-SharePoint2010HTML5-Part03-02.png

  5. Replace the existing DOCTYPE tag with the following HTML5 doctype. Note: make sure you replace the entire tag, often split in two lines in SPD.
    <!DOCTYPE html>
  6. 2013-06-21-SharePoint2010HTML5-Part03-03.png

  7. Now look for the meta tag, X-UA-Compatible, found in the head section. It should look like: <meta http-equiv=”X-UA-Compatible” content=”IE=8” />
  8. 2013-06-21-SharePoint2010HTML5-Part03-04.png

    Update the “content” value to either “IE=9”, “IE=edge” or ever better “IE=edge,chrome=1”.

    2013-06-21-SharePoint2010HTML5-Part03-05.png

  9. Add an additional script tag to link to html5shim somewhere in your head section. <!–[if lte IE 8]> <script type="text/javascript" src=”//html5shim.googlecode.com/svn/trunk/html5.js” /> <![endif]–>
  10. 2013-06-21-SharePoint2010HTML5-Part03-06.png

That is about it. You can now begin to add additional HTML5 elements such as <header>, <footer>, <nav>, etc. to this new HTML5 Master Page that is mostly backwards compatible with IE7 and IE8, as well as use CSS2 and CSS3 to providing styling. You can also begin to use the multimedia elements such as <canvas>, <audio> and <video>. Easy right?

Wait, What? What is Going On? Explain Please!

2013-06-21-SharePoint2010HTML5-Part03-07.png

Before I go on I would like to discuss these first five steps in greater detail to give you an understanding of what each step is doing. Step one is standard procedure, we need to open SPD and create our own copy of a Master Page, in our case a copy of the v4.master, as you never, ever make edits directly to the OOTB v4.master Master Page. In Step two we look for the doctype so that we can modify this in step three. Step three is straight forward enough as well, we are changing the doctype from XHTML 1.0 Strict to HTML5, but what is nice is how lean the doctype is. With html 4.1, XHTML 1, etc we had to have a very long doctype but now it’s just fifteen characters.

Note: When you change the doctype in SPD, SPD will now recognize your Master Page as for IE6 and still with CSS 2.1. I mentioned this in my previous article if you would like to review why and what this means. There is no current work-around and unfortunately this is also the case with SharePoint Designer 2013 Preview at this time. Basically if you are going to use HTML5 in SPD, you will only use the code view, but since that is going away in SPD 2013 you might as well start getting use to it.

Step four

Ah, now it is starting to get interesting. We update the X-UA-Compatible meta element because this tag tells IE9, and soon IE10, to render all pages in your SharePoint site in IE8 mode. Why you might ask? When Microsoft built the web interface to SharePoint they used html and JavaScript code that was only compatible in IE8 so for IE9 to render everything correctly, IE 9 had to be told to revert to IE8 standards. Note: This is only relevant to IE, Firefox, Chrome and Safari will ignore this X-UA-Compatible meta tag for all intensive purposes. If we keep the X-UA-Compatible content value as IE8 then IE9 and IE10 will not be able to use the full power of HTML5 as IE8 cannot properly render HTML5 code. But switching to IE9 compatibility can cause problems as certain aspects of SharePoint will not natively work in IE 9, in fact you might have already noticed that parts of SharePoint will not work in later version of Firefox, Chrome or Safari either. These issues include drag and drop web parts while in Edit mode, the people picker and more. The more is the real gotcha as there is no solid list that I have found of what breaks when changing X-UA-Compatible to IE9 so we cannot know for sure what will break on us.

Now I am recommending IE=edge,chrome=1 as the value for the content tag. The reason why is that IE has been, and supposedly will continue to support the IE=edge value to mean always render the page in the latest mode possible. This means that IE8 will render in IE8 mode, IE9 will render in IE9 mode and when IE 10 is released it should render the page in its latest mode. Adding the chrome=1 value tells the browser to render in Google Chrome Frame if available. You can learn more about GCF from https://developers.google.com/chrome/chrome-frame/ and http://www.chromium.org/developers/how-tos/chrome-frame-getting-started. The value of GCF is beyond the scope of this article so we will come back to this later on. It’s easy to add now, so let’s just do it so.

Why don’t we stop here for now? Next time I will explain step five in greater detail. We will then look at a few optional modifications that you may chose to make as well as review a few pre-build HTML5 Master Pages for SharePoint 2010. Until then,

HTML5 and SharePoint 2010 – Part 2: An Overview (Continued)


You may also be interested in: ViewPoint for SharePoint


 

Editor’s note: Contributor Eric Overfield, a leading expert in SharePoint Branding and User Interface design, is President and co-founder of PixelMill. Follow him @ericoverfield

Get Started Now

So you want to get started and would like to start using HTML5 tags now? What to do? Don’t fret, it’s easy.

  1. Open you custom Master Page in SPD and near the top, normally just before your <html> tag, look for <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. 2013-06-14-SharePoint2010HTML5-Part02-01.png

  3. Replace this with: <!DOCTYPE html>
  4. 2013-06-14-SharePoint2010HTML5-Part02-02.png

This is all you “have” to do, but you should do a little more. This would include modifying the meta X-UA-Compatible tag so that IE 9 can properly render HTML5, but instead of listing these suggestions here I would rather refer you to an excellent, recent blog post by Heather Solomon, Converting SharePoint master page to HTML5 (http://blog.sharepointexperience.com/2012/07/22/convert-sharepoint-2010-master-page-html5/).

If you want to just jump into HTML5 now, besides Heather’s post another great resource is Kyle Schaeffer’s HTML5 Master Page which you can learn about from his blog at http://kyleschaeffer.com/sharepoint/v5-responsive-html5-master-page/ or check out Dan Kline’s SharePoint 2010 HTML5 Master Page at codeplex: http://sharepoint2010html5.codeplex.com/.

Why move to HTML 5

Sure, HTML5 is the future, but it’s just an extension right, and your company is stuck with IE7. Why worry about it? Well first, the average Intranet, Extranet or Internet site seems to last about four to five years in my experience. I can pretty much guarantee that your company will not be using IE7 or IE8 for that long. May not seem like it, but they will have to upgrade. Microsoft will make sure of that. If you have an existing SharePoint site, it likely will not be worth moving to HTML5 just yet, but if you are going to build something new, or are upgrading the branding of your existing SharePoint site, you might as well build towards the future, not the past. HTML5 and CSS3 can provide cross device and browser compatibility that would be difficult to do otherwise. HTML5 allows you to eliminate the need for most if not all plugins including flash. Flash is a whole another issue which I will leave for later. HTML5 can help you target modern devices including mobile devices, tablets, smart phones etc that will likely start accessing your SharePoint implementation.  Also there are some really cool APIs baked into HTML5. For a quick overview of HTML5 API’s, please refer to an excellent .net Magazine article http://www.netmagazine.com/features/developer-s-guide-html5-apis.

Buyer Beware, Reasons not to move HTML5

2013-06-14-SharePoint2010HTML5-Part02-03.png

Any time anyone has told me they want to move their site to HTML5 I first ask them what is the primary browser that will be loading their site. In many corporate Intranets, the answer is more often than not IE7 or IE8. As I have stated this isn’t a deal killer, nor should it stop you, but you must be aware that IE7 and IE8 do not recognize HTML5 or CSS3 so considerations must be made. In general, only modern browsers support HTML5, and then only portions of it. This is because the HTML5 standards have not been fully written, and the running joke is they won’t be until 2022 (although that year has been truly proposed as a reasonable guess). This doesn’t mean that HTML5 is half-baked in modern browsers; there is still a lot that you can use that isn’t going anywhere.

Next, and this can be a huge stumbling block for many, SharePoint Designer cannot yet understand HTML5 or CSS3. In fact SPD thinks that you are coding to IE6 standards when you set the HTML5 doctype.

  1. OOTB v4.master is recognized by SPD as XHTML 1.0 S (S for Strict) using CSS 2.1
  2. 2013-06-14-SharePoint2010HTML5-Part02-04.png

  3. Customized Master Page set to use HTML5 is recognized by SPD as for IE6 using CSS 2.1
  4. 2013-06-14-SharePoint2010HTML5-Part02-05.png

As we all know SPD likes to remove code that it does not understand, so at this point my suggestion is that if you want to work with HTML5 in SharePoint 2010 then you will only want to use the code view in SPD. Many people still use the Design View and that will cause many unexpected problems, but possibly it’s time to stop using Design View anyhow. Why? Well it looks like Design View is not coming back into SPD 2013. There is a thread on this at Technet started by Marc Anderson if you would like to learn more about this and the community’s reaction. http://social.technet.microsoft.com/Forums/en-US/sharepointitpropreview/thread/8f8e2cb3-a90f-4653-9d22-050f9f0d8612

Now if you are building a new Intranet that will likely last for three-plus years, but your current user-base is 100% IE7, I can see why an argument in favor of staying away from HTML5 is prudent, but I would counter-argue that with Windows 8 launching soon, and the fact that IE7 is quite old now, companies will be hard pressed to upgrade to IE9 or IE10. Again, build towards the future, not the past.

Next Steps

2013-06-14-SharePoint2010HTML5-Part02-06.png

Well I hope this has provided you a good overview of HTML5 with flavors of what is to come.  I just glanced over many tantalizing features and promises of HTML5 with almost no how-to’s. The next sieries of articles will contain many more concrete examples of how to use HTML5 and CSS3 within SharePoint, along with fun things to do with HTML5. We will review HTML5 Master Pages for SharePoint, how to deal with IE7/IE8, Media queries in CSS3 to help target mobile devices as well as HTML5 coding theory and tips and tricks. Until then, happy coding.

HTML5 and SharePoint 2010 – Part 1: An Overview


You may also be interested in: O’Reilly – SharePoint 2010 at Work


 

Editor’s note: Contributor Eric Overfield, a leading expert in SharePoint Branding and User Interface design, is President and co-founder of PixelMill. Follow him @ericoverfield

2013-06-10-SharePoint2010HTML5-01.pngHTML5 and CSS3 are gaining ground and acceptance with greater support in the latest browsers from Microsoft, Mozilla, Apple, Google et al. It wasn’t too long ago that I was telling SharePoint developers that it is reasonably safe to ignore HTML5 as at the time browser support was limited, a standard SharePoint site did not need the added functionality provided by HTML5 and most importantly at the time, SharePoint 2010 was, and is, not exactly HTML5 friendly.

Times have changed, quite quickly I might add, and some of the benefits of HTML5 including syntactical features and CSS3’s ability for device targeting have started to cause many SharePoint developers, administrators and IT to rethink their HTML5 avoidance and attempt to integrate this newer technology into an environment that wasn’t designed for it. There are already a growing number of resources available on the web for adding HTML5 and CSS3 to SharePoint 2010, so my intent is to bring as much of this together as possible in an ongoing series on HTML5, CSS3 and SharePoint 2010. My initial foray into SharePoint 2013 tells me that what I will cover is not specific to 2010 either so what we learn now will be of use in the coming days of SharePoint 2013.

First, let’s tackle the history of HTM5 so we have a baseline for subsequent posts of this series. What is HTML5 and what isn’t it and why you should or shouldn’t use it. In later posts we will dive into how to use specific elements and components of HTML5 and CSS3 to accomplish our evolving projects and tasks in SharePoint 2010.

First a History

Since there have been countless number of articles already written on HTML5, I would rather provide you my favorite resources rather than rewrite was has already been so well written.

Wikipedia (The be-all-end-all source of all truth and knowledge? If Wikipedia doesn’t say it, it didn’t happen?)
http://en.wikipedia.org/wiki/HTML5

A thorough and entertaining slidedeck on the history of HTML5 by Mike Wilcox
http://www.slideshare.net/anm8tr/the-history-of-html5

A Brief History of HTML5 by Jeffry Way
http://net.tutsplus.com/articles/general/a-brief-history-of-html5/

What you need to know about HTML5 now

HTML5 not one large, over-encompassing thing, rather for all practical purposes it’s an extension of what most of us have been doing already with site design, branding and site behavior. HTML5 adds a few new features that makes some things easier to do, while makes other things more complex, but less reliant on plugins. HTML5 is also normally said in conjunction with CSS3 which is simply the next version of CSS. Together HTML5 and CSS3 improve upon existing HTML and CSS, providing us new arrows in our quiver when attacking a branding project.

2013-06-10-SharePoint2010HTML5-02.png

So here is some good news, you do not need to throw out anything you have currently been doing with HTML4-ish/XHTML or CSS2. HTML5 uses the same basic syntax as XHTML / older versions of HTML. HTML5 adds a few new elements that attempt to provide context to blocks of code, i.e <header>, <footer>, <nav>, <section> and <article> tags instead of just the <div> tag, as well as other new tags which can replace the need for browser plugins like the flash player using tags such as <video> and <audio>. Furthermore, tags such as <canvas> allow us to provide bitmap image rendering on the browser (really cool and we will get to this).

What this means is that it really isn’t that difficult for your next project to include HTML5 and/or CSS3 elements or enhancements. There are drawbacks, concerns and caveats that you will want to consider but fear not, we will get to this all in due time.

When SharePoint 2010 was released in 2009/2010 HTML5 had not yet hit the radar of most web developers. Although HTML5 was proposed in the 2006 time frame, it was not until Steve Jobs announced that Flash would not be supported on Apple’s mobile devices in 2010 that the mainstream picked up HTML5. Further Internet Explorer 9, the first Microsoft browser that had any HTML5 support wasn’t released until 2011. This is another reason why SharePoint 2010 will only fully work in IE9 when IE9 is set in compatibility mode, but that is an entirely different subject. What this means is that up to just recently if you were working with HTML5 elements, most browsers would have a hard time rendering your page. Additionally there were not yet the developer tools, support or fixes for HTML5, but that is mostly no longer the case. Unfortunately many companies are still stuck with IE7/8, but that is going to change soon. In the mean time tools now exist to allow HTML5 sites to work in legacy browsers. For the rest of us, our browsers can handle HTML5 just fine.

Most importantly HTML5 isn’t going anywhere; in fact it is the future. It is estimated that one billion HTML5 enabled phones will be sold in 2013 and HTML5 provides interesting opportunities to build a site that is mobile device ready. Very soon your boss is going to ask what it will take to get your SharePoint Intranet running in a friendly way on their iPad, Nexus 7, Galaxy S III, etc (or ask you why it isn’t already working well on their shiny new iPad) and you will want to be ready.

What HTML5 and CSS3 provide that we did not have before

As I already mentioned HTML5 and CSS3 are really just extensions of existing HTML and CSS. Among the new features found in HTML5, I find the most interesting to be semantics including the ability to have tags that provide context. As an example, most sites are currently built with many <div> tags that have either id’s or classes, or both, that define how they are styled. HTML5 provides us the ability to have named tags that provide context, i.e. <header>, <nav>, <section>, <article>, and <footer>, in fact you can create your own by simply using them. They work just like div tags so can style these like you would any old-school div.

If you had a block of HTML5 code, say


<nav id=”topnav”>…</nav> 
… 
<nav id=”leftnav>…</nav>

You could style them much like you would if they were divs, such as


nav { /*applies to all nav tags*/ 
    position: relative; 
} 
nav#topnav { /*applies only to top nav*/ 
    width: 95%; 
} 
nav#leftnav { /*applies only to left nav*/ 
    float: left; 
}

The benefit being that the <nav> tag provides semantics where-as if we used a <div> tag it would just be another container to hold something.

HTML5 also has built in controls for media such as video and audio. This is will be addressed later but if you want to learn more now, a good starting place can be found at https://developer.mozilla.org/en-US/docs/Using_HTML5_audio_and_video

CSS3 provides some really interesting enhancements that we can used to have to accomplish using pre-rendered images. These includes rounded corners, text shadowing, 3d effects and more. As with all things HTML5/CSS3 there are pros and cons at the moment and these too will be addressed later. For now, if you want to see some examples, visit http://webdesignerwall.com/trends/css3-examples-and-best-practices, or to learn about specific tags, one of my favorite resources to get started is at http://www.w3schools.com/css3/default.asp.

There is much more you can do with HTML5 and CSS3 and we will get to them.

Themable custom master page in SharePoint 2010


You may also be interested in: Documentation Toolkit for SharePoint


 

Editor’s note: Contributor Corrie Haffly is a Web site designer/developer, working as Lead Designer with Synteractive. Follow her @corriespondent

Once you understand how theme colors work in SharePoint 2010, you’re on your way to creating your own themable (or “themeable”) master pages!

This article is not going to go through the details of making your own master page, as there are plenty of resources on creating custom master pages in SharePoint 2010. Instead, I’ll cover what you need to know to successfully create a themable master page.

I’m going to start with my own custom master page design – here’s what it looks like:

2013-06-03-SharePoint2010Themable-01.png

1. Ensure graphics can be recolored appropriately.

The top header area has a wrapper div with an orange background color (#ffbe18). Inside the wrapper div, my menu div uses a white background color, but I have a transparent background PNG called “navtab.png,” positioned on the right side of the div so that there is a curved tab effect.

2013-06-03-SharePoint2010Themable-02.png

When a new theme is applied, SharePoint’s theming engine can recolor everything. The wrapper div’s background color can change (orange to green), the menu div’s background color can change (white to beige), and the non-transparent pixels in the graphic are recolored from orange to green as well.

2013-06-03-SharePoint2010Themable-03.png

So – for any images that you want to use as part of your theme, you’ll want to make sure that recoloring them will work as you want. For example, you wouldnot want to use an image such as the one shown below, because there are different hues in the same graphic, so recoloring would not produce the desired effect. (Keep reading below about how recoloring images works so that you know exactly what you can do!)

2013-06-03-SharePoint2010Themable-04.png

By the way – any graphics that you want to be recolored must be in PNG format.

2. Set up your CSS without shorthand notations for colors and backgrounds.

Instead of writing your CSS like this:


#cc-topmenu { 
background: #fff url('navtab.png') no-repeat top right; 
margin-right: 250px; 
height: 30px; 
padding-left: 10px; 
}

Write your CSS so that the background properties are separated:


#cc-topmenu { 
background-color: #fff; 
background-image: url('navtab.png'); 
background-repeat: no-repeat; 
background-position: top right; 
margin-right: 250px; 
height: 30px; 
padding-left: 10px; 
}

3. Add in theme tokens

Now, add in theme comments — that is, theme “tokens.” You can replace colors (font colors, background colors, border colors) with the ReplaceColor token


/* [ReplaceColor(themeColor:"COLOR")] */

Color: Dark1, Dark2, Light1, Light2, Accent1, Accent2, Accent3, Accent4, Accent5, Accent6, Hyperlink, FollowedHyperlink. You can also append -Lightest, -Lighter, -Medium, -Darker, -Darkest to get the various shades of each color. (For example — Light1-Medium will give you the “medium” shade of your Light 1 color from your theme.)

You can get even more variations by using the themeShade (darkening) or themeTint (lightening) properties, if one of the previous “Lightest… Darkest” shortcut properties don’t work for you.


/* [ReplaceColor(themeColor:"COLOR", themeShade:"VALUE")] */
/* [ReplaceColor(themeColor:"COLOR", themeTint:"VALUE")] */

Value: Decimal value from 1.0 (no change from the color) to 0.0 (extremely dark or extremely light). See the diagram below for how themeTint and themeShade values affect the accent color, which is orange. (This may require some experimentation on your part to get the desired color!)

2013-06-03-SharePoint2010Themable-05.png

The RecolorImage token uses the same color options, but you can apply the color options in a few different ways:

  • Tinting: Change the hues of the graphic to your color – this is the default

/* [RecolorImage(themeColor:"Accent1")] */

or


/* [RecolorImage(themeColor:"Accent1"),method:"Tinting"] */

  • Blending: Mix your color with the original hues of the graphic

/* [RecolorImage(themeColor:"Accent1",method:"Blending")] */

  • Filling: Completely replace all non-transparent pixels with the color

/* [RecolorImage(themeColor:"Accent1",method:"Filling")] */

2013-06-03-SharePoint2010Themable-06.png

You can also recolor just a portion of an image by specifying a rectangular area with the “includeRectangle” property. The x and y values determine the upper left point of the rectangle, and then you specify the width and height of the rectangle to recolor.


/* [RecolorImage(themeColor:"Accent1-Lighter",method:"Filling",includeRectangle:{x:0,y:0,width:100,height:30})] */

2013-06-03-SharePoint2010Themable-07.png

Note that if you refer to the image multiple times in the CSS, the last referenceto the image is what it will look like. The theming engine only creates one recolored version of the image, so it will choose whichever definition overrides the others.

Here’s what my CSS looks like after adding in the theme tokens (I’ve stripped out my layout code so that you can just see the colors):


body #s4-ribbonrow { /* recoloring the ribbon, originally black */
/* [ReplaceColor(themeColor:"Dark1")] */background-color: #000; 
} 
#s4-workspace { /* recoloring the main background, originally grey */
/* [ReplaceColor(themeColor:"Light1-Lightest")] */background-color: #eeeeee; 
} 
#cc-wrapper { 
margin: 0 20px; /* recoloring the content area, originally white */
/* [ReplaceColor(themeColor:"Light1")] */background-color: #ffffff; 
} 
#cc-header {  /* recoloring the header, originally orange */
/* [ReplaceColor(themeColor:"Accent1")] */background-color: #ffbe18; 
} 
#cc-topmenu { /* recoloring the menu, originally white, and recoloring the right curved tab graphic, originally orange */
/* [ReplaceColor(themeColor:"Light1")] */background-color: #fff; 
/* [RecolorImage(themeColor:"Accent1")] */background-image: url('navtab.png'); 
background-repeat: no-repeat; 
background-position: top right; 
} 
#cc-left { /* recoloring the gradient background image behind the left column, originally green */
/* [RecolorImage(themeColor:"Accent2-Lightest")] */background-image: url('leftbg.png'); 
} 
.s4-ql ul.root > li > .menu-item, .s4-qlheader, .s4-qlheader:visited { /* recoloring the navigation headers */
/* [ReplaceColor(themeColor:"Accent2-Darker")] */color: #3e750e; 
} 
.s4-ql ul.root ul > li > a { /* recoloring the navigation links */
/* [ReplaceColor(themeColor:"Dark1")] */color: #000; 
} 
#cc-breadcrumbs { /* recoloring the breadcrumb navigation */
/* [ReplaceColor(themeColor:"Accent2")] */color: #82c942; 
} 
.ms-rteElement-H1B { /* recoloring the heading font */
/* [ReplaceColor(themeColor:"Accent1")] */color: #ffbe18; 
} 
.ms-rteElement-P { /* recoloring paragraph font */
/* [ReplaceColor(themeColor:"Dark1-Medium")] */color: #666; 
}

Important note: Everything is case-sensitive!! So “Dark1-medium” won’t work. You MUST put “Dark1-Medium.”

4. Put your CSS in a Themable folder

Your CSS (and image) files should go in the top level of your site collection into either /Style Library/Themable or /Style Library/~language-code/Themable (such as /Style Library/en-us/Themable). The Themable folder is created automatically for publishing sites; if you don’t see it in the Style Library folder, you can just create your own folder. Just be sure to spell it properly! You can then drop in your styles and images into those folders, or into a subfolder if, like me, you want things to be somewhat organized.

2013-06-03-SharePoint2010Themable-08.png

5. Use <SharePoint:CssRegistration> to link your stylesheet

In your master page, you’ll have to use <SharePoint:CssRegistration> to link your stylesheet, like this:


<SHAREPOINT:CSSREGISTRATION name="<% $SPUrl:~sitecollection/<em>location-of-stylesheet</em> %>" runat="server" After="corev4.css" />

Here’s the example from my master page


<SHAREPOINT:CSSREGISTRATION name="<% $SPUrl:~sitecollection/Style Library/Themable/corriecustom/styles.css%>" runat="server" After="corev4.css" />

6. Check and publish and change your theme

I tend to refresh often as I’m working on a custom master page design. If you’re trying to see how your themable changes affect your design, be sure to check in and publish your stylesheet and images. You will then need to apply a new theme so that SharePoint regenerates the themed files. Then, you’ll be able to see your changes! Below, you can see my site with my custom master page applied, after switching themes a few times!

Cay theme applied

2013-06-03-SharePoint2010Themable-09.png

Grapello theme applied

2013-06-03-SharePoint2010Themable-10.png

Resources and links