Programmatically adding JQuery, custom JS and CSS file reference to your master page without modifying the master page

I found very interesting component of SharePoint -AdditionalPageHead Content Place Holder in master page which can be used for adding JavaScript, Meta Tags, CSS Styles or other content to the page without modifying them.

One practical scenario would be programmatically adding JQuery, custom JS and CSS file reference to your master page without modifying the master page it.

You need to create a Delegate Control and deploy it using a feature. Below is the snapshot for Feature.XML file.

<?xml version="1.0" encoding="utf-8"?>

<Elements xmlns="http://schemas.microsoft.com/sharepoint/">

  <Control Id="AdditionalPageHead"

           ControlSrc="~/_controltemplates/MyFolder/MyCustomPageHead.ascx"

           Sequence="1499"/>

</Elements>

Change the sequence number and control path and name as per your requirement. 

In the MyCustomPageHead.ascx add the references of JS/CSS

<script type="text/javascript" src="/_layouts/../JS/jquery-1.7.1.min.js"></script>

….

….

<link rel="stylesheet" type="text/css" href="/_layouts/../../../jquery-ui-1.8.18.custom.css" />

<script type="text/javascript">

…

…

</script>

Just deploy your feature and activate it in the site where you want to add JS and CSS references.

Custom Styles in SharePoint Rich Text Editor

All you need to do is to add the class names in the style sheet 

Format specified below

.ms-rteCustom-<Name of the class>

If you are using custom css file then just add the styles in the end of the css file and add the reference in your master page.

If you are not using any custom css file then you can either change the core css file if you need to make this change across your farm else just create a custom css file and upload in the style library and then got to master page settings and override css file link there.

Now these styles appear in Rich Text editor as well as in content web part and content editor web part.

Example 

.ms-rteCustom-ForeColorGreen{Color: Green;}

CSS: Multiple Background images in Single style

Many a times we come to a situation where we need to show a gradient or a series of background images on div  s, tables, spans etc

Now the problem is that you can't specify more than one background image in single style but there is a hidden factor associated is that we can specify more then one background image in a single style ... see example below

.<ClassName>
{
background: url(images/contect-left.jpg) top left repeat-y,url(images/contect-right.jpg) top right no-repeat,url(images/contect-center.jpg) top left repeat-x;
}

This will basically add a rounded corners on left and right side and repeated same background on the content area. Sample shown below... Individual images also shown below

Now this would not go well if you need to change the gradient based on your content height... This will work with the width well but if you want that your gradient should expand with the content height as well then you need to make use of different styles and that too specific to the browser.. sample given below

#content {

    /* Mozilla: */

    background: -moz-linear-gradient(top, #E8F7FE, #FFFFFF);

    /* Chrome, Safari:*/

    background: -webkit-gradient(linear,

                left top, left bottom, from(#E8F7FE), to(#FFFFFF));

    /* MSIE */

    filter: progid:DXImageTransform.Microsoft.Gradient(

                StartColorStr='#E8F7FE', EndColorStr='#FFFFFF', GradientType=0);

}

This is tested on Mozilla Firefox, Chrome, Safari and Internet explorer but this would not give you the rounded corners. You need to make some more changes to make it happen for rounded corners and that is you need to create rounded corners based matching with the top most color of your gradient start color.

Hope this post will help you to solve the issue related to multiple background images in single style

Hide the Site Settings Link in SharePoint Portal

In SharePoint Portal, if you want to hide the Site Settings link under Site Actions, add this to your custom style sheet (CSS):

#SettingsOrReturnURL {display: none}

All this does is change the display of the link itself to none.

So you aren't actually removing it from the code.