Randy Drisgill - SharePoint Branding and Design

SharePoint 2013 Basic Search Center Branding Problem

Randy Drisgill — Mon, 29 Apr 2013 16:00:05 +0000

So, I had thought we were in the clear from the old 2010 Search Center branding disaster. For the most part custom branding applies pretty easily to search sites in SharePoint 2013 thanks to the fact that it just uses the default Seattle.master for search branding. However there is a gotcha, specifically related to the Basic Search Center template. I think the problem is only this one template, but maybe there are other areas affected. I tested the Enterprise Search Center and the default search and neither had issues.

Basically what happens is when you are creating your custom branding, chances are you will be applying a customized master page (one that is edited with a mapped drive or SharePoint Designer), and the Basic Search Center uses a snippet of code block to try to hide the ribbon when the Web Part management panel is up (I have no idea why this was so important but I digress). Okay, “so what” you might think… well code blocks are not permitted to run by default in customized master pages. They will work just fine in a custom master page deployed with a solution (WSP or the Design Manager export / import process) but they will fail miserably in a customized master page like this:

So, how do you fix this problem. Well, easiest solution is to package your custom master page into a solution and apply it to the site. The error should go away immediately. That doesn’t really help if you are still iterating in development. Another option is to edit the aspx files on the Basic Search Site. From a mapped drive or from SPD you can edit default.aspx and results.aspx removing this blue section:

&lt;asp:Content ContentPlaceHolderId="PlaceHolderAdditionalPageHead" runat="server"&gt;
<span style="color: #3366ff;"> &lt;SharePoint:StyleBlock runat="server"&gt;</span>
<span style="color: #3366ff;"> &lt;% </span>
<span style="color: #3366ff;"> WebPartManager webPartManager = SPWebPartManager.GetCurrentWebPartManager(this.Page);</span>
<span style="color: #3366ff;"> if (webPartManager != null &amp;&amp; webPartManager.DisplayMode == SPWebPartManager.BrowseDisplayMode)</span>
<span style="color: #3366ff;"> {</span>
<span style="color: #3366ff;"> %&gt;#s4-ribbonrow</span>
<span style="color: #3366ff;"> {</span>
<span style="color: #3366ff;"> display: none;</span>
<span style="color: #3366ff;"> }</span>
<span style="color: #3366ff;"> &lt;% </span>
<span style="color: #3366ff;"> }</span>
<span style="color: #3366ff;"> %&gt;</span>
<span style="color: #3366ff;"> &lt;/SharePoint:StyleBlock&gt;</span>
&lt;/asp:Content&gt;

For some of you, editing these search files won’t be an acceptable solution. I’m hopeful someone will create a nice sandbox solution to fix the problem like we had in 2010… Nik Hadlee I’m looking at you

The post SharePoint 2013 Basic Search Center Branding Problem appeared first on Randy Drisgill.

Starter Master Pages Update v1.3

Randy Drisgill — Mon, 22 Apr 2013 16:00:48 +0000

Over the weekend I pushed out a small but important update to my starter master pages. When I originally created the starter master pages I used both the Design Manager feature as well as Seattle and Oslo to decide the best place to put things in the master page. There was a discrepancy between where the Design Manager and the default master pages placed the SPWebPartManager control. Turns out the Design Manager puts this control in the section which is incorrect, it should be in the . Having the control load before the caused a host of mysterious problems so I have moved it to the body and I urge everyone to follow suit.

Starter Master Pages for SharePoint 2013 v1.3

The post Starter Master Pages Update v1.3 appeared first on Randy Drisgill.

Moved from Blogger to WordPress

Randy Drisgill — Sun, 14 Apr 2013 19:07:12 +0000

After trying WordPress for our user group website I decided that it is a far superior blogging platform than Google’s Blogger. I’ve been meaning to move off of Blogger for a while now but was afraid of the potential hit to my Google results due to a change in URL formatting. Since coming over to Rackspace, I realized that I have access to create WordPress sites with through our cloud hosting so I decided to give it a try.

I was pleased to find that there are tools for importing all my old posts and comments from Blogger to WordPress as well as settings to reformat the WordPress URL’s to match Bloggers URL format. I was then hopeful that I could make the move fairly seamlessly so I flipped the lever on Saturday evening (weekends are pretty slow for SharePoint web traffic). The first thing I noticed was that clicking on my Google results from my phone was taking me to the correct URL but with ?m=1 appended to the end. This was making the results fail on mobile devices so I had to make some changes to the .htaccess file. Luckily it wasn’t too difficult to find a rewriting scheme to remove the m variables.

