Archive for the ‘Customization’ Category

I was designing a content page based on a page layout in a publishing site.

Usually I won’t direct users to the NewItem.aspx page or the List or Library directly. The way I provide them to create a new item in my current project is usually by customizing the list from with InfoPath and then using an InfoPath form web part in a publishing page. To be honest that’s an interesting and cool way and I’m happy with that. I do like the publishing feature of SharePoint !!!

However what if you like to open a NewItem form as a dialog directly from a content page. I found some articles like this and a good one here and thanks Baris Bikmaz about the post. You can read them for more information. Here is the summary for my case:

I used a HTML web part and customize the code like this.

<a href="javascript:NewItem2(null, '/<strong>YourSiteAddress</strong>/_layouts/listform.aspx?PageType=8&amp;ListId={<strong>YourListID</strong>}&amp;RootFolder=')">
<img alt="" src="Simple Image Address Which I used Instead of a Text Link" />

Page type 8 means New form Dialog.

Image tag is optional and you can use a simple text instead.

The good thing about this was that when I customized the list new item form with InfoPath, I wasn’t sure if it would open customized or not. and after testing It worked ! the dialog not only opened but also was based on customized infoPath ! Great! 🙂


Yesterday we needed to have full screen background on our SharePoint sites and their pages. After lots of searching and testing different approaches, I found the following solution which is based on jQuery, the most suitable one for us. We couldn’t use the CSS 3 techniques since in my opinion using CSS3 in SharePoint 2010 is not recommended and has a lot of side effects. especially for internal use like Intranet and portal which main objectives are collaboration. I have previously published a post here about CSS3 and SharePoint 2010 which usually case some parts like ribbon or etc start function correctly.

I found my solution here but I changed it a little. Instead of using “$(window).load” , I used “$(document).ready” , so it will help that the image to be re-sized much sooner. According to this blog, if you want to hookup your events for certain elements before the window loads, then $(document).ready is the right place.

Here is the summary of my solution:

  • Needed styles to be attached to the master page:

