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

Posted: Jun 05, 2009 at 4:06 PM

By: Howard Dierking

23,849 Views

Video format

Option selected may change based on video formats available and browser capability.

Auto

Use our suggested format for this video.

Smooth Streaming

Adaptive bitrate streaming - little buffering but lower video quality at times of low bandwidth. Silverlight 5 required

Progressive

Traditional buffered video format. Silverlight 5 required

HTML5

For browsers that support H.264 MP4 or WebM video playback such as:
IE9+, Firefox 4+, Chrome 5+, or Safari 4+.

Flash

For browsers that have the Adobe Flash Player plugin installed.

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">

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

Follow the Discussion

Oops, something didn't work.

Try again?

Getting "follow" information

Stop following these comments

Start following these comments

Removing your "follow"

Setting up your "follow"

Subscribe to this comments

Follow
Oops, something didn't work.

Try again?

Sign In to be begin to follow these comments

What does this mean?
Following an item on Channel 9 allows you to watch for new content and comments that you are interested in. You need to be signed in to Channel 9 to use this feature.

Getting "follow" information

Stop following these comments

Start following these comments

What does this mean?
Following an item on Channel 9 allows you to watch for new content and comments that you are interested in and view them all on your notifications page.

Removing your "follow"

Setting up your "follow"

Did you know you can
sign up for email notifications?
- Subscribe to this comments

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.