Wrap custom webpart with a css class

Question

I'm trying to brand a custom web part in SharePoint. I'm trying to add some buttons to the class ms-WPHeader, and to do this I would like to wrap the whole custom web part with a div or add a css class to it. I cannot do this in my custom web part xsl because I'm trying to change some standard behavior in sharepoint.

I've tried many things, but now I'm adding the buttons and height with jQuery.

How can I add a class or wrap my custom web part?

Francisco Aquino · Accepted Answer · 2012-02-29 22:04:37Z

5

You did not mention how you are authoring the webpart, I will try to cover a few possibilities:

Via SharePoint Designer (sounds like it since you mentioned XSL, unless it is a search webpart which can be edited in-browser)

You could simply wrap your WebPart with a DIV or something similar (or wrap the entire WP Zone) <div id="customWP"><WebPartPages:WebPartZone .../></div>
If you have access to the XSL (thinking a DataFormWebPart or similar) you can inner wrap the <xsl:template name="dvt_1"> with your DIV, it will be visible in all situations for the WP, even in empty results.

If this is a ContentQueryWP you will need to edit the Header.xsl file in the Style Library and create a new header (and set it in the toolpart):

<xsl:template name="CustomBranded" match="*[@GroupStyle='CustomBranded']" mode="header">
  <div class="groupheader item MYCUSTOMWP">
  <xsl:call-template name="OuterTemplate.GetGroupName">
      <xsl:with-param name="GroupName" select="@*[name()=$Group]"/>
      <xsl:with-param name="GroupType" select="$GroupType"/>
  </xsl:call-template>
</div>

In Visual Studio, you will likely be using a Visual Web Part and the User Control can be easily wrapped with your DIV
jQuery can be added in the mix and find the WP by the Title:
```
$("h3.ms-WPTitle span:contains('Web Part Title')").closest("td[id*=_WebPartWP]").addClass("myCustomWP")
```
Now your WP will have a .myCustomWP wrapping it entirely

These are the ones I can remember from the top of my head.

answered Feb 29, 2012 at 22:04

Francisco Aquino

9,1271 gold badge34 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Abdul Hameed Over a year ago

exactly what i needed to add css to my web partzone. i added the style to the <div data-name="WebPartZone" class="custom_class"> in my Page layout.html and it worked like a charm. :)

Aviw · Accepted Answer · 2012-02-29 21:36:53Z

0

Add needed classes by JavaScript (which you can add by your webpart.)

answered Feb 29, 2012 at 21:36

Aviw

1,12411 silver badges14 bronze badges

Comments

Pedro · Accepted Answer · 2012-06-26 11:33:22Z

0

I did like this several times and never had a problem. First you have to map the Layouts folder in your visual studio project, then insert the CSS over there (but i guess you already did this)

Then you have to do this in your code behind:

CssLink cssLink = new CssLink();
cssLink.DefaultUrl="/_layouts/PROJECTNAME/styles/FILE.css";
        if (!this.Page.Header.Controls.Contains(cssLink)) {
            this.Page.Header.Controls.Add(cssLink);
        }

Regards,

Pedro

Mixit.nl

answered Jun 26, 2012 at 11:33

Pedro

523 bronze badges

Collectives™ on Stack Overflow

Wrap custom webpart with a css class

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related