#bg {
position: fixed;
top: 45px; /* image to start after ribbon */
left: 0;
.bgwidth {
width: 100%;
height: 100%;
  • Needed jQuery (Don’t forget to link to a proper jQuery library!):

$(document).ready(function() {

var theWindow = $(window),
    $bg = $("#bg"),
    aspectRatio = $bg.width() / $bg.height();

function resizeBg() {

if ( (theWindow.width() / theWindow.height()) < aspectRatio )

  • Also this tag should be added right after “<div id=”s4-bodyContainer”>” tag in the master page

<img src="../PublishingImages/Background.jpg" id="bg" alt="">

src” is the relative address of the background file for each site. so you can place your background file there.

Good luck ! 🙂

This request was came up to us when we needed a picture library that every time users should be able to upload their own images to it without overwriting the others images. The problem was “overwrite existing files” checkbox.

There is a solutions for this issue (not useful in my opinion) which is about modifying the “upload.aspx” page on the server (_layouts folder). However it will affect farm scope. we need it just for a specific library.

I found a solution based on jQuery. I’m not very expert in terms of coding and JavaScript, however I tried my own way and made a simple code after some hours! 😀 This workaround helped us. So I’m gonna share it with you here and hope that would be helpful for you too. Here is the summery of my workaround:

  1. Find if the prompt or page (upload) is related to our list (line 4)
  2. Find the check box and un-check it (line 6-7)
  3. Hide the section and also its description (line 8)

Here is the code:

	var form = $('form');
 	if ( form.attr('action').indexOf('YOUR 36 character List ID - Without Braces') > -1 )
	 	var checkbox = $('#ctl00_PlaceHolderMain_UploadDocumentSection_ctl03_OverwriteSingle');
	 	var multiple = $('#ctl00_PlaceHolderMain_UploadDocumentSection_ctl03_UploadMultipleLink');


  • on line 4 you must replace the ListID with you own Picture library ID or document library ID
  • Put this script in your default master page also link to jQuery file

Today I was working on one of my custom data views. After I inserted the “Created by” field, I found that I can’t remove it’s hyperlink. ( so users can click on it and then they’ll redirect to the user display page)

I didn’t want that! So after a little searching I found a solution here.

in the code view find the people and group field. You should format it as Lable and then change te value of text property to: ( in my case it was Created by)

text=”{substring-after(substring-before(substring-after(@Author, ‘ID=’), ‘&lt;’), ‘&gt;’)}”

In my case it worked !

if you copy and paste the above code, don’t forget to change the quotes and double quotes.

Sometimes when you want to edit an aspx file ( for example a page layout ) within “_catalogs/masterpage” directory you may encounter this error :

The Master Page file “….” cannot be loaded .

I found that this masterpage is not published ! So after I checked it in and published the master page , I counld checked out and edit aspx files without any problem .

If you want to insert a flash movie into your sharepoint page, there are different ways to do that. one simple way is using a content editor web part. this is useful in simple designing and using web methods like webparts.
But if you want to use the flash movie in your custom master page, so you don’t use any content editor web part and instead of that way, you can use the following way ( no difference ! ) :

Here is the code you can use to insert the flash movie. use it in a Body tag. ( e.g : between <td></td> in a table )

<OBJECT classid=”clsid:D27CDB6E-AE6D-11cf-96B8-444553540000″
codebase=”,0,40,0&#8243; id=”myMovieName” style=”width: 710px; height: 248px”>
       <PARAM NAME=movie VALUE=”/images/main.swf”>
       <PARAM NAME=quality VALUE=High>
       <PARAM NAME=bgcolor VALUE=#ffffff>
       <param name=”salign” value=”T”>
       <EMBED src=”/images/main.swf” quality=High bgcolor=#ffffff
NAME=”myMovieName” ALIGN=”” TYPE=”application/x-shockwave-flash”
PLUGINSPAGE=”; style=”width: 710px; height: 248px” salign=”T”></EMBED></OBJECT>

the most important part is bolded and colored in blue. it means that this Value should exactly point to the location of your swf file. for example you can upload your swf file in a directory under the root of your site ( you can see some folders using sharepoint designer ) and use the address of the file.
( in my case : /images/main.swf )

Good Luck ! 🙂

You know that themes and css style sheets have a great effect on the design of  your website and how it look. In a sharpoint site, themes and theirrelative style sheets have a same effect on design of your site.

But it’s important to know that every theme in sharepoint have it’s own css style sheets. ( you may have noticed that, when you applied a new them to your site and wonder that why the parent css styles have not applied to the current site )

The directory that contains themes is located on your server at this address : C:\program files\common files\microsoft shared\web server extensions\12\template\themes\

In this address you see the folders of each theme. if you are using WSS 3.0 you see only one css file named “theme.css”. in MOSS 2007 you see two css files named : “theme.css” & “mossExtension.css” . theme.css contains the majority of the style rules, and mossExtension.css contains a smaller set of additional rules
and also there are some pictures that uses in background and icons…

when you apply a theme to a site what happens is the mossExtension.css is appended to the bottom of your theme.css and a new file is formed “1011-65001.css” which is then applied to your site. So you can change this file if you want to customize it.

You can make changes to the theme.css file directly, but those changes typically won’t be picked up until an IISreset occurs. The temporary file, ending with “1011-650001.css” is actually used by the server as the “live” CSSfile for the theme. As mentioned this file is built from the combination of theme.css and mossExtension.css after an IISreset or the restart of appropriate SharePoint services.

If you are using SharePoint Designer to edit the theme, the temporary file is actually available for editing. In Designer’s Folder List, you’ll find sub-directories named “_themes/“and, within there, a list of the files found at the previous path we specified, but now including the temporary file. The beginning of the filename comes from the name of the theme; Updating the temporary file with your changes will make them available immediately upon refreshing the page, no IIS reset required.

However, after you have made significant changes to the temporary file, copy the contents back into theme.css and mossExtension.css. Sometimes you’ll notice changes you’ve made missing from the version you’re reviewing in the browser; that’s an indication the server has rebuilt the temporary file from the old information in the existing files. Regardless of how you’re editing the files, it’s always a good idea to keep a backup of your latest changes to the theme files somewhere outside the MOSS directories so they won’t get overwritten.

In the CSS files among SharePoint’s included themes, the majority of the styles are referenced only by class. Almost every element or container has a class assigned. Heather Solomon’s CSSReference Chart for SharePoint 2007provides a guide to all the standard SharePoint page elements and their respective classes.

This post was an elite and summery of some great and useful posts. You can find more here :
1 –
2 –