SharePoint: Run JavaScript based on user rights / permissions

 

There are all kinds of tricks you can do with JavaScript in SharePoint. Sometimes though you only want the JavaScript to run for selected users.

• If you want to run the JS for only a single site just check the URL for the page name (document.location.href)
  
• If you want to run the JS for only a single person just write some JS to retrieve the user’s name from the Welcome menu at the top of the page
  
• If you want to run the JS based on the permissions of the user, then you need to use a SharePoint control called: SPSecurityTrimmedControl

Using SPSecurityTrimmedControl

The SPSecurityTrimmedControl cannot be used inside of Content Editor Web Part as it must be processed on the web servers. So, you must add something to the ASPX page or the master page.

 

Here’s an example:

 
<script>
  var UserHasPermissions=false;
</script>

<Sharepoint:SPSecurityTrimmedControl runat="server" PermissionsString="ManageWeb">
  <script>
    UserHasPermissions=true;
  </script>
</SharePoint:SPSecurityTrimmedControl>

 

If you put this block of code somewhere on the master page before where you need to run your code then you can use the value UserHasPermissions in the ASPX file. If you put this in the master page before where web parts are loaded then you can use this in your Content Query Web Part JavaScript tricks!

In your JavaScript you only need to check this value:

 
<script>
// do something based on permissions
if ( UserHasPermissions )
{
  // add your code here
  alert("ALERT from SecurityTrimmedControl")
}
</script>

 

You may want to add several of these tests so you can then have UserHasWebPermissions, UserHasDeletePermissions, UserHasXYZPermissions, etc.

 

More Info:

For more info on SPSecurityTrimmedControl see:
http://msdn.microsoft.com/en-us/library/microsoft.sharepoint.webcontrols.spsecuritytrimmedcontrol.aspx

There is a list of the permissions strings at the bottom of this article: 
http://msdn.microsoft.com/en-us/library/microsoft.sharepoint.webcontrols.spsecuritytrimmedcontrol.permissionsstring%28office.12%29.aspx
These strings are the same permissions found in the SharePoint Permission Levels (Site Actions, Site Settings, Advanced Permissions, Settings, Permission Levels - then add or edit an existing to see the list)

 

And here’s another example to hide “All People” on the People and Groups pages:

If you don't mind editing the application.master, and there is a permission item that can identify the group of users who should see or not see the option then…

Insert the following just before </BODY> in application.master. Modify PermissionsString="ManageWeb" to one of the choices found here that only your desired users have.

<script>
var UserHasPermissions=false;
</script>
<Sharepoint:SPSecurityTrimmedControl runat="server" PermissionsString="ManageWeb">
  <script>
    UserHasPermissions=true;
  </script>
</SharePoint:SPSecurityTrimmedControl>

<script>
if ( !UserHasPermissions )
{
  var x = document.getElementsByTagName("A")
  for (var i=0;i<x.length;i++)
  {
    if (x(i).innerText=="All People")
    {
      x(i).parentNode.style.display="none";
    }
  }
}
</script>

 

 

.

SharePoint: Change the “Add New” message for a web part

 

A version of this article for SharePoint 2010 is here:
http://techtrainingnotes.blogspot.com/2010/08/sharepoint-2010-change-add-new-item-and.html

 

 

How to change from “Add new announcement”:

  

to “Click here to add team news”:

  

 

ID’s used by web parts

Each web part has a different ID. You will need to modify the following code with the needed ID. Note that some lists use the same ID, like Documents and Wikis.

 

Web Part	Default message	ID for “document.all” in the code below
Announcements	Add new announcement	"Add new announcement"
Links	Add new link	"idHomePageNewLink"
Calendar	Add new event	"idHomePageNewEvent"
Picture Library	Add new picture	"idAddPicture"
KPI List	Add new item	"idAddNewItem"
Tasks	Add new item	"idAddNewTask"  *
Project Tasks	Add new item	"idAddNewTask"  *
Document Library	Add new document	"idAddNewDoc"   *
Wiki	Add new Wiki page	"idAddNewDoc"   *
Survey	Respond to this survey	"idNewSurveyResponse"
Discussion	Add new discussion	"idAddNewDiscuss"

* = Shared with another list

Steps:

• Add an Content Editor Web Part (CEWP) below the Announcements web part.
• From the CEWP click Edit and Modify Shared Web Part
• Click the Source Editor button
• Paste the following:

<script>
  document.all("Add new announcement").innerHTML="your new text goes here"
</script> 

• Click OK, then OK, then Exit Edit Mode

If you have more than one web part on the page with the same ID then you need to change the [0] to the number for the web part. 0=first web part, 1=second web part, etc.

