How to style SUTabPanel?

Previous Topic Next Topic
 
classic Classic list List threaded Threaded
3 messages Options
Reply | Threaded
Open this post in threaded view
|

How to style SUTabPanel?

Victor Rodriguez-5
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
[hidden email]
http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside
Reply | Threaded
Open this post in threaded view
|

Re: 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 <[hidden email]> 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
>  [hidden email]
>  http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside
>


--
Lukas Renggli
http://www.lukas-renggli.ch
_______________________________________________
seaside mailing list
[hidden email]
http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside
Reply | Threaded
Open this post in threaded view
|

Re: How to style SUTabPanel?

Victor Rodriguez-5
On Thu, Apr 17, 2008 at 2:09 AM, Lukas Renggli <[hidden email]> 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 <[hidden email]> 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
>  >  [hidden email]
>  >  http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside
>  >
>
>
>  --
>  Lukas Renggli
>  http://www.lukas-renggli.ch
>  _______________________________________________
>  seaside mailing list
>  [hidden email]
>  http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside
>
_______________________________________________
seaside mailing list
[hidden email]
http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside