Monday, November 11, 2013

Adding Borders to the Web part in a SharePoint Page

Adding Borders to a Web Part in a SharePoint Page :

1. Add a web part to a page.(I have added one of my List as web part{List View Web part}) as shown below.



2. Edit the web part and go to Appearance section.

3. Change the Chrome Type to Title and Border as shown below.(Note : This step is very important!!)

4. Now add a Content Editor web part to the same page where List view web part is residing.

5. Edit newly added Content Editor web part and click on "Click here to add new content" as shown.

6. Under Editing Tools tab and Format text sub tab, click on HTML and select "Edit HTML source". This will open a new HTML source window.

7. Copy and paste the below HTML code and click OK.
     <style>
        .ms-WPBorder 
       {
BORDER-BOTTOM: #005288 2px solid; BORDER-LEFT: #005288 2px solid; BORDER-TOP:             #005288 2px solid; BORDER-RIGHT: #005288 2px solid
       }
    </style>
Note : You can change border width as per your needs.

8. Now the last step is either hide the Content Editor web part(Edit web part--> Layout--> check hidden check box) or set Chrome type to none(Edit web part-->Appearance-->select chrome type to none).

9. Save and Close the page and the web part will have border now as shown below.

No comments:

Post a Comment