</ iframe > </noscript> <!-- End Google Tag Manager (noscript) --> <div id="BeforeHeaderContent"> </div> <div id="HeaderContent"> <div id="ProjectTitle">Input for ASP.NET Web Forms</div> <div id="PageTitle"><div id="PageTitleText">Adding a Custom Theme</div></div> </div> <div id="AfterHeaderContent"> <!-- Spacing --> <span id="ToggleAllSectionsLink" class="FunctionLink"> <label id="CollapseAllLabel">Collapse All</label> <label id="ExpandAllLabel" style="display: none;">Expand All</label> </span> </div> <div class="BreadcrumbsContainer"><table><tr><td> <a href="inputforaspnetwijmotaskbasedhelp.html">Task-Based Help</a> > <a href="generalc1inputcontro.html">General C1Input Tasks</a> > Adding a Custom Theme</td></tr></table></div> <div id="BodyContent"> <p><b>Input for ASP.NET Web Forms</b> provides six built-in themes, but if you prefer to use a different theme, you can customize a theme using <a href="http://helpcentral.componentone.com/nethelp/c1studioWeb/Themeroller for visual studio.html" target="_blank">ThemeRoller for Visual Studio</a>, choose an existing theme using a CDN URL or create your own custom theme with the jQuery ThemeRoller Web application. We will use <a href="C1.Web.Wijmo.Controls.4~C1.Web.Wijmo.Controls.C1Input.C1InputDate.html">C1InputDate</a> in the following examples.</p> <p><strong>Using ThemeRoller for Visual Studio</strong></p> <p>The new <b>ThemeRoller for Visual Studio</b> makes designing beautiful themes for <b>ASP.NET Web Forms Edition</b> controls easy. To find more information on creating and editing a <b>ThemeRoller for Visual Studio</b> theme, please see <a href="http://helpcentral.componentone.com/nethelp/c1studioWeb/Themeroller for visual studio.html" target="_blank">ThemeRoller for Visual Studio</a>.</p> <p><strong>Using a CDN URL</strong></p> <ol> <li>Click the <a href="C1.Web.Wijmo.Controls.4~C1.Web.Wijmo.Controls.C1Input.C1InputDate.html">C1InputDate</a> smart tag to open the <b>Tasks</b> menu.</li> <li>Select <b>Use CDN</b>.</li> <li>In the <b>Theme</b> property, enter a CDN URL to specify the theme; CDN URLs can be found at <a href="http://blog.jqueryui.com/2011/06/jquery-ui-1-8-14/" target="_blank">http://blog.jqueryui.com/2011/06/jquery-ui-1-8-14/</a>. In this example, we'll use the <i>sunny</i> theme: <a href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.14/themes/sunny/jquery-ui.css">http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.14/themes/sunny/jquery-ui.css</a>.<br> <img border="0" src="ImagesExt/image9_1.png" width="260" height="300"><br> This theme setting is stored in the <b><appSettings></b> of the <b>Web.config</b> file. In the Solution Explorer, double-click the <b>Web.config</b> file. Notice the <b><appSettings></b> tag contains a <b>WijmoTheme</b> key and value; this is where the CDN URL you added is specified.</li> <li>Run the project and notice the theme is applied to <a href="C1.Web.Wijmo.Controls.4~C1.Web.Wijmo.Controls.C1Input.C1InputDate.html">C1InputDate</a>.<br> <img border="0" src="ImagesExt/image9_2.png" width="159" height="69"></li> </ol> <p><strong>Using jQuery ThemeRoller</strong></p> <ol> <li>Go to <a href="http://jqueryui.com/themeroller/" target="_blank">http://jqueryui.com/themeroller/</a>.</li> <li>On the <b>Roll Your Own</b> tab, change the settings to create a custom theme; you can customize fonts, colors, backgrounds, borders, and more. Or click the <b>Gallery</b> tab and select an existing theme.</li> <li>Click the <b>Download</b> button and then click <b>Download</b> again on the <b>Build Your Download</b> page.</li> <li>Save and unzip the theme .zip file to a folder within your Visual Studio project folder. In this example, we created a <b>customtheme</b> folder.</li> <li>In the Solution Explorer, click <b>Show All Files</b> and then right-click the <b>customtheme</b> folder and select <b>Include in Project</b>.</li> <li>Click the <a href="C1.Web.Wijmo.Controls.4~C1.Web.Wijmo.Controls.C1Input.C1InputDate.html">C1InputDate</a> smart tag to open the <b>Tasks</b> menu.</li> <li>Select <b>Use CDN</b>.</li> <li>In the <b>Theme</b> property, enter the path to your custom theme .css, for example, <b>customtheme/css/custom-theme/jquery-ui-1.8.14.custom.css</b>.<br> <img border="0" src="ImagesExt/image9_3.png" width="254" height="299"><br> This theme setting is stored in the <b><appSettings></b> of the <b>Web.config</b> file. In the Solution Explorer, double-click the <b>Web.config</b> file. Notice the <b><appSettings></b> tag contains a <b>WijmoTheme</b> key and value; this is where the custom theme you added is specified.</li> <li>Run the project and notice the theme is applied to <a href="C1.Web.Wijmo.Controls.4~C1.Web.Wijmo.Controls.C1Input.C1InputDate.html">C1InputDate</a>.<br> <img border="0" src="ImagesExt/image9_4.png" width="164" height="62"></li> </ol> <a name="seealsobookmark"></a> </div> <div id="FooterContent"> <p> </p><p> </p><hr style="height: 1px"><p>Copyright (c) <script type="text/javascript"> var theDate=new Date() document.write(theDate.getFullYear()) </script> GrapeCity, inc. All rights reserved. <script> $(document).ready(function() { if (!(window.self !== window.top)) { // Not running in a frameset // Get the page name var pageName = location.href.substring(location.href.lastIndexOf("/") + 1); if (pageName.indexOf("#") != -1) { pageName = pageName.substring(0, pageName.indexOf("#")); } // Append to webframe.html var framePage = "webframe.html#" + pageName; location.href = framePage; } }); </script></p> <a href="http://our.componentone.com/groups/" target="_blank">Product Support Forum</a> | <a href="http://feedback.componentone.com/forums/255768-asp-net-documentation" target="_blank">Documentation Feedback</a> </div> </body> </html>