Some useful CSS classes for your SharePoint Apps

You want your SharePoint App to fit in with the theme of the parent SharePoint site and so you need to use the same colors & fonts. I haven’t seen anywhere giving a list of the useful classes & I keep forgetting them. ms-emphasis This applies the emphasis foreground and background color. Useful for highlighting rows or headers. ms-ContentAccentn-bgColor Where n is 1-6, these are the different accent colors of the theme. This class simply sets the css background-color ms-ContentAccentn-borderColor Where n is 1-6, these are the different accent colors of the theme. This class simply sets the css border-color ms-ContentAccentn-fontColor Where n is 1-6, these are the different accent colors of the theme. This class simply sets the css font color ms-sideNav This is the side navigation style and includes all the hover/active effects. ms-subtleEmphasis For when you want something a bit more subtle than the normal emphasis. ms-button-emphasize Make you buttons a bit more interesting, including a hover effect.   This is for my reference and I’ll add to is as I find other classes useful.

Random background body images in SharePoint

Just had an interesting question…How do you get random background images on your SharePoint site. We needed it for a demo site and proved vaguely interesting. The problem is that SharePoint sets the CSS class for the body after the page has loaded in the method AllowCSSFiltersOnIE8. This is the method which sets the ms-backgroundImage class on the body tag. This method is called when the body is loaded by using the _spBodyOnLoadFunctionNames() method. So, this is a quick example of how to randomly change the background image. You’ll probably want to tidy it up for production (checking that certain scripts are loaded, moving the CSS into a file, etc), but it worked for our demo. First you’ll need to modify the master HTML page and add the following to the <head> section… <!--MS:<style type="text/css">--> <!-- .backOne{background-image:url('/images/img1.png')} .backTwo{background-image:url('/images/img2.png')} .backThree{background-image:url('/images/img3.png')} --> <!--ME: </style>—> .csharpcode, .csharpcode pre { font-size: small; color: black; font-family: consolas, "Courier New", courier, monospace; background-color: #ffffff; /*white-space: pre;*/ } .csharpcode pre { margin: 0em; } .csharpcode .rem { color: #008000; } .csharpcode .kwrd { color: #0000ff; } .csharpcode .str { color: #006080; } .csharpcode .op { color: #0000c0; } .csharpcode .preproc { color: #cc6633; } .csharpcode .asp { background-color: #ffff00; } .csharpcode .html { color: #800000; } .csharpcode .attr { color: #ff0000; } .csharpcode .alt { background-color: #f4f4f4; width: 100%; margin: 0em; } .csharpcode .lnum { color: #606060; } Thanks to Eric Overfield at PixelMill for the way to add a style to your HTML master page. Then add a bit of script to the end of the page, just before the </body> tag… <script> _spBodyOnLoadFunctionNames.push("swapBodyImage"); function swapBodyImage(){ var r = Math.random() * 3; var img = "backOne"; if (r > 2) img = "backTwo"; else if (r > 1) img = "backThree"; CSSUtil.AddClass(document.body, img);} </script> .csharpcode, .csharpcode pre { font-size: small; color: black; font-family: consolas, "Courier New", courier, monospace; background-color: #ffffff; /*white-space: pre;*/ } .csharpcode pre { margin: 0em; } .csharpcode .rem { color: #008000; } .csharpcode .kwrd { color: #0000ff; } .csharpcode .str { color: #006080; } .csharpcode .op { color: #0000c0; } .csharpcode .preproc { color: #cc6633; } .csharpcode .asp { background-color: #ffff00; } .csharpcode .html { color: #800000; } .csharpcode .attr { color: #ff0000; } .csharpcode .alt { background-color: #f4f4f4; width: 100%; margin: 0em; } .csharpcode .lnum { color: #606060; } The script will then randomly choose one of your styles and so set the background.

SharePoint on Windows Phone

AgilisPoint a free App for your Windows Phone