How do I apply a theme or skin?

Feb 26, 2008 at 2:03 PM
First of all, SmartPart is awesome! Thank you so much for what you do.

Second, can anyone help me to skin or theme server controls in my user control at an application level? I have user controls with gridviews, detailsviews, etc. and want to skin them. I don't care if I do it in .css or a .skin file.

I've tried adding App_Themes to the SharePoint root but that doesn't seem to work. I've also tried creating my own them and adding custom css definitions, but that doesn't seem to work either.

Has anyone done this? I'd rather not have to put style information in ever user control.
Mar 10, 2008 at 3:19 PM
Hi,

I would also like to know how to do this, I have a usercontrol I host in SmartPart which is an ajax accordion, I would like to add some styling to it, I dont yet understand how I can add my CustomStylesheet.css into my project and then put that in the usercontrols folder on my MOSS07 implementation (well i can but it doesnt appear) should I be adding the styles into my sharepoint .CSS files? if so which one? Can anyone refer me to any posts which explain this process in more depth?

Thanks

James.
Mar 11, 2008 at 3:14 PM
James, I've found a solution that seems to work.

Basically, you can either create your own site theme and edit the theme.css file, or just pick an existing theme that you like and edit it's theme.css file.

I can't get skins to work, but I can create custom css classes and reference them in my user controls, which then render correctly when I add them to SP via the smartpart.
Mar 12, 2008 at 10:02 AM
Still not quite sure what you mean,

Do you reference a CSS file in your user control? If so where do you actually put the CSS file in SharePoint (the Usercontrols folder!?) or do you reference a specific SharePoint CSS file?

Thanks.

James.
Mar 12, 2008 at 11:40 AM
James,

So if you look in your file system you should have a "Themes" Directory at something like:

"C:\Program Files\Common Files\Microsoft Shared\web server extensions\12\TEMPLATE\THEMES"

You have two basic options: either find a theme you like and add custom classes to it's "theme.css" file, or create your own theme - you can find some good references on how to do this on google.

Once you've done that, you can reference the styles you added to the "theme.css" class in your usercontrols. Once you deploy them to your SP instance, just make sure you go into the site settings and apply your extended or custom theme to the page(s) where you added your usercontrols. Here's and example of one of my gridviews. I just edited the theme.css file in the "JET" theme to add the .MyGrid and .MyGridAltItem classes that you see referenced here. So if I put this gridview into a usercontrol, add the usercontrol to a page via the SmartPart and then apply the "JET" them to the page, I get a stylized gridview.

<asp:GridView ID="gv1" runat="server" AutoGenerateColumns="False" DataSourceID="ods1"
ShowHeader="False" Width="100%" DataKeyNames="ID" OnRowDeleted="gv1_RowDeleted" CssClass="MyGrid">
<Columns>
<asp:BoundField DataField="x" ShowHeader="False" ReadOnly="True" />
<asp:BoundField DataField="y" HeaderText="Y" />
<asp:CommandField ShowEditButton="True" />
<asp:TemplateField ShowHeader="False">
<ItemTemplate>
<asp:LinkButton ID="LinkButton1" runat="server" CausesValidation="False" CommandName="Delete"
Text="Delete" OnClientClick="return confirm('Delete this record?')"></asp:LinkButton>
</ItemTemplate>
</asp:TemplateField>
</Columns>
<AlternatingRowStyle CssClass="MyGridAltItem" />
</asp:GridView>

Personally, I would rather use a skin, but I haven't figured that out yet. For now this works so I can live with it. Hope it helps.

Jul 22, 2008 at 12:44 PM
In order to make your themes work in SPS3.0 you need to edit the file
C:\Program Files\Common Files\Microsoft Shared\web server extensions\12\TEMPLATE\SiteTemplates\sts\default.aspx
I editied the line where it says <%@ Page and added a theme there:

<%

@ Page language="C#" MasterPageFile="~masterurl/default.master" Theme="generic" ....

I then placed my theme file in its expected place under the website.

Hope this is useful
Basil


watsongl wrote:
James,

So if you look in your file system you should have a "Themes" Directory at something like:

"C:\Program Files\Common Files\Microsoft Shared\web server extensions\12\TEMPLATE\THEMES"

You have two basic options: either find a theme you like and add custom classes to it's "theme.css" file, or create your own theme - you can find some good references on how to do this on google.

Once you've done that, you can reference the styles you added to the "theme.css" class in your usercontrols. Once you deploy them to your SP instance, just make sure you go into the site settings and apply your extended or custom theme to the page(s) where you added your usercontrols. Here's and example of one of my gridviews. I just edited the theme.css file in the "JET" theme to add the .MyGrid and .MyGridAltItem classes that you see referenced here. So if I put this gridview into a usercontrol, add the usercontrol to a page via the SmartPart and then apply the "JET" them to the page, I get a stylized gridview.

<asp:GridView ID="gv1" runat="server" AutoGenerateColumns="False" DataSourceID="ods1"
ShowHeader="False" Width="100%" DataKeyNames="ID" OnRowDeleted="gv1_RowDeleted" CssClass="MyGrid">
<Columns>
<asp:BoundField DataField="x" ShowHeader="False" ReadOnly="True" />
<asp:BoundField DataField="y" HeaderText="Y" />
<asp:CommandField ShowEditButton="True" />
<asp:TemplateField ShowHeader="False">
<ItemTemplate>
<asp:LinkButton ID="LinkButton1" runat="server" CausesValidation="False" CommandName="Delete"
Text="Delete" OnClientClick="return confirm('Delete this record?')"></asp:LinkButton>
</ItemTemplate>
</asp:TemplateField>
</Columns>
<AlternatingRowStyle CssClass="MyGridAltItem" />
</asp:GridView>

Personally, I would rather use a skin, but I haven't figured that out yet. For now this works so I can live with it. Hope it helps.




Dec 15, 2008 at 1:47 PM
Actually I did use a skin file; under ~\inetpub$\wwwroot\wss\VirtualDirectories\<Website>\App_Themes I created a subdirectory called generic and underneath that I placed a file called generic.skin that contained something like the three different styles of text boxes that I used

<asp:TextBox runat="server" width="250px" height="14px" Font-Size="9pt" padding-left="3" BorderStyle="Solid" BorderColor="#1D72A3" BorderWidth="1px" />
<asp:TextBox skinid="variable_HightWidth_Box" runat="server" BorderStyle="Solid" BorderColor="#1D72A3" BorderWidth="1px" />
<asp:TextBox skinid="long_text" runat="server" width="350px" height="14px" Font-Size="9pt" BorderStyle="Solid" BorderColor="#1D72A3" BorderWidth="1px" />

Note the first line was intended for the ASP standard TextBox while for the second and third lines I used a TextBox with a specific ID that I then used in my .aspx file as shown below

<td><asp:TextBox skinid="long_text" runat="server" ID="txtMileageAmount"></asp:TextBox>