Extreme ASP.NET Makeover: jQuery - jQuery UI Themes in ScrewTurn Wiki

Download

Right click “Save as…”

  • Mid Quality WMV (Lo-band, Mobile)
  • MP3 (Audio only)
  • MP4 (iPhone, Android)

So I got to thinking. It is hard to create ScrewTurn Wiki Themes. It is dead easy to create jQuery UI Themes. Could jQuery UI Themes be adapted to theme ScrewTurn Wiki? I decided to find out and it turned out to be a lot easier than I ever expected.

jQuery UI Themes are designed to style widgets, which typically have header and content areas. ScrewTurn Wiki has a similar layout with headers and content areas for the navigation bar, main content area, and other sections. jQuery UI Themes don’t include overall site layout because they are intended for widgets, which fit into an existing site layout. I created a generic (predominantly) layout-based CSS file to be shared across themes called /Themes/Main.css.

The three most important jQuery UI CSS Framework-related CSS classes for theming ScrewTurn Wiki are ui-widget, ui-widget-header, and ui-widget-content. ui-widget is used for the widget container and defines the font used for widget elements. The other two classes obviously define header and content areas. Armed with this knowledge, I applied the ui-widget and ui-widget-content CSS classes to the body tags in the master pages to provide the font and background style. I then added the ui-widget-header CSS class to h1 through h6 tags in Core\Formatter.cs. Last stop was Default.aspx, where I made the following two changes:

<h1 class="pagetitle ui-widget-header">

and

<div id="PageContentDiv" class="ui-widget-content">


Other videos from this article

· Improving User Interaction

· jQuery UI In ScrewTurn Wiki

· Re-Theming ScrewTurn Wiki

· jQuery UI Themes in ScrewTurn Wiki

· Applying ThemeRoller to ScrewTurn Wiki

Read the full article at http://msdn.microsoft.com/en-us/magazine/dd898316.aspx

Tags:

Follow the Discussion

Comments Closed

Comments have been closed since this content was published more than 30 days ago, but if you'd like to continue the conversation, please create a new thread in our Forums,
or Contact Us and let us know.