document.all("Add new announcement")[0].innerHTML="your new text" 

 

If you want to get rid of the little icon just before text try this:

<script>
  var ttn_x;
  ttn_x=document.all("Add new announcement")
  // replace the text
  ttn_x.innerHTML="Click here to add team news"
  // delete or replace the image
  ttn_x.parentNode.innerHTML = ttn_x.parentNode.innerHTML.replace(/<IMG alt="" src="\/_layouts\/images\/rect\.gif">&nbsp;/,"")
</script>

If you have more than one web part on the page with the same ID then you need to change the [0] to the number for the web part. 0=first web part, 1=second web part, etc.

The image is a fragment of HTML that looks like this:

<IMG alt="" src="\/_layouts\/images\/rect\.gif">&nbsp;

The code above replaces this. JavaScript’s replace command uses regular expressions so you need to escape the “/” and “.” characters.

 

.

SharePoint: Rotating Pictures, Random Pictures (updated)

 

Yet another update!  People can be such a pest… you keep asking for “captions, for buttons, for Play/Pause… Well I finally took the time to do it. Rather than complicate this post any more, I have the update here:
http://techtrainingnotes.blogspot.com/2010/05/sharepoint-rotating-pictures-random.html

Here’s a what the updated one looks like (without the animation):

 

SP 2010 Update: Will this work in SharePoint 2010?  Who cares!  SP 2010 has a new “Picture Library Slide Show web part” that can display random pictures every “x” seconds! (But my new version above is customizable!)

 

Updated to support Firefox and to add an optional hyperlink.

 

Many web sites have pictures that keep changing while the page is displayed. If you were doing ASP.NET development you might use the AdRotator control to do this. You can find some custom web parts that can be installed on your web server to do this.

But… I wanted a way to do this with no C# programming, no server deployment issues and even without SharePoint Designer. This is yet another Content Editor Web Part trick!

 

How this works:

• Add a picture library and upload some pictures
• Add a the web part for this new library on your home page
• Customize the view used by the web part
• Add a Content Editor Web Part to the same page and paste the HTML and JavaScript code below
• Sit back and watch!

Options:

When you paste the JavaScript you can set a few options to control the appearance of the images:

• One is required:
  • The name of the web part
• The rest are optional:
  • Show in thumbnail size (160 pixels wide) or full size
  • Show in the order found in the web part or random
  • Set how long each picture is displayed
  • Set how long to take to transition between images
  • Set if you would like to make the images clickable to a custom URL

Important note: This has only been tested in Internet Explorer and Firefox 3.5.2 so far. I will try to some testing with other browsers soon.

 

Steps:

• Create your picture library and upload your pictures
• If you would like to supply links for the pictures, add a hyperlink column
• If you would like to filter the list of pictures to be displayed, customize the library to add additional columns to how the filter data. (Event name, department, product, etc)
• Go to your web part page and add the web part for the new library
• Important steps:
  • Click Edit, Modify Shared Web Part
  • Optional: In the appearance section give the web part a meaningful name
  • Click Edit the Current View
  • Un-checkmark all of the columns except for “Name (linked to document)”
  • Optional: check a column to use as a custom hyperlink (must be the second column in the view)
  • Optional: Set the sort order
  • Optional: Set filter options to select only the pictures you want displayed
  • Make sure the the list web part view is not using a "Item Limit" less then the number of pictures in the list. (You could just set this to be BIG number).
  • Click OK to save the view changes
  • Click OK to save the web part changes
• Add a Content Editor Web Part (CEWP) below the picture library web part
• Click Edit, Modify Shared Web Part
• Click Source Editor
• Copy and paste the code from below
• Click OK for the Source Editor
• Click OK to save the web part changes
• Click Exit Edit Mode and see if it works!

The Code:

 

<script>
// another CEWP trick from http://techtrainingnotes.blogspot.com
var pictureWebPartName="Airshow Pictures"; // name of the picture library web part
var showThumbnails = true;      //otherwise show full sized images
var randomImg = true;           //set to true to show in random order
var useCustomLinks = false;     //true to use second column as URL for picture clicks
var RotatingPicturesLoopTime = 5000;  //2000 = 2 seconds
var imgToImgTransition = 1.0;         //2 = 2 seconds  

// don't change these
var selectedImg = 0;
var imgCache = [];
var imgTag;

