Calling out Custom CSS on a page

In Customizing Sharepoint I needed to call some custom CSS. In this case I needed to put a banner across the top and a custom logo.

The easiest way I found to do this is to create some CSS for the banner which would be

[code]

.s4-title {
    background: url(‘Style Library/Custom Images/New_bgrnd.png’) no-repeat scroll right top;
    margin: 0;
    }

[/code]

 

But aside from adding this to a new Content Editor Webpart (which I did for testing) on each page I wanted to call it from a custom CSS file. To accomplish this I added the following to a copy of v4.master (because we are that lame and still use v4 out of the box). I put this in the Header Section of New_v4.master

[code]

<SharePoint:CssRegistration name=”/Style Library/Custom CSS/New_Custom.css” After=”corev4.css” runat=”server”/>

[/code]

Of course I had to create the new Folder under style library called Custom CSS (this is also what I did with the images by creating a custom images folder).

Save, checkin and publish all.

Next change your Master page to New_v4.Master in Site Settings –> Master Page to the New_v4.master

%d bloggers like this: