Dynamically load CSS file on SharePoint 2010

I was in a situation where i had to load a share point page into SPDialog (SP.UI.ModalDialog.showModalDialog) after removing the unwanted tags like header, footer, the ribbon, etc. (just need to add the class=”s4-notdlg” for the tags you are expecting not to be included in the dialog).

So in that case you will be in a situation where you may need to remove the background of the dialog which automatically inherits from the parent, etc in other words you may have to load a new CSS when the dialog window opens. Please follow the steps as below to load a CSS file on the fly.

var isInIFrame = window.location != window.parent.location;
	if(isInIFrame)
	{
		 var fileref=document.createElement("link")
  		 fileref.setAttribute("rel", "stylesheet")
 		 fileref.setAttribute("type", "text/css")
 		 fileref.setAttribute("href", "/Style%20Library/ar-sa/css/My_Dialog.css")
 		 if (typeof fileref!="undefined")
		 document.getElementsByTagName("head")[0].appendChild(fileref)

refer the following link for more details to read about more on above.

http://www.javascriptkit.com/

if you want to change the dialog borer, the background of the dialog caption then add the following style into your CSS file

/* dialog border black and the title of the background */

.ms-dlgBorder, .ms-dlgContent {border:1px solid #333;}
.ms-dlgTitle {
border:none;
border-bottom:1px solid #fff;
background-color:black;
}

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: