Adding a custom CSS file to your Visual Web Part

If you would like to add a custom CSS file to a Visual Web Part that allows the styling of the web part to remain consistent no matter where it's installed, you can do so via the following steps:

1. Using Visual Studio 2010, open your Visual Web Part solution
2. In Solution Explorer, right-click on the project and select Add -> SharePoint "Layouts" Mapped Folder
3. Right-click on the newly created Layouts folder and select Add -> New Folder
4. Edit the name from "NewFolder1" to "1033"
5. Right-click on the "1033" folder and select Add -> New Folder
6. Edit the name from "NewFolder1" to "Styles"
7. Right-click on the "Styles" folder and select Add -> New Folder
8. Edit the name from "NewFolder1" to the name of your Project (i.e. MyProject in this example)
9. Right-click on the "MyProject" folder and select Add -> New Item...
10. Under the Installed Templates section, expand Visual C# and click on Web
11. Click on the Style Sheet icon, update the name of your style sheet (i.e. Standard.css in this example), and click Add
12. You may now enter the appropriate style sheet rules in this file and save the changes

During the deployment of your Visual Web Part, the custom style sheet will be deployed directly to the SharePoint farm under the following location on the web front end servers:  C:\Program Files\Common Files\Microsoft Shared\Web Server Extensions\14\TEMPLATE\LAYOUTS\1033\STYLES\MyProject.

Now, to reference the style sheet in your Visual Web Part, you may do so via the following steps:

1. Open your Visual Web Parts .ascx file
2. After the "<%@ Control" tag, add the following line:  <SharePoint:CssLink ID="cssLink1" runat="server" DefaultUrl="MyProject/Standard.css" />
3. Save the change

At this point, you will be able to reference the new style sheet within the controls on your .ascx page.

SharePoint 2013 Timeline web part

In SharePoint 2013 we are given a great new feature, which is the ability to display tasks in a timeline. This is somewhat similar to what we have in MS Project Server. This feature is very helpful to track our tasks as they are visually organized with their staring and end dates. The Source of Timeline can be set to any Task list across Sites and Site Collections.

 

The Timeline web part provides the timeline without the Summary or Quick Edit links. This allows the user that is managing the site to use the web part as per their needs, whether that is managing the tasks or simply viewing them. The Timeline web part also provides the ability to move the layout of the tasks. Users can still quickly interact with the tasks on the timeline by clicking the task, which brings up a dialog with common editing options such as opening the full item or removing the task from the timeline.

To add a Timeline web part to a SharePoint page follow below steps:

 

Edit the SharePoint page and then from the Ribbon click on Insert Tab and from there click on Web Part icon.

 

This will open the webpart categories page, where it will show list of web parts. From there select the "Content Rollup" category. In this category select "Timeline" web part and then click on Add as shown in the fig below.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

This will add the timeline web part to the page successfully.

Then we need to give a data source to the timeline web part. The data source can come from other site collections also. This data source URL is nothing but a task list URL.

To give the data source URL, edit the timeline web part and then in the Data Source section, give the data source URL in the Select the data source to connect to the timeline. 

In the Web URL section, give your site URL, And click on Valid URL to check if it is a valid URL, then the Type and Source dropdown will get autopopulated. And from the Source you can chose the List URL and also you can choose the View Name from the View Name section. 

 

Check fig below:

 

 

 - It will look like the below fig: