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.