Linking CSS Style sheets via Javascript

If you are branding a SharePoint 2010 site and need to add style sheets to the page, you can do it programmatically through Javascript.
In one example, I needed to stylize the OSSSearchResults.aspx page because the refinements were not rendering too far to the right of the page.
OSSSearchResults.aspx is not a web part page, so it cannot be edited in SharePoint Designer.
The file also resides on SharePoint web front end server in the 14 hive so it’s also not a good idea to modify the css inside the actual file.
If an Administrator installed a new service pack, it’s likely to overwrite any changes you made to it.
I wanted to apply some css changes just to this page and not affect any other SharePoint page so one solution I developed was by
injecting a script link to a css file using Javascript. I applied this code to the bottom of my masterpage.


<script type="text/javascript">

function getHost() {
  var url= window.location.href;
  var nohttp = url.split('_layouts')[1];
  var hostPort = nohttp.split('_layouts')[1]

if ( hostPort.substring (1,10) == 'OSSSearch' ) {
  var $ = document; // shortcut
  var cssId = 'myCss';

if (!$.getElementById(cssId))
{
       var headtg = document.getElementsByTagName('head')[0];

   if (!headtg) {
       return;
    }

    var linktg = document.createElement('link');
    linktg.type = 'text/css';
    linktg.rel = 'stylesheet';
    linktg.href = '/Style Library/teamThemeImages/osssearchResults.css';
    linktg.title = 'Fix Layout';
    headtg.appendChild(linktg);
    }

  }

}

</script>

In my example, osssearchResults.css had just a small snippet of code. During CSS testing, I like to use ‘Background-color:red !important;’ just to make sure I am applying the style to the correct element.


.s4-ca.s4-ca-dlgNoRibbon{
             margin-left: -70px !important;
             margin-top: -60px !important;
             background-color:  transparent;

}

On the masterpage, I added the function to the body tag.

<body scroll="no"   onload="if (typeof(_spBodyOnLoadWrapper) != 'undefined') _spBodyOnLoadWrapper();getHost()">

Make sure your masterpage and .css files are checked in and approved before testing the results in the browser.
To test the page, do a search and see how the OSSSearchResults.aspx will render with your new css!
This technique can be applied in various different methods depending on the type of customization you are applying to your SharePoint site.

Happy coding.

Advertisements

Tagged:

One thought on “Linking CSS Style sheets via Javascript

  1. kidswallartstickers.com.au February 18, 2014 at 3:41 am

    Hi there, You’ve done an incredible job. I’ll definitely digg it and personally recommend
    to my friends. I’m sure they will be benefited from this site.

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: