SharePoint driven rich text dashboard using jqueryui. (CSS file)


This is the CSS file for Operations Dashboard
Download this file here.

<link href="/SiteAssets/jquery-ui.css" rel="stylesheet"/>
<script src="/SiteAssets/js/jquery-1.12.4.js"></script>
<script src="/SiteAssets/jquery-ui.js"></script>
<script src="/SiteAssets/jquery.SPServices-0.5.4.min.js"></script>
<style unselectable="on">
#sideNavBox{display:none;}
#contentBox{margin-left:20px!important;}
</style>
<style>
.ui-dialog-titlebar-close {visibility: hidden;}


.button_orange {
      -moz-box-shadow:inset 0px -3px 7px 0px #fdc830;
      -webkit-box-shadow:inset 0px -3px 7px 0px #fdc830;
      box-shadow:inset 0px -3px 7px 0px #fdc830;
      background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #fdc830), color-stop(1, #f37335));
      background:-moz-linear-gradient(top, #fdc830 5%, #f37335 100%);
      background:-webkit-linear-gradient(top, #fdc830 5%, #f37335 100%);
      background:-o-linear-gradient(top, #fdc830 5%, #f37335 100%);
      background:-ms-linear-gradient(top, #fdc830 5%, #f37335 100%);
      background:linear-gradient(to bottom, #fdc830 5%, #f37335 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fdc830', endColorstr='#f37335',GradientType=0);
      background-color:#f37335;
      -moz-border-radius:3px;
      -webkit-border-radius:3px;
      border-radius:3px;
      border:1px solid #f37335;
      display:inline-block;
      cursor:pointer;
      color:#ffffff;
      font-family:Arial;
      font-size:15px;
      padding:9px 23px;
      text-decoration:none;
      text-shadow:0px 1px 0px #263666;
        width: 240px;
}

.button_orange:hover {
      background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #f37335), color-stop(1, #fdc830));
      background:-moz-linear-gradient(top, #f37335 5%, #fdc830 100%);
      background:-webkit-linear-gradient(top, #f37335 5%, #fdc830 100%);
      background:-o-linear-gradient(top, #f37335 5%, #fdc830 100%);
      background:-ms-linear-gradient(top, #f37335 5%, #fdc830 100%);
      background:linear-gradient(to bottom, #f37335 5%, #fdc830 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f37335', endColorstr='#fdc830',GradientType=0);
      background-color:#f37335;
}

.button_orange:active {
      position:relative;
      top:1px;
}


.button_green {
      -moz-box-shadow:inset 0px -3px 7px 0px #2c7744;
      -webkit-box-shadow:inset 0px -3px 7px 0px #2c7744;
      box-shadow:inset 0px -3px 7px 0px #2c7744;
      background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #0f9b0f), color-stop(1, #2c7744));
      background:-moz-linear-gradient(top, #0f9b0f 5%, #2c7744 100%);
      background:-webkit-linear-gradient(top, #0f9b0f 5%, #2c7744 100%);
      background:-o-linear-gradient(top, #0f9b0f 5%, #2c7744 100%);
      background:-ms-linear-gradient(top, #0f9b0f 5%, #2c7744 100%);
      background:linear-gradient(to bottom, #0f9b0f 5%, #2c7744 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#0f9b0f', endColorstr='#2c7744',GradientType=0);
      background-color:#0f9b0f;
      -moz-border-radius:3px;
      -webkit-border-radius:3px;
      border-radius:3px;
      border:1px solid #0b0e07;
      display:inline-block;
      cursor:pointer;
      color:#ffffff;
      font-family:Arial;
      font-size:15px;
      padding:9px 23px;
      text-decoration:none;
      text-shadow:0px 1px 0px #263666;
        width: 240px;
}

.button_green:hover {
      background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #0f9b0f), color-stop(1, #0f9b0f));
      background:-moz-linear-gradient(top, #2c7744 5%, #0f9b0f 100%);
      background:-webkit-linear-gradient(top, #2c7744 5%, #0f9b0f 100%);
      background:-o-linear-gradient(top, #2c7744 5%, #0f9b0f 100%);
      background:-ms-linear-gradient(top, #2c7744 5%, #0f9b0f 100%);
      background:linear-gradient(to bottom, #2c7744 5%, #0f9b0f 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#2c7744', endColorstr='#0f9b0f',GradientType=0);
      background-color:#0f9b0f;
}

.button_green:active {
      position:relative;
      top:1px;
}


.button_blue {
      -moz-box-shadow:inset 0px -3px 7px 0px #29bbff;
      -webkit-box-shadow:inset 0px -3px 7px 0px #29bbff;
      box-shadow:inset 0px -3px 7px 0px #29bbff;
      background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #2dabf9), color-stop(1, #0688fa));
      background:-moz-linear-gradient(top, #2dabf9 5%, #0688fa 100%);
      background:-webkit-linear-gradient(top, #2dabf9 5%, #0688fa 100%);
      background:-o-linear-gradient(top, #2dabf9 5%, #0688fa 100%);
      background:-ms-linear-gradient(top, #2dabf9 5%, #0688fa 100%);
      background:linear-gradient(to bottom, #2dabf9 5%, #0688fa 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#2dabf9', endColorstr='#0688fa',GradientType=0);
      background-color:#2dabf9;
      -moz-border-radius:3px;
      -webkit-border-radius:3px;
      border-radius:3px;
      border:1px solid #0b0e07;
      display:inline-block;
      cursor:pointer;
      color:#ffffff;
      font-family:Arial;
      font-size:15px;
      padding:9px 23px;
      text-decoration:none;
      text-shadow:0px 1px 0px #263666;
        width: 240px;
}

.button_blue:hover {
      background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #0688fa), color-stop(1, #2dabf9));
      background:-moz-linear-gradient(top, #0688fa 5%, #2dabf9 100%);
      background:-webkit-linear-gradient(top, #0688fa 5%, #2dabf9 100%);
      background:-o-linear-gradient(top, #0688fa 5%, #2dabf9 100%);
      background:-ms-linear-gradient(top, #0688fa 5%, #2dabf9 100%);
      background:linear-gradient(to bottom, #0688fa 5%, #2dabf9 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#0688fa', endColorstr='#2dabf9',GradientType=0);
      background-color:#0688fa;
}

.button_blue:active {
      position:relative;
      top:1px;
}
.button_red {
      -moz-box-shadow:inset 0px -3px 7px 0px #ED213A;
      -webkit-box-shadow:inset 0px -3px 7px 0px #ED213A;
      box-shadow:inset 0px -3px 7px 0px #ED213A;
      background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #ED213A), color-stop(1, #93291E));
      background:-moz-linear-gradient(top, #ED213A 5%, #93291E 100%);
      background:-webkit-linear-gradient(top, #ED213A 5%, #93291E 100%);
      background:-o-linear-gradient(top, #ED213A 5%, #93291E 100%);
      background:-ms-linear-gradient(top, #ED213A 5%, #93291E 100%);
      background:linear-gradient(to bottom, #ED213A 5%, #93291E 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ED213A', endColorstr='#93291E',GradientType=0);
      background-color:#ED213A;
      -moz-border-radius:3px;
      -webkit-border-radius:3px;
      border-radius:3px;
      border:1px solid #93291E;
      display:inline-block;
      cursor:pointer;
      color:#ffffff;
      font-family:Arial;
      font-size:15px;
      padding:9px 23px;
      text-decoration:none;
      text-shadow:0px 1px 0px #93291E;
        width: 240px;
}
.button_red:hover {
      background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #93291E), color-stop(1, #ED213A));
      background:-moz-linear-gradient(top, #93291E 5%, #ED213A 100%);
      background:-webkit-linear-gradient(top, #93291E 5%, #ED213A 100%);
      background:-o-linear-gradient(top, #93291E 5%, #ED213A 100%);
      background:-ms-linear-gradient(top, #93291E 5%, #ED213A 100%);
      background:linear-gradient(to bottom, #93291E 5%, #ED213A 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#93291E', endColorstr='#ED213A',GradientType=0);
      background-color:#0688fa;
     
}

.button_red:active {
      position:relative;
      top:1px;
}


.button_black {
      -moz-box-shadow:inset 0px -3px 7px 0px #000000;
      -webkit-box-shadow:inset 0px -3px 7px 0px #000000;
      box-shadow:inset 0px -3px 7px 0px #000000;
      background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #2dabf9), color-stop(1, #000305));
      background:-moz-linear-gradient(top, #848b8f 5%, #000305 100%);
      background:-webkit-linear-gradient(top, #848b8f 5%, #000305 100%);
      background:-o-linear-gradient(top, #848b8f 5%, #000305 100%);
      background:-ms-linear-gradient(top, #848b8f 5%, #000305 100%);
      background:linear-gradient(to bottom, #848b8f 5%, #000305 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#2dabf9', endColorstr='#000305',GradientType=0);
      background-color:#848b8f;
      -moz-border-radius:3px;
      -webkit-border-radius:3px;
      border-radius:3px;
      border:1px solid #0b0e07;
      display:inline-block;
      cursor:pointer;
      color:#ffffff;
      font-family:Arial;
      font-size:15px;
      padding:9px 23px;
      text-decoration:none;
      text-shadow:0px 1px 0px #000000;
        width: 240px;
}

.button_black_small {
      -moz-box-shadow:inset 0px -3px 7px 0px #000000;
      -webkit-box-shadow:inset 0px -3px 7px 0px #000000;
      box-shadow:inset 0px -3px 7px 0px #000000;
      background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #2dabf9), color-stop(1, #000305));
      background:-moz-linear-gradient(top, #848b8f 5%, #000305 100%);
      background:-webkit-linear-gradient(top, #848b8f 5%, #000305 100%);
      background:-o-linear-gradient(top, #848b8f 5%, #000305 100%);
      background:-ms-linear-gradient(top, #848b8f 5%, #000305 100%);
      background:linear-gradient(to bottom, #848b8f 5%, #000305 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#2dabf9', endColorstr='#000305',GradientType=0);
      background-color:#848b8f;
      -moz-border-radius:3px;
      -webkit-border-radius:3px;
      border-radius:3px;
      border:1px solid #0b0e07;
      display:inline-block;
      cursor:pointer;
      color:#ffffff;
      font-family:Arial;
      font-size:15px;
      padding:9px 23px;
      text-decoration:none;
      text-shadow:0px 1px 0px #000000;
        width: 160px;
}

.button_black:hover {
      background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #000305), color-stop(1, #848b8f));
      background:-moz-linear-gradient(top, #000305 5%, #848b8f 100%);
      background:-webkit-linear-gradient(top, #000305 5%, #848b8f 100%);
      background:-o-linear-gradient(top, #000305 5%, #848b8f 100%);
      background:-ms-linear-gradient(top, #000305 5%, #848b8f 100%);
      background:linear-gradient(to bottom, #000305 5%, #848b8f 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#000305', endColorstr='#848b8f',GradientType=0);
      background-color:#000305;
}

.button_black:active {
      position:relative;
      top:1px;
}
</style>

Comments

Post a Comment

Popular posts from this blog

Setting SharePoint announcements to auto delete after expiration

Image
Setting announcements to auto delete after expiration One thing that always bugged me was the expiration date attached to an Announcement list that does nothing out of the box. Sure, you could always add a filter and change the default view but as soon as you add an Announcements web part to a page the view is UNFILTERED even if a filtered view is the only one to choose from.  You or I could change the default view, but we can’t trust all users to do so. A workflow would be fine to delete the item – simply pause until the expire date then delete the current item.  The workflow would stick with the template if you saved your list off as a template and then still work when you created a new list from that template.  That’s good, but still relies on the user creating the right Announcement list. The better answer was to change the Announcements default content type.  If anyone asks, tell them it’s called Governance, Sparky. The first step was to go to site sett...
Read more

Updating a single field in a SharePoint List using Power Automate Flows

Image
  Updating a single field in a SharePoint List using Power Automate Flows Updating a single field in a SharePoint List using Microsoft Flows (aka Microsoft Power Automate) can be a bit tricky with longer lists with lots of required fields and drop downs possibly resetting your data. The work around is code, but if there are non-developers creating flows, then this process is even more cumbersome. As a result, the Flow below will do the heavy lifting using a separate list and then anyone can populate that list from a different Flow when such a thing is needed. First step: create the list Here’s the input needed in this list. List: The name of the list SiteLink: The link to the site (trim off /lists/xyzlist) IDFromSource: This is the internal ID of the item to update FieldToUpdate: The name of the field you want to update. This is case sensitive. ValueForField: What you want to set it to. Next, create the Flow. Here’s what it will look like   When a Shar...
Read more

SharePoint driven rich text dashboard using jqueryui. (JQuery file)

Jquery file for Operations Dashboard Download this file <script type="text/javascript"> $(document).ready (       function()       {             SP.SOD.executeFunc('sp.js', 'SP.CamlQuery', RetrieveListValues);       } ); function RetrieveListValues() {       var query = new SP.CamlQuery(); query.set_viewXml("<View><Query><OrderBy><FieldRef Name=\"SortOrder\"/></OrderBy></Query></View>");                                     var clientContext = new SP.ClientContext("https://sharepoint.name/section/OD");       var oList = clientContext.get_web().get_lists().ge...
Read more