So long story short, I’m hoping the move is seamless for my web traffic. If you see any problems please use my new contact form to let me know!

The post Moved from Blogger to WordPress appeared first on Randy Drisgill.

Sticky Footers in SharePoint

Randy Drisgill — Tue, 22 Jan 2013 16:00:00 +0000

I get this question a lot these days: “How can I add a sticky footer to the bottom of SharePoint”. So much so that I decided I need to have a blog post that points to my solution to the problem.

First, what it a sticky footer? I consider this to be a footer at the bottom of a page that stays “stuck” to the bottom of the browser window ONLY if the page content does not fill up the full page. If you want a footer that sticks to the bottom without considering the page content, you can easily float one above the content always stuck to the bottom with just absolute CSS positioning.

How do I solve it. There are many ways this problem could be solved ranging from intelligent HTML and CSS creation to jQuery based solutions. I am leaning towards a jQuery based solution because often with SharePoint you don’t have a ton of control over most of the HTML markup. In my solution, all you need is a

with an id of customFooter, like this:

at the bottom of your master page (you probably want to add some height and some other styling to this div as well). Then you need a reference to jQuery and then the JavaScript that I include below that will measure the page content height and add it to the ribbon height and determine if those two together are smaller than the browser window. If they are smaller, the jQuery will add some top-margin to the footer, just enough to push it to the bottom of the window. I won’t go into how you should add jQuery to SharePoint but here is a link that can help you determine the best method: http://drisgill.com/go/jquery-sharepoint.

I have two scripts, one for SharePoint 2010 and one for SharePoint 2013. The differences are:

SP2010 – I use jQuery.noConflict(); and jQuery instead of $ throughout because some things in SP2010 conflict with the use of the dollar sign.
SP2013 – I use the typical jQuery $ reference and the way the ribbon height is measured is a bit more complicated since there are a couple different ways you can load the ribbon depending on if you use Seattle.master or the Design Manager

Download the jQuery code from here: http://drisgill.com/go/sp-sticky-footer. Please consider this code to by experimental, I haven’t thoroughly tested it at this point. Use my contact link at the top or hit me up on Twitter if you run into issues with it.

Here is a screenshot of how I pull in the stickyfooter scripts. I place it at the bottom of my page under the customFooter.

And here is a screenshot of my (rather boring) footer sticking to the bottom of the browser:

The post Sticky Footers in SharePoint appeared first on Randy Drisgill.

Design Manager Bug – SharePoint 2013 RTM

Randy Drisgill — Mon, 17 Dec 2012 15:30:00 +0000

Ran into an interesting little bug this past week with SharePoint 2013 Design Manager master pages. After having a friend recreate the issue on her VM, I contacted the Microsoft product team and confirmed this is an issue they hope to solve with a future update. Essentially, if you create a master page with the Design Manager, whether a minimal master or one that has been converted from HTML and CSS, the Site Contents > Add an app page will not allow you to add apps or lists to your site. This issue also impact the out of the box Oslo master page. Here is what you should see when you go to the Add an App page:

With this bug you end up never seeing the Apps you can add section. Sometimes you will see the “Working on it…” message and other times you will just see the Noteworthy apps.

The key to fixing this problem is to make sure your master page includes: DeltaPlaceHolderLeftNavBar, PlaceHolderLeftNavBar, DeltaPlaceHolderPageTitleInTitleArea, and PlaceHolderPageTitleInTitleArea and that each of them is not set to Visible=False. To do this in an HTML master page with Design Manager you would add the following snippets:

With these lines in place, the Apps you can add should show up again. Note, if you aren’t making a Design Manager HTML master page you will still want to ensure these controls (without the DM comments) are included somewhere in your master page and not marked as Visible=False.

The post Design Manager Bug – SharePoint 2013 RTM appeared first on Randy Drisgill.

SharePoint 2013 Starter Master Pages – Beta Release

Randy Drisgill — Wed, 31 Oct 2012 21:19:00 +0000

So, I’ve been quiet lately, but it hasn’t been for lack of work on SharePoint 2013… I have a Halloween treat for everyone! A new release of my Starter Master Pages for SharePoint 2013. These will work with the RTM release of SharePoint Foundation and Server 2013, but please consider them beta at this point at least until I get some initial feedback from the community.

http://startermasterpages.codeplex.com/

Here is a quick FAQ about this release:

