SharePoint 2010 Branding: what’s publishing masterpage all about

It’s a real disaster to start branding with the default v4.master. It’s much easier when everything is commented and outlined like it should be. That’s what I did today.

v4.master

Enjoy it!

Transparency settings for all browsers

Transparency css that covers all browsers.

Very handy css class

.transparent
{

/* Required for IE 5, 6, 7 */ /* ...or something to trigger hasLayout, like zoom: 1; */
width: 100%;

/* Theoretically for IE 8 & 9 (more valid) */ /* ...but not required as filter works too */ /* should come BEFORE filter */
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";

/* This works in IE 8 & 9 too */ /* ... but also 5, 6, 7 */
filter: alpha(opacity=50);

/* Older than Firefox 0.9 */
-moz-opacity:0.5; /* Safari 1.x (pre WebKit!) */
-khtml-opacity: 0.5;

/* Modern! /* Firefox 0.9+, Safari 2, Chrome any? /* Opera 9+, IE 9+ */
opacity: 0.5;

}

Set ribbon smaller via CSS

Thanks to my colleague (Laurent Schoenaers) for following css:

body #s4-ribbonrow {background-color: #FFA113; margin-top: -20px;}
.ms-siteactionsmenuinner {background:transparent;background-color:#FFA113;border-color:#FFA113;}
.ms-cui-topBar2 {border-bottom:0px;}
.ms-cui-TabRowRight {margin-top: -12px !important; padding-top: 36px !important;}
.ms-cui-ribbonTopBars div {border-bottom:1px solid transparent;}
.s4-trc-container-menu {margin:0;} 

before:

after:

SharePoint 2010 template for Photoshop

Did they ever asked you to create a SharePoint design? A design in the sense of a webdesign. Then I have a nice solution!
You can download below the default SharePoint 2010 team site design in photoshop format. Every part is created in a layer.
SharePoint 2010 design assets

RichHtmlField for custom field not rendering HTML

I had multiple RichHtmlFields on my page, and one was displaying correctly while another was not.  When I viewed the fields via the powershell, I noticed a difference in the SchemaXML, the WORKING field had the following additional properties:

     RichText="True"
     RichTextMode="FullHtml"

I found a script to update the problem field, and the problem went away for me (look below for script). The change has to be made at the list level for it to take affect on existing pages/lists, but I believe making the modification to the column at the root web (or correct subweb) would work as well.     

     $web = $site.OpenWeb($site.RootWeb.ID)
     $list = $web.Lists["Pages"]
     [Microsoft.SharePoint.Publishing.Fields.HtmlField]$field =   [Microsoft.SharePoint.Publishing.Fields.HtmlField]$list.Fields.GetFieldByInternalName("PageContentFld")
     $field.RichText = $true
     $field.RichTextMode = [Microsoft.SharePoint.SPRichTextMode]::FullHtml
     $field.Update()
     $list.Update()

You may want to check your field to make sure those properties are set.

Trigger resize event with jQuery cross-browser

Bind an event handler to the "resize" JavaScript event, or trigger that event on an element

jQuery has a built-in method for this:

$(window).resize(function () { /* do something */ }); 

For the sake of UI responsiveness, you might consider using a setTimeout to call your code only after some number of milliseconds, as shown in the following example, inspired by this:

function doSomething() { 
    alert("I'm done resizing for the moment"); 
}; 
 
var resizeTimer; 
$(window).resize(function() { 
    clearTimeout(resizeTimer); 
    resizeTimer = setTimeout(doSomething, 100); 
}); 

SharePoint 2010: custom markup styles

How to complete customize the SharePoint 2010 markup styles

 

First of all you need to specify all your styles

• Font colors
• Fonts
• Font Sizes
• Mark colors
• Predefined Styles
• Predefined Markup Styles
 

The second step: write a css with all your specified styles

I have written a complete customized markup css file. You can download it at the end of this blog post. The location of the css file doesn't matter. I put always it in de layouts folder of the SharePoint root.