Richards blog

I added the following to my Confluence page: To do it, I put the following text in an HTML block at the top of the page: <style> .watermark {     opacity: 0.5;     color: BLACK;     position: fixed;     top: 45%;     left: 50%; font-size: 110px; font-weight: 100;     background: yellow; padding-left: 50px; padding-right: 50px; } .rotate {   transform: rotate(-45deg);   /* Legacy vendor prefixes that you probably don't need... */   /* Safari */   -webkit-transform: rotate(-45deg);   /* Firefox */   -moz-transform: rotate(-45deg);   /* IE */   -ms-transform: rotate(-45deg);   /* Opera */   -o-transform: rotate(-45deg);   /* Internet Explorer */   filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); } </style> <div class="watermark rotate ">Draft</div> It seems to work well across browser too.

The icon can be created using the following simple classes .loading{background:url(../img/loading-purple.gif) no-repeat center} .loading > div{display:none} Here is a sample image that could be used. Too easy. However, this is old school. You can create a simpler one using CSS and HTML5. Here is the CSS: .loading-container{display:block;width:100%;min-height:45%;margin-top:60px;text-align:center} .loader {margin:0 auto;text-align:center;width:200px;min-height:100%;display:block;vertical-align:middle} .loader:hover{opacity:1} .loading-spinning-bubbles{position:relative;margin:auto;min-height:1px} .loading-spinning-bubbles .bubble-container {position:absolute;top:calc(50% - 10px/2);left:calc(50% - 10px/2);transform-origin:-150% 50%;-webkit-transform-origin:-150% 50%;-moz-transform-origin:-150% 50%} .loading-spinning-bubbles .bubble-container .bubble {background:#00ac00;width:10px;height:10px;border-radius:50%;animation:bubble 1s infinite;-webkit-animation:bubble ...

A little CSS and JQuery can produce a lot of magic in an application. Here is the code. 1. Start with a simple html page. The important item here is to have an 'ID' to navigate to. In my case, I called it 'top'. <html> <head>     <base href="/" />     <title>Test Page</title>     <meta charset="UTF-8" />     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <script src=”//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js”></script>     <link href="css/myStuff.css" rel="stylesheet" /> </head> <body>     <div>         <!-- Start Body Content -->         <div ng-view role="main" id="top"></div>         <!-- End Body Content --> ...

I did not know it could be this easy. I was using an angular directive (a-disabled), but there is a simple css operator to the perform the same function .disableClick{     pointer-events: none; }

My page has a DIV that needs to be hidden based on some runtime logic. I was running my code after the page loaded,  SP.SOD.executeOrDelayUntilScriptLoaded(function () {         hideMyStuff($data);     }, "SP.js"); My function 'hideMyStuff' called another function to handle the hiding logic. My hiding code was simple: function hideDIV(divId) {     document.getElementById(divId).style.display = 'none'; } That should work, but nothing was happening. On further inspection, I noticed that the CSS class in the page was using a lot of '!important' with its CSS settings, which was overriding my code. This left 2 options to resolve the problem: 1. Sledgehammer approach: set the value with !important. The method would become     document.getElementById(divId).style.display = 'none!important'; 2. Stylish approach:  add a new class to the DIV at runtime. The class is simple: .hidden {     display:none; ...

I was trying to get my masterpage to render properly in IE (aka mission impossible) and, after a stack of trying, came up with the following changes that fixed my problems: 1. In the masterpage, add <meta http-equiv="X-UA-Compatible" content="IE=edge"/> This will cause Sharepoint to use the latest version of IE installed on the host machine. I tried forcing the version (IE=7), but that did not seem to give the required results. 2. In the main CSS file, add HTML {     font-size: 100%;     white-space:normal; } #contentRow{ white-space:normal; } .ms-core-pageTitle{ font-size:inherit; } My CSS was shocking; the font sizes were terrible and the alignment was like my kids bedrooms - very messy. Setting the white-space and font-size resolved my issues.

Anyone who has tried to get CSS working with IE will know about the 'nuances' of the browser. Thankfully, CSS gives us some conditional formatting methods to deal with these scenarios; you can apply class explicitly based on the browser type or version. <!--[if IE]> <style type="text/css">     @font-face {     font-family: "Arial";     src: url("../new/over.ttf");     src: local("Over the Rainbow"), url("../new/over.ttf");     } </style> <![endif]--> See  here  for more information

My current project requires some custom CSS with the minimum amount of customisation. Instead of writing a stack of custom controls, we can 'intercept' the apps as they are being rendered and change their CSS at runtime. The following is a sample of how this might look (I called my file blah.js): (function () {     var overrideContext = {};     overrideContext.Templates = {};     overrideContext.Templates.Header = "<div class='myheader'>";     overrideContext.Templates.Footer = "</div>"     overrideContext.Templates.Item = customItem;     SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrideContext); })(); function customItem(ctx) {     return '<div class="myheadercss"><h1>'+ctx.CurrentItem.Title+'</h1></div>'+            '<div class="mycontentcss"><img class="myimagecss" src="'+ctx.CurrentItem.Image0+'" alt=...

My intranet homepage has a navigation menu displaying the large number of sub sites in the site collection. The problem with the menu items is that they were disappearing behind the user control at the top of the page. Fortunately, there is an easy fix - thank you  Z-Index ul.dynamic{ z-index:999; }

Adding a CSS reference to a visual web part is quite simple: <SharePoint:CssLink ID="Test" runat="server" DefaultUrl="Url/blah.css" /> The problem comes when referencing a relative url with spaces in it. To URL Encode or not, that is the question. Initially, I have the reference as DefaultUrl="/Style%20Library/blah.css", but it was not being picked up by the web part. When I opened the source of the page, I found why - the url was being URL encoded by Sharepoint. This means that the URL in the source was <link rel="stylesheet" type="text/css" href="/Style %2520 Library/blah.css"/> The URL was now double encoded. I removed the %20 from the Url to resolve the problem.

My current project is in a shared environment, so disabling services and the like in Central Administration is not an option. However, the following code was able to remove the pesky menu options with a minimum of fuss. The first attempt was to use a blanket css update: #mp1_0_0_Anchor,#mp1_0_1_Anchor { display: none; } but we then found that our menu items in a custom girdview control vanished. Bummer. The solution was narrow the scope of the css in order to be very specific for the menu items. The following code was produced: .ms-MenuUIUL li[text='My Site'] { display: none;} .ms-MenuUIUL li[text='My Profile'] { display: none;}