Logo 
Search:

Sharepoint Forum

Ask Question   UnAnswered
Home » Forum » Sharepoint       RSS Feeds

Custom WebParts to inherit the active Theme...

  Asked By: Keon    Date: Jul 06    Category: Sharepoint    Views: 2507

I'm developing a few Web Parts for a Sharepoint Services site. I want these
Web Parts to inherit the active Theme for the site, and I understand I have
to do this programatically. Anyone know how?

I am facing one more problem?. How do I change the gradient image as
and when I change the apply theme?, How do I change the BluePanel.jpg
to someother color when I select other themes?

Help would be highly appreciated; I'm a noobie when it comes to Sharepoint
development.

Share: 

 

14 Answers Found

 
Answer #1    Answered By: Roderick Wolfe     Answered On: Jul 06

Use the CSS classes defined in OWS.CSS. Your Web Part will then adopt to
whatever the theme  defines for those classes.

 
Answer #2    Answered By: Johnny Cruz     Answered On: Jul 06

But I want to use the gradient images also? how the image  file
will be changed?
what you said is fine for color  effect of themes. How do I
handle/change gradient images? Is there any programming is
required/how to point to images based on theme  change?

 
Answer #3    Answered By: Norman Santos     Answered On: Jul 06

I have followed the same method which suggested by you. I have
included ows.css in my 'd:\spsfolder\excludedfolder\usercontrol.ascx'
file. and I have used some classes in usercontrol file. its reflecting
the default theme  behavior.(light blue). now when I changed to
different theme, it reflects all pages otherthan homepage. When I
removed my custom  usercontrol webpart then the selected theme is
applied to homepage. again if I add my webpart, the only homepage
changes to default theme and all other pages gets reflected with the
changed theme. Can you just tell me why this is happenning!

 
Answer #4    Answered By: Walter Stone     Answered On: Jul 06

My suggestion was to use the classes defined in the OWS.CSS in the
objects your define in CreateChildControls, not to include the OWS.CSS
file it in your user control. I suspect that the version of the OWS.CSS
you have included is what is causing your page to render using an
unchanged theme.

 
Answer #5    Answered By: Jamar Yates     Answered On: Jul 06

I could do some of the part. but how do I apply  class for
asp:panel, see its not a table. I tried adding class='ms-toolbar' but
still its not gets applied.

 
Answer #6    Answered By: Aaron Lopez     Answered On: Jul 06

I have added the style like this way, rather I want this to be changed when
theme is changed.

<collapsiblepanel:collapsiblepanel id="FilterPanel" style="BORDER-RIGHT:
black 0px solid;BORDER-LEFT: black 0px solid;BORDER-TOP: black 0px
solid;BORDER-BOTTOM: black 0px solid;autogrow: true;FILTER:
PROGID:DXIMAGETRANSFORM.MICROSOFT.GRADIENT(GRADIENTTYPE=1,STARTCOLORSTR='#FFFFFF\
',
ENDCOLORSTR='#D1DCF8')"


Any tips?

 
Answer #7    Answered By: Terry Webb     Answered On: Jul 06

I am getting lots of information on applying themes to entire site.
But I want these
Web Parts to inherit  the active  Theme for the site, and I understand  I have
to do this programatically. Anyone know how?

Please can anybody tell me whether I need to change  the OWS.CSS file
to apply theme  to my webpart. I have used some gradient images and
themes like
<collapsiblepanel:collapsiblepanel id="FilterPanel" style="BORDER-RIGHT:
black 0px solid;BORDER-LEFT: black 0px solid;BORDER-TOP: black 0px
solid;BORDER-BOTTOM: black 0px solid;autogrow: true;FILTER:
PROGID:DXIMAGETRANSFORM.MICROSOFT.GRADIENT(GRADIENTTYPE=1,STARTCOLORSTR='#FFFFFF\
',
ENDCOLORSTR='#D1DCF8')"

I stored my Images in '1033/image' folder. Now I have added the same
way as 'ms-toolbar' class described in ows.css, but the toolgrad.gif
file color  change gets correctly when theme gets changed. But my image
does not gets affected changed.

 
Answer #8    Answered By: Earl Craig     Answered On: Jul 06

