In mojoPortal you can easily specify any of the standard jQueryUI themes on the StyleSheetCombiner control that you find in the layout.master file of each skin.
<portal:StyleSheetCombiner id="StyleSheetCombiner" runat="server" JQueryUIThemeName="dot-luv" UseIconsForAdminLinks="false" />
Changing the jQuery UI theme will dramatically change the style of the widgets like jQuery Accordion or jQuery Tabs.
Allowed values for the JQueryUIThemeName property are as follows:
-
base
-
black-tie
-
blitzer
-
cupertino
-
dot-luv
-
excite-bike
-
hot-sneaks
-
humanity
-
mint-choc
-
redmond
-
smoothness
-
south-street
-
start
-
swanky-purse
-
trontastic
-
ui-darkness
-
ui-lightness
-
vader
Experiment with the different themes to find the one that goes best with your mojoPortal skin.
Beyond changing the theme, you can override css properties in the main style.css file of your skin. The trick is to learn what css styles are applied to the elements by the jQuery javascript. You cannot see this by viewing the source of the rendered page, but you can see the css classes by using the Firefox Firebug plugin which allows you to inspect the html of the page after the javascript has applied its changes.
Using Your Own Theme
You can also build new themes using the jQuery UI ThemeRoller (http://jqueryui.com/themeroller/). After downloading a "ThemeRoller Theme", add the files to your skin directory and add references to the css files in the style.config (ex: <file>my-jquery-ui-theme.css</file>).