Default JQuery UI Tabs

Question

I am using Pharo smalltalk image with latest seaside loaded.

I had loaded the JQBaseTheme in my project.

What should i do to bypass the colourful,large view of the UITab and show a simple UITab as shown in http://jqueryui.com/demos/tabs/default.html

Answer 1

In addition to the default style of JQueryUI you can provide your own styles that set font-family and font-size as you like. On the page you mention they use http://jqueryui.com/demos/demos.css with the following CSS rule:

body {
  font-size: 62.5%;
  font-family: "Trebuchet MS", "Helvetica", "Arial",  "Verdana", "sans-serif";
}

Answer 2

If you look at the method JQBaseTheme>>updateRoot: you will see that it adds the stylesheet url for that theme.

anHtmlRoot styleSheet url: 'https://ajax.googleapis.com...'

You could implelement updateRoot: in your Seaside component to add the stylesheet url of the page you referenced or any other available css resource you would like to use.