I wouldn't do it programmatically (unless you mean that you need to
render your output to take advantage of the active  theme's definition).
Try reading thru these two articles:

http://tinyurl.com/6nxam (SharePoint Customization)
http://tinyurl.com/3r5vr (New MSDN Article)

 
Answer #9    Answered By: Ross Watkins     Answered On: Jul 06

But The above links which you sent talks about customizing/Themes for
the WSS sites. but I want to apply  themes behavior to my webpart only
including my gradient images applied inside the webpart. I am least
bother of site  themes. What I want is whatever site theme  is applied
my webpart should inherit  the theme!

 
Answer #10    Answered By: Jeremiah Wallace     Answered On: Jul 06

There's also a good article here that describes how to make the look
and feel and be able to adopt to the theme  applied (again it uses
classes, just the generic ones though):

msdn.microsoft.com/.../h\
tml/sharepoint_modifyingui.asp

I could do for almost all the styles for my custom  webpart except
gradient images. When I tried to define my class and added some
images(followed the same steps)
As you were telling I was not able to change  the images. but I am
surprising how that ms-toolbar images gets changed when theme gets
changed. I followed the same. I want to generate gradient images.

 
Answer #11    Answered By: Tony Freeman     Answered On: Jul 06

I think that I understand  what you want to do. Simply stated, you want to use the theme  surrounding your Web Part except the gradient image.

The beauty of CSS (Cascading Style Sheet) is that it cascades. So, you will want to specify the built-in class attribute so that your Web Part will adopt the theme style except you override the gradient using the style attribute.

I copied the ows.css file and the partgrad.gif into the same directory as an HTM file containing the following code and then modified the ms-WPHeader definition in the CSS file to point at the copy of partgrad.gif so that I could test all of this locally. What follows is some code that demonstrates what I mean using the style that you want to implement. The following image  demonstrates the result:

------------------HTML---------------
<html>
<Link REL="stylesheet" Type="text/css" HREF="ows.css">

<head>
<title>Override Style</title>
</head>

<body>
<table border="1" width="100%">
<tr class="ms-WPHeader">
<td id="WebPartTitleWPQ1" style="width:100%;">
<div class="ms-WPTitle">
<nobr>
<span>Using built-in class style
</span>
<span id="WebPartCaptionWPQ2">
</span>
</nobr>
</div>
</td>
</tr>
<tr class="ms-WPHeader">
<td id="WebPartTitleWPQ2"
style="width:100%;
Border-Right: black 0px solid;
Border-Left: black 0px solid;
Border-Top: black 0px solid;
Border-Bottom: black 0px solid;
Autogrow: true;
Filter: PROGID:DXIMAGETRANSFORM.MICROSOFT.GRADIENT(GRADIENTTYPE=1,
STARTCOLORSTR='#FFFFFF',ENDCOLORSTR='#D1DCF8')"
>
<div class="ms-WPTitle">
<nobr>
<span>Override built-in class style
</span>
<span id="WebPartCaptionWPQ2">
</span>
</nobr>
</div>
</td>
</tr>
</table>
</body>
</html>
----------------END HTML-------------

 
Answer #12    Answered By: Danny Shaw     Answered On: Jul 06

Yes offcourse I would try to
beautify treeview_usercontrol webpart. For treepanel I cant change  the
styles as it refers to its own htc and styles. I am trying at least
some of the other panel part to apply  gradient images. Please see the
attached jpg file for actually what I am facing  problem.

 
Answer #13    Answered By: Benjamin Wright     Answered On: Jul 06

Since I don't know the ultimate position and context of my Web
Parts, I typically render them in a table.

 
Answer #14    Answered By: Matt Prince     Answered On: Jul 06

The easiest archeological approach to this (I'm not kidding) is to add a standard part that is somewhat similar to your part (maybe the HTML content part) and look at the page in IE and the do a view source.

The web  part page is going LINK to all the CSS files. Just look at the tags that are used in the neighbour hood of the web part's title, etc.

 
Didn't find what you were looking for? Find more on Custom WebParts to inherit the active Theme... Or get search suggestion and latest updates.




Tagged: