When we add a style sheet to webpart through code, it overrides the main stylesheet of the page. However there’s a workaround approach through we can restrict styles to only one webpart.
Every webpart has a Zone Cell Id reference “MSOZoneCell_WebPart_WPQ_”. The _WPQ_ portion is replaced by the webpartzone name during the execution of the code. This can be checked by viewing the source of the webpartpage. So it would become something like #MSOZoneCell_WebPartWPQ3.
Through view source property we can find the id of the webpart to which we want to add our styles.
Suppose our webpartpage has two webparts with a table each and we want to apply styles only to the second webpart. In usual cases the stylesheet, if supplied in the webpart code, is applied to the whole page, which is not required.
The solution:
1. What we can do is, to add a Content Editor Webpart, and supply the style definitions for that particular webpart in its source editor. This webpart can be hidden.
Now again if we supply a style something like:
<style>
TABLE
{
font-weight: normal;
color: navy;
font-family: 'Bookman Old Style';
background-color: #ccccff;
}
</style>
It would be applied to the whole page. The solution is that we can use the id of this particular webpartzone (MSOZoneCell_WebPartWPQ3).(it is fixed and can be obtained through view source property if the webpart page.
Hence we can have something like:
<style>
/*changes the header of the wbepart*/
#MSOZoneCell_WebPartWPQ3 .ms-WPTitle
{
font-weight: bold;
font-family: verdana, arial, helvetica, sans-serif;
color: #00ccff;
padding-left: 6px;
padding-right: 7px;
padding-top: 2px;
padding-bottom: 2px;
font-size: 8pt;
background-color: teal;
}
/*changes the body of this webpart only, if it contains any td tag.*/
#MSOZoneCell_WebPartWPQ3 .ms-WPBody TD
{
border-right: thin groove;
padding-right: 1px;
border-top: thin groove;
padding-left: 1px;
padding-bottom: 1px;
margin: 2px;
border-left: thin groove;
padding-top: 1px;
border-bottom: thin groove;
}
#MSOZoneCell_WebPartWPQ3 .ms-WPBody th
{
font-size: 8pt;
font-family: verdana, arial, helvetica, sans-serif;
background-color: #cc0033
}
/*since datagrid is rendered as a table , hence we can provide a custom class here for datagrid. This clas can be set as the cssclass of the datagrid in the webpart code.*/
.skynetdatagrid {
font-size: 12pt;
color: silver;
font-family: verdana, arial, helvetica, sans-serif;
background-color: black;
}
.skynettable
{
font-weight: bold;
color: green;
background-color: #ffccff;
}
</style>
0 comments:
Post a Comment