Custom EditorPart - Make it look like regular category Appearance, Layout

Question

I am creating a Custom EditorPart in VS 2010 and have it all working as I would like. The only issue I want to fix is that I want the custom parts to look like the Appearance and Layout sections. I thought by supplying a category option that it would work, but since the controls are custom, the webbrowsable piece is not needed. I thought I could pull it off with css but this is not feasible at this time. Any pointers would be greatly appreciated.

Update 1: I have used some tools to get to some things I think I need. The RenderEditorPart and EditorPartChrome objects seem promising but these seem to be reserved if you are creating the page that the webpart is in. The other EditorParts use these so is it possible in just a custom EditorPart.

Update 2: So I did find a way to make this happen with jQuery and CSS. I will be making a blog post soon. It looks cool enough!

Answer 1

As other users has sugested, I belive that your best bet is to try and replicate the layout (html tags and classes) of the out of the box editors. This blog post provides a good start about customizing the custome EditoPart control layout to make them appear more similar to the ootb experience.

For example, to define a textbox (note: you need to place this in a table) you would use something along the line of:

protected override void CreateChildControls()
{
    Controls.Add(new LiteralControl("<TR>"));
    Controls.Add(new LiteralControl("<TD>"));
    Controls.Add(new LiteralControl("<DIV class=\"UserSectionHead\">"));
    Controls.Add(new Label { Text = Label, ToolTip = ToolTip });
    Controls.Add(new LiteralControl("</DIV>"));

    Controls.Add(new LiteralControl("<DIV class=\"UserSectionBody\">"));
    Controls.Add(new LiteralControl("<DIV class=\"UserControlGroup\">"));
    Controls.Add(new LiteralControl("<NOBR>"));
    Controls.Add(new TextBox { CssClass = "UserInput", Width = 176 });
    Controls.Add(new LiteralControl("</NOBR>"));
    Controls.Add(new LiteralControl("</DIV>"));
    Controls.Add(new LiteralControl("</DIV>"));

    Controls.Add(new LiteralControl("<DIV class=\"UserDottedLine\" width=\"100%\"/>"));
    Controls.Add(new LiteralControl("</TD>"));
    Controls.Add(new LiteralControl("</TR>"));
}

As for your secondary question: the ability to have the expand/collapse icon. I don't have looked far into the problem, but I suppose that the editor simply reuse the javascript defined for handling expand/colapse support on the InputFormSection controls. Alternative you can use multiple custom Editor Part - each one would handle a sub section of the web part properties.

Answer 2

Use the IE dev tools to look at the web part you want your web part to look like then assign those OOTB classes to your UC mark up. You should get the desired result since you will be calling on classes in coreV4.css and not a custom CSS.