[Seaside] How to style SUTabPanel?

[Victor Rodriguez]

On Thu, Apr 17, 2008 at 2:09 AM, Lukas Renggli <renggli at gmail.com> wrote:
> There is this style in Seaside 2.9:

Thank you Lukas, the style works.

A note for the innocent: the style works *once* it is turned to
lowercase!  Apparently, XHTML 1.0 strict documents require that styles
use lowercase element and attribute names.

Saludos,

Víctor Rodríguez.

>  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
>  _______________________________________________
>  seaside mailing list
>  seaside at lists.squeakfoundation.org
>  http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside
>