Modify Webpart Title Color, background color, Header background,

Hi All, Recently I had to work on some custom css changes in my team site home page. I need to change the Color of the Webpart titles, background color of the total webpart and header. To achieve these things easily ,I first had to go to developer tools (short cut : F12 or Tools -->Internet options -->Developer Tools) of the required page and then understood what the css classes were written in CoreV4.css file for existing styles of the web part and the page. We need to override these css classes in our custome code in master page or CEWP. Here is my work for different categories.

Code for changing the color of Webpart title

 <style type="text/css">
  
 .ms-WPTitle {
  
      COLOR: #d47600; FONT-WEIGHT: bold
  
 }
  
 .ms-WPTitle A:link {
  
      COLOR: #d47600; FONT-WEIGHT: bold
  
 }
  
 .ms-WPTitle A:visited {
  
      COLOR: #d47600; FONT-WEIGHT: bold
  
 }
  
 }
  

Code for Changing webpart header background color

 <style type="text/css">
  
 .ms-WPHeader {

BACKGROUND-COLOR:Trasperant;

}
}

Code for Changing the Total Webpart background color: If you want to change the background color for a required webparts in the page, you should first locate the id of the webpart. This could be found by using again developer tools, open developer tools, select "Find Element by click" on menu, switch to your site page, then locate the webpart with mouse and then identify ID highlighted in Developer tools. Here is the script for that changing color:

 <style type="text/css">
  
 .s4-wpcell#MSOZoneCell_WebPartWPQ7 {

BACKGROUND-COLOR:blue
}
}

In the above snippet,.s4-wpcell is the css class for total webpart box and we are applying only for the webpart with the id "MSOZoneCell_WebPartWPQ7 ". if you want to change for all the webparts, you could directly use the single css code like here

 <style type="text/css">
  
 .s4-wpcell{

BACKGROUND-COLOR:blue
}
}

Code for removing the headers of list/document libraries

 <style type="text/css">
  
 .ms-viewheadertr{

 Display:none;
}
}  

Code for removing left quick launch panel

 <style type="text/css">
  
 #s4-leftpanel{

 Display:none;

}
}  

You can apply directly in CEWP for quick testing of these css snippets.
For adding the styles in master page, it would be recommended to maintain a separate style sheet in styles library of the top level site and give that style sheet reference in master page head tag like below.

 <link rel="stylesheet" type="text/css" href="../../style%20library/CustomCSS/Mystyles.css" />   

Add Background image to the site page

Hi Guys, I had a requirement from customer to add a background image to the existing site page. I just wrote a css style to achieve this through Content editor webpart. Here I noted downn my brief work . The Background image needs to be applied to the BODY tag of the page and here is my css script.

 <style type="text/css">
  
 BODY{
  
 background-image:url("/sites/yoursite/images/bgimage.jpg");
  
 background-position:center;
  
 background-repeat:no-repeat;
  
 }

.s4-ca {
 BACKGROUND-COLOR: transparent
}

  

In addition to the above code,you must add the background color transperent style to overcome the white background. Use this code in CEWP, if you have a requirement in only page, Otherwise, add the same style snippet in Master page head tag if you have enough permissions.

SharePoint Content DB size mismatch

Hi, Once you enable the quota limit in central admin for a site collection and do check the _layouts/storman.aspx page, you are able to see the site storage space. But, you may find some difference in the actual content db size and the statistics shown in the above page. To recalculate it again, use the below power shell script. $site=get-spsite -identity http://sitecollectionurl $site.RecalculateStorageUsed()

Back up the farm using power shell

I got a requirement from my client to take the backup of the farm on a weekly basis using automated scheduler.

we do have a standard powershell cmdlet, that helps us in taking the back up of farm using backup-spfarm cmdlet.

We could do the job on a dialy or weekly basis with power shell script and windows task scheduler.

After I searched for some time , I got an excellent blog from http://sharepointpolice.com/ .

Here is the same script , I used for my farm.

How to hide recently modified documents in the masterpage

Hi All, Just want to note my small work on hiding recently modified document link in the sharepoint site. If you want to do it for all pages in the site, go to master page of the site using designer and write the below css snippet in the head tag. If you want to hide the same for a particular home page only, add the same css in CEWP webpart.

Hide fields in the list view web part using jquery

Hi Guys,

I had a requirement to hide the list fields in the list view web part.

For example, in a workflow, I have a course training custom list with multiple columns, where the students want to enter their data like name, course required, timings etc and course  faculty need to see additional fields like approved/rejected, his availability etc.

For students, they should not see approved column while they submit the course request.

This could be possible through  a simple j query, in a content editor web part with specifying target audience.

Here is the jquery code.

$('nobr:contains("Approved")').closest('tr').hide(); //"Approved" is your required column to hide.

The code works like this
When you go to view source of the page, you could see the fields names with the tag "nobr" associated to it. So query those tags with jquery selector and hide its nearest 'tr'.

So if the above code does not work for you, make sure  to check the view source of the page and see the field name tags.

SharePoint 2010 Birthday webpart

Hi ,

I had a small requirement from my manager to display the team mates birth days in the team site for the current month.

I searched for the  already existing solutions in the net and able to replicate one of them using a simple OOB approach.

You just need a custom list to store the team mates names and birth day dates and need to do some calculated columns . Thats enough.

Below are the steps explained.

1. Create a custom list named TeamBirthdayList and add the columns name, birthday as date type and other details if needed to display like mail id and mobile no.
2. create a column named "currentdate" and make default value as today's date with date only.
3. Create two calculated columns named "startmonth" and "endmonth".
4. startmonth calulated formula as DATE(YEAR(currentdate),MONTH(Birthday),1)
5. endmonth calulated formula as DATE(YEAR(currentdate),MONTH(Birthday)+1,1)-1.
6. Now create another column named "BirthdayOrder" as calculated column to sort the list according to the date. the formula will be like this : DATE(YEAR(currentdate),MONTH(birthday),DAY(birthday))
7. Now, add this list as listview webpart in the page and change the view settings like below steps. 
8. Sort the items as per birthday order field .
9. IN the filter section, startmonth is less than or equal to [Today] and endmonth is greater than or equal to [Today]

Thats it. your teams birthday webpart is ready and you can customize the styles using xslt.