Why do we need starter master pages now that SharePoint Server 2013 includes the design manager with the ability to create minimal master pages and convert HTML designs into functioning master pages?

Great question, here are a few things that come to mind:

The Design Manager is a feature that is only available with the for pay SharePoint Server license through the publishing feature (also available in SharePoint Online in various capacities). If you have a Foundation server or do not have access to the Publishing feature, you will not have access to the Design Manager

The Design Manager master pages do not include any commenting and are not spaced for readability. In some cases the markup is overly complicated for what it does. I have attempted to address all of these concerns with the Starter Master Pages

Master pages created with the Design Manager (via new minimal master page or a converted HTML file) are not 100% compatible with collaborative Team sites. This is because of something called the Minimal Download Strategy or MDS which is turned on by default in any team site. This feature speeds up loading of pages by passing page requests through start.aspx and only loading the visual differences between pages. If you apply a Design Manager master page to a Team site with this feature turned on you will see what I call a double page load for each page you visit.

If you have an existing branded SharePoint 2010 site and would like to migrate your branding to 2013 you will most likely want to just make the bare minimum of changes. These Starter Master Pages would be good for that scenario

If you are skilled with SharePoint branding already from previous versions you may find using a Starter Master Page more familiar than using the Design Manager.

What sort of scenarios are supported with these Starter Master Pages?

I have tried to include a Starter Master page for most scenarios. Here are the master pages that are included and their intended usage:

Starter PubCollab – A good starting place for SharePoint Server intranet portal or team sites that may or may not have publishing. Publishing sites and Team sites with MDS both work with this master page.

Starter Publishing – An example publishing portal. Not intended for use with MDS / team sites. Simplified markup by removing anything that needs MDS and using a smaller ribbon control.

Starter MySiteHost – Starter Master Page for the My Sites host (you will obviously need to work with the MySite host site collection to use this).

Starter Foundation – Starter Master Page for Foundation sites or standard team sites. Does not include any SharePoint Server specific code.

Starter DesignManager.html – HTML based starter master page for use with the Design Manager in SharePoint Server 2013 (not compatible with MDS / Team sites). I have tried to improve readability and spacing for this HTML based master page. I want to point out one gotcha with this. When you publish this HTML file, SharePoint will reformat and re-tab the source of the HTML file in the process of updating the associated master page. If you want to ensure the nice formatting stays always resave the HTML file after publishing it (be careful because your editor will likely pickup the changes and ask you if you want to keep them).

How do I use these Starter Master Pages?

In SharePoint 2013 you can map a network drive to your Master Page Gallery and from here you can add the whole StarterBranding folder that is included with the zip file. This includes a couple place holder images and the beginnings of a stylesheet… which can all live in the Master Page Gallery just fine in 2013.

Once you add them, if you have SharePoint Server it should convert the Starter DesignManager.html to Starter DesignManager.master and relate the two together automatically. For that one you would edit the HTML file and then publish it before applying to your site. For the other .master files, you can edit them directly and then publish the master page and apply it to your site using the typical methods.

Well that’s about it. Please give them a try and let me know any comments or questions you may have. I’m quite certain they will need to updated in the near future once the community tries them out and sends notes.

The post SharePoint 2013 Starter Master Pages – Beta Release appeared first on Randy Drisgill.

Top 6 New Features for Designers in SharePoint 2013

Randy Drisgill — Tue, 17 Jul 2012 19:44:00 +0000

As you probably know the SharePoint 2013 Public Preview was released this week and I’m sure all the designers out there want to know what’s new for branding? Well, you will be interested to know that making SharePoint design easier was a key goal for this version of SharePoint. Does that mean that all my professional branding peers are out of work now? Let’s check out what’s new and then revisit that question. Be sure to scan down the page, I save the most interesting for last (sort of like a David Letterman Top 10 list!).

6 – Managed Navigation – SharePoint navigation now has two different options: the old way, now known as Structured Navigation and the new way which is known as Managed Navigation.

This new method of navigation uses a Managed Metadata term set to populate the navigation control with items. The new method is more flexible and allows for some interesting new uses as you will see including allowing you to make friendly URL’s. Another interesting side benefit of Managed Navigation is you get a nifty Edit button next to the both the Global and Current navigation that lets you add, remove, and edit navigation from anywhere without visiting the Navigation option in the Site Settings.

Side Note: Styling this edit mode is going to be a bit of a pain on sites with highly stylized navigation… but that’s a good topic for a future post!