function RotatingPictures()
{

  imgTag = document.getElementById("RotatingImage");
  //Find the picture web part and hide it
  var Imgs = [];
  var x = document.getElementsByTagName("TD"); // find all of the table cells
  var LinkList;
  var i=0;

  for (i=0;i<x.length;i++) 
  {
    if (x[i].title == pictureWebPartName)
    {
      // tables in tables in tables... ah SharePoint!
      LinkList = x[i].parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode;
      // hide the links list web part
   //   LinkList.style.display="none"; 
      break;
    } 
  }

  if (!LinkList)
  {
    document.all("RotatingImageMsg").innerHTML="Web Part '" + pictureWebPartName + "' not found!";
  }

  //Copy all of the links from the web part to our array

  var links = LinkList.getElementsByTagName("TR") // find all of the rows
  var url;
  var len;
  for (i=0;i<links.length;i++) 
  {
    //if (links(i).id.match("row")!=null)
    if (links[i].childNodes[0].className=="ms-vb2")
    {
      len=Imgs.length
      Imgs[len]=[]
      Imgs[len][0] = links[i].childNodes[0].childNodes[0].href;
      if (useCustomLinks)
      {
        if (links[i].childNodes[1].childNodes.length>0)
         { Imgs[len][1] = links[i].childNodes[1].childNodes[0].href; }
         else
         { Imgs[len][1] = "" }
      }
    }
  }
  if (Imgs.length==0)
  {
    document.all("RotatingImageMsg").innerHTML="No images found in web part '" + pictureWebPartName + "'!";
  }
  for (i = 0; i < Imgs.length; i++)
  {
    imgCache[i] = new Image();
    imgCache[i].src = Imgs[i][0];
    if (useCustomLinks)
    {
      imgCache[i].customlink=Imgs[i][1];
    }
  }
  RotatingPicturesLoop();
}


// now show the pictures...
function RotatingPicturesLoop()
{
  if (randomImg)
  {
    selectedImg=Math.floor(Math.random()*imgCache.length);
  }

  if (document.all){
      imgTag.style.filter="blendTrans(duration=" + imgToImgTransition + ")";
      imgTag.filters.blendTrans.Apply();
  }

  url=imgCache[selectedImg].src
  if (useCustomLinks)
  { RotatingImageLnk.href=imgCache[selectedImg].customlink; } 
  else
  { RotatingImageLnk.href = url; }

  if (showThumbnails)
  {
    // convert URLs to point to the thumbnails...
    //   from  airshow%20pictures/helicopter.jpg
    //   to    airshow%20pictures/_t/helicopter_jpg.jpg

    url = revString(url);
    c = url.indexOf(".");
    url = url.substring(0,c) + "_" + url.substring(c+1,url.length);
    c = url.indexOf("/");
    url = url.substring(0,c) + "/t_" + url.substring(c,url.length);
    url = revString(url) + ".jpg";
  }


  imgTag.src = url;
  if (document.all){
    imgTag.filters.blendTrans.Play();
  }
  selectedImg += 1;
  if (selectedImg > (imgCache.length-1)) selectedImg=0;
  setTimeout(RotatingPicturesLoop, RotatingPicturesLoopTime);
}


// utility function revString found here:
// http://www.java2s.com/Code/JavaScript/Language-Basics/PlayingwithStrings.htm
function revString(str) { 
   var retStr = ""; 
   for (i=str.length - 1 ; i > - 1 ; i--){ 
      retStr += str.substr(i,1); 
   } 
   return retStr; 
}


// add our function to the SharePoint OnLoad event
_spBodyOnLoadFunctionNames.push("RotatingPictures"); 

</script>

<!-- add your own formatting here... -->
<center>
  <table border="0" cellpadding="0" cellspacing="0">
    <tr>
      <td id="VU" height="125" width="160" align="center" valign="middle">
<a name="RotatingImageLnk" id="RotatingImageLnk" alt="click for larger picture">
        <img src="/_layouts/images/dot.gif" name="RotatingImage" id="RotatingImage" border=0>
</a>
        <span name="RotatingImageMsg" id="RotatingImageMsg"></span>
      </td>
    </tr>
  </table>
</center>

 

 

 

 

.

SharePoint: Adding popups to Link lists (open in new window)

The links list web part is a quick and easy to add a list of links to vendors, other SharePoint sites or the most popular documents in a library. The problem is that the links list web part does not have an “Open in new window” option. So when your users click the list, they navigate away from your site.

A typical links list:

           

To change a links list to force “Open in new window”:

• Add a Content Editor Web Part (CEWP) just below the links list web part
• Modify the CEWP and set a title then click Source Editor
• Copy and paste the HTML and JavaScript below
• Edit the JavaScript to change the word “Links” to the name of your links list web part (title of the web part, not the title of the actual list, although they may be the same)
  if (x(i).summary=="Links")     to
  if (x(i).summary=="Your Links List Title")
  (If you are not sure, display your page, select Source from the View menu and search for “summary”)
• Also… in the Advanced section of the CEWP’s properties change Chrome to “None” to hide the CEWP
• Exit the edit mode and see if it works

 

