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.

While writing a simple page in Confluence, I used expander controls to help manage real estate. To help users, I added two buttons (expand all, collapse all) to enhance the user experience. After a little experimentation, I deceided to use the OOTB icons as the trigger for the logic. A simple piece of JavaScript to check for the "chevron right" class in the anchor controls, and process the logic accordingly. Here is the script (to be placed in an HTML control on the page) <script language="JavaScript"> function expandUI(isClosed) { var a = document.getElementsByClassName("expand-control");   var b = document.getElementsByClassName("expand-icon") for (let i = 0; i < a.length; i++){ if (b[i].classList.contains("aui-iconfont-chevron-right") == isClosed) { a[i].click(); } } } // make sure the page loads with the expanders expanded window.addEventListener("load", function(){ expandUI(true); }); ...