« Return to Thread: How to style SUTabPanel?

Re: How to style SUTabPanel?

by Lukas Renggli :: Rate this Message:

Reply to Author | View in Thread

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


--
Lukas Renggli
http://www.lukas-renggli.ch
_______________________________________________
seaside mailing list
seaside@...
http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside

 « Return to Thread: How to style SUTabPanel?