<script>
// CEWP trick from techtrainingnotes.blogspot.com!
// Find the link list  (change "Links" to your web part's name)
var x = document.getElementsByTagName("TABLE") // find all of the Tables 
  var LinkList
  var i=0;
  for (i=0;i<x.length;i++) 
  {
    if (x[i].summary=="Links")
    {
      //
      LinkList = x[i];
      break;
     } 
  }

// add a target to the <A> tags
var links = LinkList.getElementsByTagName("A") // find all of the 
  for (i=0;i<links.length;i++) 
  {
    links[i].target="_blank"
  }
</script>

 

 

.

SharePoint: Convert a Links list to a Dropdown list

 

This article has been updated to include support for both SharePoint 2007 and 2010 and for better multiple browser support.  Click HERE for the updated version.

 

Problem: There is never enough room on your SharePoint home page. So what do you do if you have a long list of vendor links you would like to display on the home page. You would usually use a Links list and add a Links list web part. But it takes up too much space. How about a simple dropdown list?

    

Solution: Yet another Content Editor Web Part (CEWP) trick!  A CEWP and some JavaScript…

  

                                   

Steps:

• Create your links list and add your links
• Add the link list’s web part to the page
• Add a Content Editor Web Part (CEWP) to the page just under the links list web part
• Modify the CEWP and set a title then click Source Editor
• Copy and paste the HTML and JavaScript below
• Edit the JavaScript to change the word “Links” to the name of your links list web part (title of the web part, not the title of the actual list, although they may be the same)
    if (x(i).summary=="Links")     to
    if (x(i).summary=="Your Links List Title")
• Exit the edit mode and see if it works

The HTML and JavaScript for the CEWP:

<select name="JumpToList"
    onchange="javascript:JumpToUrl(this(this.selectedIndex).value)">
  <option>Jump to ...</option>
</select>

<script>
// CEWP trick from techtrainingnotes.blogspot.com! 

function JumpToUrl(url)
{
    document.location.href = url
}

//code to hide the links list and populate the select list

//Find the link list and hide it
var x = document.getElementsByTagName("TABLE") // find all of the Tables 
  var LinkList
  var i=0;
  for (i=0;i<x.length;i++) 
  {
    if (x(i).summary=="Links")
    {
      //
      LinkList = x(i)
      //hide the links list web part (tables in tables in tables ...)
      x(i).parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.style.display="none"
     } 
  }

//Copy all of the links from the link list to the select list
var ToList = document.all("JumpToList")

var links = LinkList.getElementsByTagName("A") // find all of the 
  for (i=0;i<links.length;i++) 
  {
ToList.options[ToList.length] = new Option(links(i).innerHTML, links(i).href);
  }

</script>

 

 

.

SharePoint: Custom Search Boxes – Google Search

 

A Google Search:

If you would like to make available a Google search of your public / anonymous access site you can replace the SharePoint search box with a custom control you create.

How it works:

First you need a URL to Google that passes your list of keywords and the “site:” option with the name of your site:

   http://www.google.com/search?hl=en&q=yourkeywords site:http://yourSiteURL
   (I guess “q” is short for “query”???)

To be “proper” the URL should be encoded:

   http://www.google.com/search?hl=en&q=yourkeywords+site%3Ahttp%3A%2F%2F

Then all you need is a Web User Control that you can create in Visual Studio or Notepad. This control can either redirect to Google using JavaScript or a little C# code.

 

Steps:

Note: This example requires deployment of files to the web server.

1) Create the Web User Control: (Name it GoogleSearch.ascx)
Replace “site:techtrainingnotes.blogspot.com” with your site URL.

<%@ Control Language="VB" ClassName="GoogleSearchReplacement" %>

<script runat="server">
  Protected Sub btnGoSearch_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles btnGoSearch.Click
    Response.Redirect("http://www.google.com/search?hl=en&q=" & search.Text + " site:techtrainingnotes.blogspot.com")
  End Sub
</script>

<asp:TextBox ID="search" runat="server"></asp:TextBox><asp:Button ID="btnGoSearch" runat="server" Text="Search Google" />

 

or if you prefer a JavaScript version:

<%@ Control %>
<input name="q" type="text"/><a href="" onclick="javascript:GoogleSearch();return false"><img src="/_layouts/images/gosearch.gif"/></a>
<script>
  function GoogleSearch()
  {
    document.location.href="http://www.google.com/search?q=" + document.all("q").value + " site:techtrainingnotes.blogspot.com"
  }
</script>

 

2) Create a feature to for the new control:

Create a Feature.xml file (you can use your own GUID for the ID if you like)
Note: this example has the scope set to Web (activated at the individual site level)

