SP2013 Branding Tip: Keeping the Dialogs Neat

In SharePoint 2010 there was that special class for hiding elements from showing up and screwing the layout of dialogs: the .s4-notdlg class. In SharePoint 2013 the equivalent is .ms-dialogHidden. So, simply add this class for whichever elements you don't want popping up in the dialogs.

As important as it is to hide certain elements (such as navigation, searchbox, etc.) from the dialogs, there are elements you should not and cannot hide, but that can cause problems when the web page design (e.g. min/max widths and heights) are suddenly implemented in the dialogs too. For this, SharePoint 2010 didn't have any absolute and really good way of fixing. But SharePoint 2013 does. 

Use the class .ms-dialog as the parent class for any rules you want to use for certain elements when appearing in the dialog. For example:

.ms-dialog #titlerow{

min-width: 0; /*as opposed to e.g. a setting of min-width of 800px*/

} 

It still isn't perfect, but much better than before.

Highlights of the Settings in SharePoint 2013 Preview

Working my way around in SharePoint 2013 Preview bit by bit, I started by scanning through the settings of a site and site collection. There are some quite nice enhancements, here some examples of my favorite ones:

- Change the look (Site Look and Feel)

It's the former themes. I didn't really like the themes before. As for these, I haven't formed an opinion quite yet. At least there are quite many of them available and they seem more useful than before. At least someof them.

Plus the modification of the selected theme is easier and more userfriendly:

- Design Manager (Site Look and feel, Publishing sites only)

This is a topic for a complete blog post in itself, or several. But I wanted to mention it here anyway. The new way of creating and managind branding and UI assets for sites, packaging them and importing them as well.

- Site Collection Navigation (Site Collection Administration, Publishing portal only)

You  can disable navigation, disable the security trimming, disable the audiences:

- Site / Site collection app permissions (Site Permissions / Site Collection Administration)

You can set permissions for App access.

- Popularity and Search Reports (Site Collection Administration)

A much more organized manner of looking at usage and search reports than in 2010.

- HTML Field Security (Site Collection Administration)

You can restrict or allow usage of specific web services and sites in iFrames.

- Site Closure and Deletion (Site Administration)

You can add policies for site deletion, e.g. archiving, that can then be used when a site is deleted. Also, the site is trimmed from aggregated places.

- A whole lot of new search-related settings

Creating a Metro Tile Web Part

Metro style is the hot topic right now, so it is only right to take a look at how to make your SharePoint site more Metro too. You can build Metro blocks in the Content Editor Web Part, of course, but wouldn't it be so much easier to manage the tile content if the data was in a SharePoint list instead of being static content in a CEWP?

What you need in your (Empty SharePoint project) is

• a List Definition and a List Instance for your source list - and I took it one step further by creating the Content Type for the list as well
• the WebPart
• your own CSS stylesheet in the mapped _Layouts folder

I am not going to go step by step through the process of creating these elements. For more info on creating SharePoint projects, webparts, content types, stylesheets etc. please check out some of my previous posts, e.g. in categories WebParts, Branding and Customization.

There's a whole lot of little things to do to put the thing together, and I will walk through the main points here.

For the Content Type (or the List Definition, if you are not creating a Content Type), you need to add the list fields and field references in its Elements.xml file. I used four fields in addtion to the Title field:

• tile icon url field
• tile content note field, setting the parameter HTMLEncode="true" to enable HTML tags in the content
• tile background color (text) field for the background color as HEX code
• tile url field (used to create a link wrapper around the icon and title)

In the ListDefinition Schema file you need to add the field references to the default view (BaseViewID 1) to show them in the AllItems view of the list. With the Fields and FieldRefs, remember that whether the tag has an endind tag or not really is of essence:

• in Content Type Elements.xml both the Field and FieldRef tags are one-piece, eg:
  <Field Name="TileLink" DisplayName="Tile Hyperlink" ID="{GUID here}" Type="URL" Required="true"/>
  and
  <FieldRef Name="TileLink"/>
• in List Definition Schema.xml the FieldRef inside the Content Type element is as above, but the FieldRefs in the View elements are two-piece:
  <FieldRef Name="TileLink">
  </FieldRef>

Also, remember to check the titles, descriptions and urls for the ContentType, ListDefinition and ListInstance, as well as the Web Part too, of course.

Once the list is done (and tested), add the Layout folder mapping to your project, and an empty CSS stylesheet in the project folder inside Layouts.

Then, add the WebPart to your project. In the WebPart .cs file, inside the CreateChildControls method, you need to

• add the CSS reference
  If you are not trying to override corev4.css, this simple line is fine:
  CssRegistration.Register("/_layouts/MetroTileWebPart/TileStyles.css");
  and as for this project, this goes fine, since only our own classes need to be used. But if you need to make sure that the CSS is read after the corev4.css, see this blog post for the instructions.
• retrieve the list items
  SPSite thisSite = SPContext.Current.Site;
  SPWeb rootsite = thisSite.RootWeb;
  SPList tilelist = rootsite.Lists["MetroTilesList"];
  SPListItemCollection items = tilelist.GetItems();
• loop through the items 
  A foreach loop is fine. 
• get field values for each item
  For any e.g. string type data (here the color and the content) you can use:
  string tilecontent = item["TileContent"].ToString();
  But if you try this with the hyperlink fields, due to the Description field embedded in it, you will get a double hyperlink value, separated by a comma, and that won't work. So you need to use the SPFieldUrlValue to get only the url value:
  SPFieldUrlValue TileUrlvalue = new SPFieldUrlValue(item["TileLink"].ToString());
  string tileurl = TileUrlvalue.Url;As for the title, you can simply refer to it with item.Title.
• and create the html for the webpart
  Using LiteralControls you can quite easily create the HTML for each tile, using the field values in the places needed:

And then you need to create the CSS for the classes. The key points in the CSS here being:

• the main element here is the tilecontainer, and for this 3 in a row, my CSS rules for it are:
  width:30%;
  padding: 10px;
  float:left;
  margin: 5px; /* to create a consistent 10px space between tiles */ 
• using the pseudo-element :nth-type-of(N), you can make the n:th (in this case the fourth) tile position itself neatly below the first tile instead of e.g. below the last tile of the row, if the tiles differ in height:
  div.tilecontainer:nth-of-type(3n+1) {clear: left;}
• the background of the content span is white opaque so that it sits nicely with which ever color tile, but the IE7 and IE8 don't understand the rgba-rule, so I set the background as #dedede for them:
  background: rgba(255, 255, 255, 0.4);
  *background: #dedede;

Otherwise, the CSS is all about the positionings and colors and margins etc. of the contents of the tiles.

For more info on Metro style UX desing, see: http://msdn.microsoft.com/en-us/windows/apps/.

[See also: Add Properties to Your Web Part]