5 – Composed Looks – I’m thinking of Composed Looks as evolution of SharePoint 2010 themes… I imagine the product team was trying to make something a little closer to how Word Press themes work(though without changing the underlying SharePoint technologies that make up the look and feel).

The first big difference is you don’t make the themes with the Office client anymore. Instead you configure elements and add them to a Composed Looks Gallery (Site Settings > Composed looks). The composed look consists of several things:

Name – Fairly obviously the name of the Composed Look
Master Page – To arrange the elements of the page and do other master page-y stuff
Theme URL – Points to an XML file that defines all of the colors you want to apply to different CSS. This works similarly to 2010 except you make your own theme id’s instead of using Accent1, Accent2, etc.
Image URL – Points to an image that can be used to replace a background image in the CSS (I know… sweet… a background image!)
Font Scheme URL – Points to an XML file which defines the fonts that can be applied to CSS
Display Order – Helps you arrange the available composed looks

The idea here is that you put all this together with a preview file and you can provide configurable “composed looks” for your clients and users to select from and configure to their liking. You can apply Composed looks from Site Settings > Change the look.

4 – Device Channels – Don’t be fooled by the name, this has nothing to do with channels as you may know them… we are talking mobile / device specific page rendering here!

You setup Device Channels from Site Settings > Device channels, which allows you to give the channel an Alias (for referencing in the UI and in code) and then “Device Inclusion Rules”. These rules are substrings that SharePoint will look for in the browser’s User Agent. You can have certain master pages apply to certain device channels (for example: have a specific master page just for iPhones or Surface Tablets). This is a pretty cool feature, you can even use the Alias in your master page and page layouts to have different individual pieces of the page render differently based on the channel. It’s kind of like Media Queries in CSS3 only Device Channels don’t look at device capabilities (like width and height) they look for keywords in the browser’s User Agent.

3 – Web Content Management enhancements – There are probably several enhancements that are new to SharePoint 2013 WCM but the two that stand out to me are: Content Search Web Part and Catalogs.

Content Search Web Part – A new Web Part that supersedes the old Content Query Web Part. As the name implies the new Web Part uses the search functionality in 2013 to query and filter information from around SharePoint. Unlike the CQWP, the Content Search Web Part is styled with HTML and JavaScript instead of XSLT.
Catalogs – In SharePoint 2013 WCM you can create a catalog of products and use this catalog to create a robust product web site without creating pages for every item. Imagine having product categories, sub categories, and product detail pages all centrally managed!

I could probably fill an entire blog post on the new WCM features, but I’ll let someone else take that charge

2 – No more SharePoint Designer for creating SharePoint branding! – Sure SharePoint Designer was updated for 2013 but you don’t have to use it to edit your branding anymore (I’m thinking the name SharePoint “Designer” is no longer appropriate!). In fact you can use any tool you want, including Visual Studio, Notepad++, Dreamweaver… ANYTHING. This feature works because the Master Page Gallery was updated to work seamlessly over a WebDAV mapping. So now, in Windows you can map a network drive directly to your Master Page Gallery and then edit away. Truth be told you could do this to some degree in previous versions of SharePoint, but back then Microsoft locked SharePoint from allowing you to work with master pages and page layouts.

In 2013 the Master Page Gallery is the place where you can put ALL your branding assets including CSS and images. This is a pretty interesting change that takes a little getting used to… but it really is a lot nicer than being forced to use SharePoint Designer or a plugin to Visual Studio to work with your branding files directly on the Site Collection.

Note: I’ve noticed that sometimes WebDAV can be slow. There is a strange but easy fix to this, see the following post: http://oddballupdate.com/2009/12/18/fix-slow-webdav-performance-in-windows-7/ After making this change my mapped drive to SharePoint is super-fast!

1 – Design Manager – I saved the most interesting for last! This new feature is so important that Microsoft even added it as a top level selection under Site Actions in Publishing sites! It includes links to a lot of common design tasks including some of the previous topics I’ve discussed but it also includes the following new features:

Create and Edit Master Pages – This is probably the biggest change for SharePoint branding folks. From here you can create a minimal master page or convert an existing HTML design. Did that get your attention? Yes, you can actually add an HTML design with CSS and images to the Master Page Gallery and then use this feature to convert it to a functioning master page. You also get a preview of the new master page and a snippet gallery that allows you to copy and paste SharePoint functionality (like navigation, search, web parts, etc.) right into your HTML based design.

You no longer have to edit .master files; you can continue editing your HTML file in whatever editor you like and every time you hit save SharePoint will notice the changes and update the corresponding .master file.