<?xml version="1.0" encoding="utf-8" ?>
<Feature xmlns="http://schemas.microsoft.com/sharepoint/"
         Id="1AAC958B-FF05-4d96-B678-A14F581D187A"
         Description="Replace SharePoint search with Google search"
          Scope="Web"
          Title="Google Search"
          Version="1.0.0.0"          
         >
  <ElementManifests>
    <ElementManifest Location="elements.xml"/>    
  </ElementManifests>  
</Feature>

 

Create the elements.xml file:

<?xml version="1.0" encoding="utf-8" ?>
<Elements xmlns="http://schemas.microsoft.com/sharepoint/">
  <Control Id="SmallSearchInputBox" 
           ControlSrc="~/_ControlTemplates/GoogleSearch.ascx" Sequence="10">
  </Control>
</Elements>

Notes:

- this feature replaces the existing search ASCX file normally displayed in the Delegate Control named SmallSearchInputBox

 

Deploy the files to the 12 hive (to all of the web servers in the farm):

• Copy GoogleSearch.ascx to ..\12\TEMPLATE\ControlTemplates folder in ..\12\
• Create a new folder in ..\12\TEMPLATE\Features named GoogleSearch
• Copy feature.xml and elements.xml to this folder
• Run this STSADM from the command prompt to install the feature.
  
  STSADM –o installfeature –name GoogleSearch
  
• Go to a site, select Site Actions, Site Settings and click Site features. Find this feature and activate it.
• Test the search!

 

 

.

SharePoint: Prevent the rescheduling of a task by dragging of the Gantt chart bar

 

When a task list is displayed using a Gantt view the user can reschedule a task (often by accident) by dragging the Gantt task bar with the mouse. It’s easy to prevent this with a tiny piece of JavaScript.

 

Steps:

• Go the the page with the Gantt view
     http://yourserver/sites/yoursite/lists/yourtasklist/gantt.aspx
• Click Site Actions, Site Settings, Edit Page
• Click Add a Web Part and add a Content Editor Web Part (CEWP)
• Move the CEWP below the Gantt chart web part
• In the CEWP click Edit then Modify Shared Web Part
• Click the Source Editor button
• Paste the code from below
• Exit the edit mode and try to drag one of the Gantt chart bars.

 
<script>
document.all("GanttTable").ondragstart = function () {alert("Task dragging disabled!")}
</script>

(The text between the script tags is all one line)

 

The result:

SharePoint: Hiding Create options from MySite users

 

SharePoint does not give you and easy way to customize the Site Actions, Create page for selected users or sites. For example, you may not want MySite users to create Wikis or Discussion Boards, but everything else is ok.

The following “hack” is:
  - quick
  - easy
  - requires access to the web servers
  - not a form of security
  - and is not best practice!

        but is a cool hack.

 

Steps:

• Go to your web server and to C:\Program Files\Common Files\Microsoft Shared\web server extensions\12\TEMPLATE\LAYOUTS
  
• Open create.aspx in your favoriate text / page editor. (I used Notepad)   BACKUP THIS FILE BEFORE EDITING!
  
• Scroll to the end and past the following JavaScript just before the "</asp:Content>" tag.
  

<script type="text/javascript" language="javascript">
if (document.location.href.match('/personal/')!=null)    //do this just for the mysites
{  

  var x = document.getElementsByTagName("TABLE") // find all of the TABLEs on the page  
  var i=0;
  for (i=0;i<x.length;i++)
  {

    if (x[i].className=="ms-itemstatic") //find the TDs styled for lists
    {

      if (x[i].innerHTML.match('Wiki|Survey|Sites and Workspaces')!=null)  // find the items to hide.
      {
        x[i].style.display='none'
      }
    }
  }
}
</script>

 

How it works:

• it does its work only for mysites (and only if you have not changed the mysite URL from /personal/)
  
• it finds all tables (each choice on the page is in a little table)
  
• it finds any table that has the keywords you are looking for in the innerHTML.match line
  Note: this example hides any item with the words/phrases: "Wiki", "Survey" and "Sites and Workspaces"
  pick your phrases carefully and TEST!
  
• it hides those that match.
  

Why not best practice?

• you are modifying a Microsoft page that may be overwritten in the next service pack
• if you don't document it in your disaster / rebuild plan, it will be forgotten.
  

Why not a form of security?

• the user could go to another site and create the same item and note the URL used. Modify the URL and it works in any site.

.

SharePoint: File name, folder name and path limits

 

The official numbers are:

• folder name - not more than 128 characters  (123? see below)
• file name - not more than 128 characters (128? see below)
• total path to file - not more than 260 characters

