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

Security Considerations When Using SharePoint Online

SharePoint Online offers a flexible, cloud-based platform for building internal portals, document repositories, and even limited public-facing content. But like any powerful system, it requires careful configuration to ensure it's secure—especially when content is meant to be shared or discovered across a broader audience. Authentication and Access Control The first layer of defense in SharePoint Online is identity. SharePoint is tightly integrated with Azure Active Directory, making it easy to manage access using Microsoft 365 groups, conditional access policies, and multifactor authentication. For internal sites, restrict access to only the necessary users or groups. Avoid using “Everyone” or “Everyone except external users” unless the site is truly intended for broad organizational access. If external sharing is required, limit it as much as possible: Use guest access sparingly and monitor usage Require sign-in for external users, rather than anonymous links Expire s...
Read more

Central notification bar for non coder users in SharePoint 2013 (or 2010)

We wanted a central place to notify people of any important news - planned outages, where the donuts are, etc. This marquee banner had to appear on every site and subsite using our template. I added a content editor webpart, pointing to a file in the SiteAssets of the root site. That worked and allowed me to add CSS, javascript, jquery, etc. in one location and all was right and good. I set up a marquee for those announcements, but since it was in my external file, i was a little uneasy when they decided that the night shift should be able to edit my marquee bar. The night shift usually can't be trusted to close the refrigerator door, let alone any HTML tags, so I needed to lock them down while preventing them from breaking the site as much as possible. I looked into SPServices - "GetListItems", but that seems to always be a local list.  I use this to my advantage when working with "Announcements" and " Links " and that works well, but I couldn...
Read more