Extreme ASP.NET Makeover: jQuery - jQuery UI Themes in ScrewTurn Wiki
- Posted: Jun 05, 2009 at 4:06 PM
- 23,174 Views
Download
How do I download the videos?
- To download, right click the file type you would like and pick “Save target as…” or “Save link as…”
Why should I download videos from Channel9?
- It's an easy way to save the videos you like locally.
- You can save the videos in order to watch them offline.
- If all you want is to hear the audio, you can download the MP3!
Which version should I choose?
- If you want to view the video on your PC, Xbox or Media Center, download the High Quality WMV file (this is the highest quality version we have available).
- If you'd like a lower bitrate version, to reduce the download time or cost, then choose the Medium Quality WMV file.
- If you have a Zune, WP7, iPhone, iPad, or iPod device, choose the low or medium MP4 file.
- If you just want to hear the audio of the video, choose the MP3 file.
Right click “Save as…”
- Mid Quality WMV (Lo-band, Mobile)
- MP3 (Audio only)
- MP4 (iPod, Zune HD)
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:
and
Other videos from this article
· jQuery UI Themes in ScrewTurn Wiki
· Applying ThemeRoller to ScrewTurn Wiki
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.