And be aware that space and other special characters typically require three characters each.  Ie.  Test File  is  Test%20File

 

Built-in limits:

The page used to create folders and has a text box with a limit of 123 characters (go figure!).

The page used to edit properties for files has a text box with a limit of 123 characters, but that makes sense as Office 2007 has four character file extensions, so 123 + a period + 4 = 128.

And for completeness, here's the error message if you try to upload a file with too long of a name or a combined URL that is too long:

"The specified file or folder name is too long. The URL path for all files and folders must be 260 characters or less (and no more than 128 characters for any single file or folder name in the URL). Please type a shorter file or folder name."

 

.

SharePoint: Change SharePoint Fonts and Sizes

 

A simple question: “How can I change the fonts in SharePoint”

 

If only the answer were simple…

 

By the way, there is almost a simple answer here: http://hermansberghem.blogspot.com/2007/08/quickly-replace-default-sharepoint-font.html

Simply take his sample CSS and enclose them in <style> tags and insert in your master page just after SharePoint style sheet controls.

Why almost? It does not change everything. For example it does not change the fonts used in Quick Launch and Tabs. It’s a great idea, but needs some more work.

 

So let’s start with where SharePoint sets the fonts for a page:

• CORE.CSS style sheet – There is one CORE.CSS for each language installed. For English the location is C:\Program Files\Common Files\Microsoft Shared\web server extensions\12\TEMPLATE\LAYOUTS\1033\STYLES
  
• User selected theme (Site Actions, Site Settings, Theme) – The CSS file is located in C:\Program Files\Common Files\Microsoft Shared\web server extensions\12\TEMPLATE\THEMES\themename\theme.css
  
• User uploaded CSS file (MOSS publishing sites and sub-sites only: Site Actions, Site Settings, Master Page, Alternate CSS URL)
  
• Inline CSS in the Master Page and Content pages
  
• Custom CSS loaded from a Content page using the content place holder “PlaceHolderAdditionalPageHead”
  
• Calendar CSS style sheets calendar.css and datepicker.css.
Like CORE.CSS, there is one of these for each language installed. For English the location is C:\Program Files\Common Files\Microsoft Shared\web server extensions\12\TEMPLATE\LAYOUTS\1033\STYLES

 

Solutions?

• Edit CORE.CSS, CALENDAR.CSS and DATEPICKER.CSS on the servers. (bad idea – see below)
• Create a new Theme and deploy to the server (good idea if you have access to the server’s drive C:)
• Create your own style sheets and deploy them to your own libraries (that’s what we will describe here)

So, lots of places to look at and possibly edit. Where do you start? With CORE.CSS.

Where are these loaded by SharePoint? If you look in default.master you will see the two linked CSS files are loaded in the <HEAD> section of the Master Page:
    <SharePoint:CssLink runat="server"/>
   <SharePoint:Theme runat="server"/>

These custom SharePoint elements get expanded at runtime to a path with the detected language’s ID:

   <link rel="stylesheet" type="text/css"
      href="/_layouts/1033/styles/core.css?rev=…"/>
   <link rel="stylesheet" type="text/css" id="onetidThemeCSS"
      href="/_themes/Citrus/Citr1011-65001.css?rev=…"/

(Note the order they are loaded (or cascaded))

If you are looking at the source of a calendar page you will see two more CSS files:

   <link rel="stylesheet" type="text/css"
      href="/_layouts/1033/styles/calendar.css?rev=…"/>
   <link rel="stylesheet" type="text/css"
      href="/_layouts/1033/styles/datepicker.css?rev=…"/>
   <link rel="stylesheet" type="text/css"
      href="/_layouts/1033/styles/core.css?rev=…"/>
   <link rel="stylesheet" type="text/css" id="onetidThemeCSS"
      href="/_themes/Citrus/Citr1011-65001.css?rev=…"/

 

It is not recommended to modify CORE.CSS as it will most likely get updated with service packs and patches. You will need to create your own CSS file as load it (cascade it) after the list above. One way to do this is to make a copy of CORE.CSS.  (See the example steps below)

 

Where to Store your Custom CSS File

• If you have access to the SharePoint web servers then you can store your final design here: C:\program files\Common Files\Microsoft Shared\web server extensions\12\TEMPLATE\LAYOUTS\STYLES
• If you are using MOSS publishing sites you can upload the CSS file from Site Actions, Site Settings, Master Page, Alternate CSS URL
• A library in your site – This is great for testing and for final deployment when you don’t have access to the SharePoint web servers. Note: you will want to customize the access rights to this library to make it View Only for all except for the Site Administrators.

 

Now to change some fonts:

SharePoint defaults use a mixture of Tahoma and Verdana fonts. In this quick example we will change them all to “Comic Sans MS”.
CORE.css

