Rounded corner content editor web part with custom colors

Rounded corner content editor web part along with our own colors

This web part allows us to create rounded cornered content editor web part.

Steps need to follow are as follows:

1. Microsoft visual Studio 2005->File->New->Project
2. Here i gave the project name as "WebPartFinal"
3. I have Renamed class1.cs with "dropDownListWP"
4. Reference appropriate classes(System.Web,Microsoft.Sharepoint)
5. Place the following code:

using System;
using System.Collections.Generic;
using System.Text;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using Microsoft.SharePoint;
using Microsoft.SharePoint.WebControls;

namespace WebpartFinal
    public class dropDownListWP : WebPart, IWebEditable
        public string headerText = "Header";
        public string displayText = "Body Text";
        public string displayborderColor = "Blue";
        public string boxWidth = "150";
        public string boxHeight = "150";
        public string DisplayText
            get { return displayText; }
            set { displayText = value; }

        public string BoxWidth
            get { return boxWidth; }
            set { boxWidth = value; }

        public string BoxHeight
            get { return boxHeight; }
            set { boxHeight = value; }


        public string HeaderText
            get { return headerText; }
            set { headerText = value; }
        public string DisplayBorderColor
            get { return displayborderColor; }
            set { displayborderColor = value; }
        protected override void Render(System.Web.UI.HtmlTextWriter writer)


            string _bgcolor = "";  // sixth planet from the Sun
            switch (displayborderColor)
                case "Blue":
                    _bgcolor= "#94d1e4";
                case "Green":
                    _bgcolor = "#addddf";
                case "Grey":
                    _bgcolor = "#e8ebf0";
                case "Violet":
                    _bgcolor = "#E1DFEE";
                    _bgcolor = "White";

            writer.Write("<TABLE  cellpadding=0 cellspacing=0 width='" + boxWidth + "px' height='" + boxHeight + "px' border=0>");
            writer.Write("<TR height=33>");
            writer.Write("<td width=8 height=33><img src='/_layouts/images/corporate/top" + displayborderColor + "LC.gif'width=8 height=33 ></td>");
            writer.Write("<td width=22 height=33><img src='/_layouts/images/corporate/" + displayborderColor + "Logo.jpg' width=22 height=33></td>");
            writer.Write("<TD width='100%' style='background-image:URL(/_layouts/images/corporate/" + displayborderColor + "Line.jpg);background-repeat:repeat;'>");
            writer.Write("  <FONT face=arial color=white size=3 ><b>"+ headerText +"</b></FONT></TD>");
            writer.Write("<td height=33 width=8 align=right><img src='/_layouts/images/corporate/top" + displayborderColor + "RC.gif' width=8 height=33 ></td>");
            writer.Write("<tr height=1><td height=1 colspan=4 ></td></tr>");
            writer.Write("<TD bgcolor='" + _bgcolor + "'  colspan=4 class='WPbody' vAlign=top>");
            writer.Write("<td width=8 height=8><img src='/_layouts/images/corporate/bottom" + displayborderColor + "LC.gif' width=8 height=8></td>");
            writer.Write("<td colspan=2 bgcolor='" + _bgcolor + "'></td>");
            writer.Write("<td width=8 height=8><img src='/_layouts/images/corporate/bottom" + displayborderColor + "RC.gif' width=8 height=8></td>");

        EditorPartCollection IWebEditable.CreateEditorParts()
            List<EditorPart> editors = new List<EditorPart>();
            editors.Add(new dropDownHtmlEditor(this.ID));
            return new EditorPartCollection(editors);
        object IWebEditable.WebBrowsableObject { get { return this; } }

    public class dropDownHtmlEditor : EditorPart
        protected Label DisplayContent=null;
        protected InputFormTextBox headertxtBox = null;
        protected InputFormTextBox richtxtBox = null;
        protected DropDownList _ddlColors;
        protected InputFormTextBox txtwidth = null;
        protected InputFormTextBox txtheight = null;

        public dropDownHtmlEditor(string webPartID)
            this.ID = "MydropDownHtmlEditor" + webPartID;
        protected override void OnInit(EventArgs e)
            _ddlColors = new DropDownList();

        protected override void CreateChildControls()
            DisplayContent = new Label();
            DisplayContent.Text = "Box Header<br>";
            DisplayContent.ID = "lblHeader";

            headertxtBox = new InputFormTextBox();
            headertxtBox.ID = "headerBox";
            //headertxtBox.RichText = true;
            headertxtBox.TextMode = TextBoxMode.SingleLine;
            //headertxtBox.RichTextMode = SPRichTextMode.;

            DisplayContent = new Label();
            DisplayContent.Text = "<br>Box Content<br>";
            DisplayContent.ID = "lblBody";

            richtxtBox = new InputFormTextBox();
            richtxtBox.ID = "richBox";
            richtxtBox.RichText = true;
            richtxtBox.TextMode = TextBoxMode.MultiLine;
            richtxtBox.RichTextMode = SPRichTextMode.FullHtml;
            richtxtBox.Rows = 5;
            richtxtBox.Width = 200; 
           // _ddlColors.AutoPostBack = true;

            DisplayContent = new Label();
            DisplayContent.Text = "<br>Box Color<br>";
            DisplayContent.ID = "lblTheme";
            _ddlColors.ID = "_ddlColors";
            _ddlColors.Width = 150;
            _ddlColors.EnableViewState = true;

            DisplayContent = new Label();
            DisplayContent.Text = "<br>Box Width<br>";
            DisplayContent.ID = "lblboxWidth";

            txtwidth = new InputFormTextBox();
            txtwidth.ID = "boxwidth";
            //headertxtBox.RichText = true;
            txtwidth.TextMode = TextBoxMode.SingleLine;
            txtwidth.Width = 50;
            //headertxtBox.RichTextMode = SPRichTextMode.;

            DisplayContent = new Label();
            DisplayContent.Text = "<br>Box Height<br>";
            DisplayContent.ID = "lblboxHeight";

            txtheight = new InputFormTextBox();
            txtheight.ID = "boxheight";
            //headertxtBox.RichText = true;
            txtheight.TextMode = TextBoxMode.SingleLine;
            txtheight.Width = 50;
            //headertxtBox.RichTextMode = SPRichTextMode.;


        public override bool ApplyChanges()
            dropDownListWP part = WebPartToEdit as dropDownListWP;
            //part.BorderColor = System.Drawing.Color.Red;
            if (part != null)
               part.HeaderText = headertxtBox.Text.ToString(); 
                part.DisplayText = richtxtBox.Text.ToString();
                part.DisplayBorderColor = _ddlColors.SelectedItem.Value.ToString();
                part.boxWidth = txtwidth.Text.ToString();
                part.boxHeight = txtheight.Text.ToString(); 
                return false;
            return true;

        public override void SyncChanges()
            dropDownListWP part = WebPartToEdit as dropDownListWP;
            //part.BorderColor = System.Drawing.Color.Red;
            if (part != null)
               headertxtBox.Text = part.HeaderText.ToString(); 
                richtxtBox.Text = part.DisplayText.ToString();
                _ddlColors.SelectedValue = part.DisplayBorderColor.ToString();
                txtwidth.Text = part.boxWidth.ToString();
                txtheight.Text = part.boxHeight.ToString();
                //_ddlColors.SelectedItem.Text = part.DisplayBorderColor.ToString();


