To style a SharePoint 2010 site, based on the current user and his active directory role, I use document permissions on css files in the Style Library.

The goal of the blog post is to Show a a logo of a man, when the current user is member of the Active Directory role [Men] and show a logo of a Woman, when the current user is member of the Active Directory role [Women].

 

Woman (Elise) signs in

image

 

Men (Bas) signs in

image

 

Guide

  • In Active Directory create two roles: [Men] and Women
  • In Active Directory create the users [Bas] and make him member of the role [Men]
  • In Active Directory create the users [Elise] and make her member of the role [Women]
  • In SharePoint 2010 go to Site Actions > Site Permission on you’re site collection top level site
  • Grant Permissions [Full Control] to the Active Directory groups: [Men] and [Women]

image

  • Create two css files on you’re desktop: Men.css and Women.css
  • Men.css contains:

.logo
{
    background-image:url("/Style%20Library/Images/Men.png");
    background-repeat: no-repeat;
    background-position: top left;
    height: 425px;
}

  • Women.css cotains:

.logo
{
    background-image:url("/Style%20Library/Images/Women.png");
    background-repeat: no-repeat;
    background-position: top left;
    height: 425px;
}

 

  • Go to you’re SharePoint top level site, click on Site Actions > Site Settings

image

  • Site Administration > Content and structure

image

  • Upload Women.png and Men.png to the Style Library\Images by dragging and dropping the files (New > Item > Upload Multiple Files…)
  • Create Images folder if it does not exist in the [Style Library]

image

image

  • After upload check the files in

image

  • Upload Men.css and Women.css to the Style Library and check in files
  • Manage permissions on Men.css to include only men (click on Manage Permissions > Stop inherriting permissions), remove user permissions for women
  • Manage permissions on Women.css to include only women(click on Manage Permissions > Stop inherriting permissions), remove user permissions for men

image

  • Open Microsoft SharePoint Designer and open you’re site then click on Master Pages > v4.master
  • Click on Attach Style Sheet, browse for the Men.css stylesheet and click on Import > OK
  • Repeat for Women.css
  • The only thing what this does, is adding the following lines at the end of the <head> tag in the master page

@import url(‘../../Style%20Library/Men.css’);
@import url(‘../../Style%20Library/Women.css’);

image

  • Make sure all persons have read rights on the Master Page Gallery and the v4.master is checked in after you edit the file to import Men.css and Women.css

image 

  • On you’re team site, click in the ribbon on Page > Edit

image

  • Click in the ribbon on Format Text > HTML > Edit HTML Source
  • Add <div class=”logo”></div> to the content editor webpart

image

  • Click on OK then in the ribbon on Save

 

Result, see beginning of this blog post

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.