[Seaside] How to style SUTabPanel?

Victor Rodriguez victor.palique at gmail.com
Thu Apr 17 03:38:44 UTC 2008


Hello,

I'm trying to figure out how SUTabPanel works.

First I created the following class:

WATask subclass: #TabPanelTest
	instanceVariableNames: ''
	classVariableNames: ''
	poolDictionaries: ''
	category: 'TabPanelTest'

TabPanelTest class>>#canBeRoot
	^ true.

TabPanelTest>>#go
	self call: SUTabPanel example.

Second, I created an application using Seaside's Dispatcher Editor ("config").

Third, I added the SULibrary to my application.

At this point, the test works, in the sense that I have the three
counter anchors, and clicking on them bring up different counter
instances.

However, the "tabs" are rendered  as plain list items (<li>).
Inspecting the HTML source shows that SUTabPanel has the following
structure:

- div class="tabpanel"
  - ul class="head"
    - li class="active"
    - li
  - div class="body"

Which finally takes me to my question: does Seaside include a
WAFileLibrary with CSS that will make SUTabPanels appear like real
tabs?  I can see that WAStandardStyles has #kalseyTabsCss, but those
styles do not match the structure above.  I'm I suppoused to come up
with my own CSS?  If so, does anyone has some code they care to share?

Alternatively, is there a way to change SUTabPanel in order to make it
use styles appropriate for kalseyTabsCss?

Thanks in advance!

Saludos,

Víctor Rodríguez.


More information about the seaside mailing list