This blog entry is a post session review of resources mentioned and code used in our Bring (Event More) Sexy Back to SharePoint 2013 session from September 2014 SPTechCon in Boston.
“Go ahead, be gone with it. And get your sexy on.”
Welcome session attendees and anyone else who happens to wander on this page. This blog entry is a post session review of resources mentioned and code used in our Bring Sexy Back to SharePoint and Gaining Total Control of Your Sites with Data View Web Parts sessions from April 2014 SPTechCon in San Francisco. Continue reading
It is easy to say something is unique and it is quite another to actually explain why. Since its inception two years ago we have always said the SharePoint UI UX Experience class is unique. Here in the course’s birthday month, I figured we got some ‘splainin’ to do! (And kudos to you if Desi Arnaz just rang out in your head*.)
Thanks for attending our sessions!
SPTechCon is winding down now in Boston, and we had an awesome experience sharing our knowledge with attendees. Heather and I have created this post with resources for attendees of our sessions (and other curious lurkers). Continue reading
If you are headed to SPTechCon in Boston this July, please stop by one of our sessions and say hello! The conference is running a registration special through June 15th. Save $400 bucks.
Tuesday, July 24, 11:30 AM – 12:45 PM
Wednesday, July 25, 11:30 AM – 12:45 PM
Learn How to Put HTML5 in Your SharePoint Master Page
DUSTIN MILLER and HEATHER SOLOMON
HTML5 is the new Web hotness. If it seems daunting, or you think you have to scrap what you have now and start over, then check out this class. Learn how to easily convert your existing SharePoint master page to HTML5 while creating better structure for your content. And yes, everyone will still be able to access your site!
Wednesday, July 25, 3:30 PM – 4:45 PM
Make SharePoint Look Good!
Master pages are so yesterday. The real key to branding SharePoint is CSS. Update SharePoint controls, create different branded versions of your Web site, and write crafty CSS statements that override inline SharePoint styles. Become best friends with descendent selectors, pseudo selectors and attribute selectors. We will round out the class with taking a look at the many things CSS3 has to offer.
Heather and I have been having a blast at SPTechCon in San Francisco, and we will be updating this post with resources to share with attendees to our sessions.
Get Ready for HTML5 and SharePoint (Tuesday, 11:30 AM)
Heather and I demonstrated that HTML5 can be used in your SharePoint sites today, and it isn’t rocket science! After a lively discussion with the audience, we started the demos!
First, Heather demonstrated a sample HTML5 page with simple, semantic markup. Then, using the a copy of her “Just the Essentials” Master Page, she added some of the new HTML5 elements like <header>, <nav> and <footer>.
Then, I took the wheel to show how you can get any kind of markup you want from any SharePoint list. Creating a new view of the announcements list (Insert → Data View → Empty Data View), I wiped out the data view and replaced it with my own custom “Baseline DVWP.xsl” file to render the Announcements list with HTML5 markup.
Back At It Again … More CSS Goodness (Tuesday, 4:00 PM)
Here we go again – More CSS goodness for your SharePoint sites! First, Heather brings up this awesome CSS Specificity chart called “CSS Specifishity“.
Based on Heather’s new approach to writing CSS for SharePoint, she showed several samples of writing style statements that simply have a stronger specificity score/weight than what is being applied to a SharePoint component. For example:
The above style statement targets the “Edit this Page” link in a SharePoint wiki page by looking for specific text at the end of the anchor’s ID value. There is no need to track down the style statements used by SharePoint and make copies of these long style selectors; that just adds more baggage to your CSS file. Instead use a tool like Firebug in Firefox to identify and build your own selector. Heather showed style statement samples for editing table views, controlling a web part based on location and a quick trick for controlling form inputs based on type.
Gaining Total Control of your Sites with Data View Web Parts (Wednesday, 3:30 PM)
I was super pumped to do this session. I will blog more about it real soon, but I have come up with a new, and in my view, wildly efficient way to create custom views of your SharePoint data with XSL. While I work feverishly on a detailed post discussing my new “Magic Data View Builder” template, here’s a quick recap:
First, I demonstrated replacing a List View Web Part’s “XSL Link” property with the URL to a copy of the Magic Data View Builder template, which I uploaded to a document library. On refresh, you’re given a starter template for your own custom list view.
Using that starter template, I created an HTML5 version of the announcements list, marked up as a series of articles. Then, I showed how to create a bar chart using the HTML5 Canvas and a tasks list. Finally, a custom view of a Contacts list including embedded HTML5 Microdata in the hCard format. I had a blast, and I will be writing a super-deep dive article soon outlining my new method of creating custom Data View Web Parts – without SharePoint Designer.
Thanks for coming to our sessions!
Heather and Dustin are headed to the city by the bay to share their latest SharePoint know-how. Stop by the Branding Ask the Experts table on Tuesday to say hello and check out these sessions: Continue reading
SharePoint Experience has knowledge and will travel. How about you?
Vote now and let us know what destination city you want to attend training and when is the best time to travel. And yes, a SharePoint cruise made the short list.
In addition to the stripped, cleaned and commented SharePoint 2010 master pages that we provide, we also have posted a copy of v4.master (default SharePoint master page – simple layout with top navy bar) that still has all original HTML layout code in place but has the same cleaning and comments added that our Just the Essentials master pages receive. Now another version of this file has been added that is a copy of v4.master with all of the UI3 code removed. If you are not supporting UI3 sites (2010 sites that look like 2007) then you can use the UI4 Only version.