First we need a copy of CORE.css. Why? All of the style names used in the out of the box SharePoint pages are defined there, over 800 of them. Most are named “ms-xxxxx”, but others have names such as “srch-xxxxx” and “Userxxxxx”. Some of these definitions will be superseded by styles with the same names in the selected site theme.

There is no single style used to set the font. You will need to use search and replace to update a large number of styles.

Note: To reduce the size of these frequently download files you could remove all of the CSS sections for your custom CSS file that do not have font references.

To get a copy of CORE.css:

If you have access to your server you could look here:
C:\Program Files\Common Files\Microsoft Shared\web server extensions\12\TEMPLATE\LAYOUTS\1033\STYLES

(Note: 1033 is for the English version)

Or you can grab a copy via the browser:

1. Open a browser and go to:
   http://yourserver/yoursite/_layouts/1033/styles/core.css
2. Click Open to open in SharePoint Designer (or click Save if you would like to have a local copy)
3. Once in SharePoint Designer click File, Save As and save the file to your testing library in your site. (mycore.css)
4. Now do a Search and Replace and replace tahoma with "Comic Sans MS". (include the quotes as there are spaces in the font name!)  I get 66 replacements!
5. Repeat the search and replace and replace verdana with  "Comic Sans MS". (include the quotes!)   I get 90 replacements!
6. In your default.master (or any test page, or inside of a testing Content Editor web part) add a link to your style sheet. If updating a master page, add the link anywhere after any existing CSS or Theme links.
   
   This example assumes you have uploaded the CSS file to a library in your site.

             <SharePoint:CssLink runat="server"/>
              <SharePoint:Theme runat="server"/>

              <link rel="stylesheet" type="text/css"
                        href="/sites/test/Shared%20Documents/mycore.css" />

 

Now display a page from your site and see if the fonts have all changed.

Now go to the calendar page. You will see that most fonts are updated, including some in the calendar. You have more work with the calendar style sheets to complete your edits. Repeat the steps above for calendar.css and datepicker.css. Get copies of the files, save them to your library (or the web servers), search and replace to change the fonts. Then add two more links:

              <SharePoint:CssLink runat="server"/>
              <SharePoint:Theme runat="server"/>

              <link rel="stylesheet" type="text/css"
                        href="/sites/test/Shared%20Documents/mycore.css" />

              <link rel="stylesheet" type="text/css"
                        href="/sites/test/Shared%20Documents/mycalendar.css" /> 
              <link rel="stylesheet" type="text/css"
                        href="/sites/test/Shared%20Documents/mydatepicker.css" />

Note: You could merge all three of your custom style sheets into a single file and only link to it.

 

Changing Font Size

The same steps used above can be used to change font sizes, but there are 26 different font sizes defined in CORE.CSS alone.

font-size:.68em;	4
font-size:.6em;	1
font-size:.7em;	6
font-size:.85em;	1
font-size:0.7em;	3
font-size:0px;	2
FONT-SIZE:1.0em;	7
font-size:1.2em;	2
font-size:100%;	2
font-size:10pt;	4
font-size:10px;	1
font-size:11pt;	1
font-size:120%;	1
font-size:12pt;	2
font-size:150%;	1
font-size:16pt;	3
font-size:1em;	4
font-size:1pt;	3
font-size:1px;	1
font-size:200%;	1
font-size:2px;	6
font-size:65%;	1
font-size:7pt;	2
font-size:80%	1
font-size:8pt;	115
font-size:9pt;	4
Grand Total	179

 

Font change thoughts and recommendations:

• Most of the font sizes in core.css are absolute (pixels or points) and this prevents users from using the browser Text Size features to make a page easier to read. (do a web search on “SharePoint accessibility”)
• You will have to do a lot of testing! Especially to find where there are hard coded font sizes in some pages and web parts.

 

For a great design resource and detailed information on customizing SharePoint using CSS see: http://www.heathersolomon.com/content/sp07cssreference.htm

 

.

SharePoint: Missing “Save site as template” in sub sites

 

 Problem:

• You create a sub site
• You set Unique permissions (no inheritance)
• You add a user who does not also have access to the top level site to the Owners group (or give them the Full Control permission).
• The new “owner” goes to Site Actions, Site Settings and can’t find “Save site as template”.

For a similar problem relating to missing web parts see: SharePoint: Missing web parts on sub sites

 

Turns out it’s a rights issue. The templates are stored in the top level site’s Site Templates Gallery and your user does not have access to the top level site and its lists.

 

A quick fix is to grant contribute, or better, rights to the user to the parent site. But… you may not want them to have access to the top level site.

It's not necessary to inherit permissions from the parent or grant elevated rights to the parent. Just grant rights to the Site Template Gallery!