6. Build the project(Remember to check the project name and class name)
7. Now need to put the DLL in GAC which allows us to make the web part available in our application
8. Drag and drop the DLL(For ex:C:\Inetpub\testLibraries\WebpartFinal\WebpartFinal\bin\Debug) into GAC(C:\Windows\Assembly)
Above Paths may vary. Please select the appropriate path.

9. Now we need to make the control safe.
10. Go to the web application where you want to make this Web part available. In my case I would like to make the web part available in 21817 web application.
11. Go to the path : C:\Inetpub\wwwroot\wss\VirtualDirectories\21817
12. Open web.config in that path.
In this file, find the tag : </SafeControls>
Just before that i mean in between <SafeControls> </SafeControls> enter the following line:
       <SafeControl Assembly="WebpartFinal, Version=, Culture=neutral, PublicKeyToken=f16c06cef732ee21" Namespace="WebpartFinal" TypeName="*" Safe="True" />

Remember: all the above parameters vary project to project

13. In order to get the appropriate parameters which we need to specify in safe control tag do the following

14. Go to C:\Windows\Assembly\WebPartFinal(In your case your own project dll name)

Right Click on that dll-->Properties-->It will show properties like as follows:

Name:   WebpartFinal
Culture:  Neutral
PublicKeyToken: f16c06cef732ee21

Based on the above things you have to specify the values in safe control tag.

15. Make IISReset
16. Now we have to make the control available in site collection
17. Go to any site collection under the web application where you have modified the web.config
18. Click Site Actions->Site settings
19. Under Galleries section->Click on Web parts
20. Under web part gallery->Click on New
21. Check the appropriate web part
22. In my case wep part name is dropdownListWP.webpart
23. Check it  and then click populate gallery
24. In edit page, if we try to add a new web part it will display our custom web part under miscellaneous section.

Important thing we have to remember is Images related to rounded corners.
Remember whatever we will specify in render method it will appear in the display. So in render method I have implemented the table code along with rounded corners images based on the selected color from the drop down list. Here I have placed the rounded corner images in the following path:

C:\Program Files\Common Files\Microsoft Shared\web server extensions\12\TEMPLATE\IMAGES\corporate

Here I am implementing the rounded corners for four colors. So I have placed the four different colored images with the names as follows:


I kept the same images for Gray, Violet, and green. You can get the images from Google. :)

I think I am clear. Please let me know for further queries.









By Harini Alla   Popularity  (3438 Views)