[Seaside] How to style SUTabPanel?

[Lukas Renggli]

There is this style in Seaside 2.9:

tabPanelCss
	"Based on: http://www.kalsey.com/tools/csstabs/"

	^ '.tabPanel ul.head {
	margin: 0;
	padding-left: 1em;
	padding-bottom: 19px;
	border-bottom: 1px solid #ccc;
}
.tabPanel ul.head li	{
	margin: 0;
	padding: 0;
	display: inline;
	list-style-type: none;
}
.tabPanel ul.head a:link,
.tabPanel ul.head a:visited {
	float: left;
	color: #444;
	outline: none;
	line-height: 14px;
	margin-right: 1em;
	background: #eee;
	text-decoration: none;
	border: 1px solid #ccc;
	padding: 2px 1em 2px 1em;
}
.tabPanel ul.head a:link.active,
.tabPanel ul.head a:visited.active {
	color: #000;
	background: #fff;
	border-bottom: 1px solid #fff;
}
.tabPanel ul.head a:hover {
	background-color: #fff;
}'

On 4/17/08, Victor Rodriguez <victor.palique at gmail.com> wrote:
> 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.
>  _______________________________________________
>  seaside mailing list
>  seaside at lists.squeakfoundation.org
>  http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside
>


-- 
Lukas Renggli
http://www.lukas-renggli.ch