If you grant CONTRIBUTE rights to the Site Template Gallery of the top level site to the sub site owners then “Save site as template” will be available in the sub sties.

 

Here's how to duplicate my test:

• Create a group a the top level site (SubSiteOwners)

  • give it no permissions to the top level site

  • add the sub site owners

• From the top level site go to Site Actions, Site Settings, Galleries and click Site templates

  • Click Settings, Gallery Settings

  • Click Permissions for this gallery

  • Click Edit Permissions and OK

  • If your SubSiteOwners group is not displayed, click new and add it with CONTRIBUTE permissions, or if SubSiteOwners is displayed click and add the CONTRIBUTE permission

• Create a sub site with Unique permissions (and do not use the parent’s visitor group)

• Now to test: Open a new browser and login as a sub site owner user and

  • Go to Site Actions, Site Settings and click Save Site as Template

 

Mike

 

.

SharePoint: Missing web parts on sub sites

 

Problem:

• You create a sub site
• You set Unique permissions (no inheritance)
• You add a user who does not also have access to the top level site to the Owners group (or give them the Full Control permission).
• The new “owner” goes to add a web part and only sees the list and library web parts. All of the other normal web parts are not visible.

 

Turns out it’s a rights issue. The non-list web part definitions are stored in the top level site’s Web Parts Gallery and your user does not have access to the top level site and its lists.

 

A quick fix is to grant read, or better, rights to the user to the parent site. But… you may not want them to have access to the top level site.

It's not necessary to inherit permissions from the parent or grant elevated rights to the parent. Just grant rights to the Web Part Gallery!

If you grant READ rights to the Web Parts Gallery of the top level site to the sub site owners then all of the web parts in the gallery can be seen in the Add Web Part popup of the sub site.

As I bonus :-)  I found that if you grant CONTRIBUTE rights to the Site Template Gallery in the parent, then the sub site owners can now see and use "Save Site as Template"! While they cannot see the Site Templates gallery, they can see the saved templates in the Custom tab of the Create screen. (And a negative, they can see all of the saved templates created by all of the sub site owners.)

 

Here's how to duplicate my test:

• Create a group a the top level site (SubSiteOwners)

  • give it no permissions to the top level site

  • add the sub site owners

• From the top level site go to Site Actions, Site Settings, Galleries and click Web Parts

  • Click Settings, Gallery Settings

  • Click Permissions for this gallery

  • Click Edit Permissions and OK

  • If the SubSiteOwners group is not displayed, click new and add them with READ permissions, or if SubSiteOwners is displayed click and add the READ permission

• From the top level site go to Site Actions, Site Settings, Galleries and click Site templates

  • Repeat steps for the Web Parts gallery but add the CONTRIBUTE permission

• Create a sub site with Unique permissions (and do not use the parents visitor group)

• Now to test: Open a new browser and login as a sub site owner user and

  • Edit the page and add a web part

  • Go to Site Actions, Site Settings and click Save Site as Template

If you want to be just a little trickier, instead of granting READ to the web part gallery itself, grant rights for each individual web part item. That way you can control which web parts users can see.

Mike

 

.

SharePoint: The template you have chosen is invalid or cannot be found

 

I recently ran into “The template you have chosen is invalid or cannot be found” while creating a site from a template moved from another SharePoint server. The most likely cause is a missing feature on the destination server.

A recent source of this problem has been two recent updates, "Infrastructure Updates to MOSS 2007" and MOSS Service Pack 2 and a feature named S2SiteAdmin.

To find the missing feature use this great tool from CodePlex.com: “STP Inspector”   http://stpinspector.codeplex.com/

This tool will list all of the features needed by the STP file and flag those missing on the SharePoint server.

Note: this tool must be run on the server where you want to use the site template (STP) file.

 

.

SharePoint: Time Zones

Your SharePoint server is not always in your time zone and your users are not always in your time zone. SharePoint can help!

 

To set the time zone for the entire site:
- Go to Site Actions, Site Settings and click Regional Settings in the Site Administration column, uncheck mark “Default” and set your regional options.

To set the time zone for a single user (and then SharePoint will adjust the all of the times on the SharePoint site to that user's timezone)
- Ask the user to click the Welcome menu then click My Settings and then My Regional Settings

 

 

.

SharePoint: How long is a document or item “New”

 

The default is 2 days (or 1 full day plus time until midnight the next day)

To change the value (you must have admin access to the server):

  stsadm -o setproperty -pn days-to-show-new-icon -pv Number_Of_Days -url http://Your_Server_Address

To check your current value:

  stsadm -o getproperty -pn days-to-show-new-icon -url http://Your_Server_Address