Does this mean that SharePoint branding is so easy now that anyone can do it? Yes and no, if you need to make a branded SharePoint site you probably can do it all from the Design Manager with converting an HTML design and using snippets. However to make a fully branded portal or web site you will still need to understand a lot of SharePoint CSS and you still need to understand how Content Placeholders and a variety of other SharePoint specific technology works.

I’ll be very curious to see how the SharePoint branding community reacts to this feature and see where we land with what newcomers can do with SharePoint branding on their own. I tend to think the Design Manager is a great starting point that changes things so that there is no middle level effort branding… either there is branding that anyone can do with the Design Manager or there is advanced branding that you need to understand the underpinnings in order to make things work the way you want.

Create and Edit Page Layouts – When you create a page layout from the Design Manager you get an HTML file that contains a minimal page layout and all the fields that come from the content type that you base the page layout on. When you make changes to this HTML file the corresponding .ASPX page layout is updated behind the scenes
Create a Design Package – Export your entire design from one place to another (even a completely different server). You can then import the design package to another site collection or server from Site Actions > Import Design Package.

Well, that’s the end of the Top 6 list. I invite you to discuss these features as you start to play with them. Do you think the Design Manager is an end-to-end branding solution or are is it more like a really great kick start to the SharePoint branding process? Let me know in the comments!

You can bet I’ll be back with more SharePoint 2013 content in the near future but I wanted to get this list up now that the public beta was released.

For more information about some of these features, check out Microsoft’s article:
What’s new in web content management for SharePoint 2013 Preview publishing sites http://technet.microsoft.com/en-us/library/jj219688(v=office.15)#BKMK_contentsearch

The post Top 6 New Features for Designers in SharePoint 2013 appeared first on Randy Drisgill.

SharePoint Saturday Orlando Registrations are Open

Randy Drisgill — Mon, 07 May 2012 19:00:00 +0000

We have opened up registration for the first ever SharePoint Saturday in Orlando, Saturday, June 9th, 2012. The event is free but seats are going quickly… we have given out about half of them already! If you are interested in attending please fill out our Eventbrite form so that we can make sure there is a spot for you!

Here is the registration link:

And here is the event website:

http://www.sharepointsaturday.org/orlando/default.aspx

Location:

ITT Technical Institute

Suite 100

8301 Southpark Cir

Orlando, FL 32819

Google Map

The post SharePoint Saturday Orlando Registrations are Open appeared first on Randy Drisgill.

SPTechWeb Article: Customizing SharePoint 2010 My Sites Navigation

Randy Drisgill — Mon, 30 Apr 2012 21:49:00 +0000

Just wanted to put up a quick post pointing folks to my latest article about My Sites Navigation that is up at SPTechWeb. I cover the basics of changing the navigation as well as how you can manipulate the HTML and controls that live in the My Sites top bar. Customizing SharePoint 2010 My Sites ...read more

The post SPTechWeb Article: Customizing SharePoint 2010 My Sites Navigation appeared first on Randy Drisgill.

SharePoint Saturday Orlando 2012 – June 9th

Randy Drisgill — Wed, 28 Mar 2012 19:09:00 +0000

I am proud to announce that Michael Hinckley, David Griffiths, John Ross, Dave McNamee and myself will be hosting the first ever Orlando Florida edition of the world famous SPSaturday event on Saturday, June 9th, 2012. If you live near the Central Florida area or are in town early for the big Microsoft TechEd Conference (June 11th to the 14th) come on by and check it out. We are hoping to provide a lot of valuable FREE SharePoint content to compliment the SharePoint sessions that Microsoft will be providing at TechEd.

Here is some info from our website to describe the event:

Join SharePoint architects, developers, and other professionals that work with Microsoft SharePoint Server 2010 for ‘SharePoint Saturday’ event. SharePoint Saturday is an educational, informative & lively day filled with sessions from respected SharePoint professionals & MVPs, covering a wide variety of SharePoint-orientated topics. SharePoint Saturday is FREE, open to the public and is your local chance to immerse yourself in SharePoint!

Location:

ITT Technical Institute

Suite 100

8301 Southpark Cir

Orlando, FL 32819

Google Map

If you are interested in sponsoring or speaking at the event please don’t hesitate to sign up at the Saturday Orlando website. Slots are filling up fast!

Find out more info on the event at http://www.sharepointsaturday.org/orlando

The post SharePoint Saturday Orlando 2012 – June 9th appeared first on Randy Drisgill.