How to use css for Tabs Component

[JazzLee]

I'm on my way to finishing my first application in wicket. I
implemented the Tabs component with ease. Nicely done. Now I'm
trying to figure out how to use the tabs component with css. Is there
something I can read that would give me a better idea of how to use
css with wicket components.

Thanks

Lee

[JazzLee]

[Richard Nichols]

Hi Lee,

You can override the CSS file that is included by the tabs component by overriding the following method in your Tabs() declaration

    protected ResourceReference getCSS() {
        return new TabsCSS();
    }

E.g.

add(new Tabs("mytabs") {
    protected ResourceReference getCSS() {
        return new ResourceReference(MyPage.class, "mycss.css");
    }
});

The css file included by default is as follows -

.tabs {
    display: block;
    margin: 0px 0px 15px 0px;
}
a.tab {
    -moz-border-radius-topright: 4px;
    -moz-border-radius-topleft: 4px;
    -webkit-border-top-left-radius: 4px;
    -webkit-border-top-right-radius: 4px;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    border: 1px dashed #aaaaaa;
    border-bottom: 0px;
    background-color: #ffffff;
    color: #6a6a6a;
    font-weight: bold;
    margin-right: 10px;
    padding: 2px 5px;
    display: inline-block;
    text-decoration: none;
}
a.tab_selected, a.tab:hover {
    background-image: -moz-linear-gradient(top, #cccccc, #eeeeee);
    background-image: -webkit-gradient(linear, left top, left bottom, from(#cccccc), to(#eeeeee));
    -webkit-box-shadow: 0px 1px 2px #000000;
    -moz-box-shadow: 0px 1px 2px #000000;
    box-shadow: 0px 1px 2px #000000;
    -moz-border-radius-topright: 4px;
    -moz-border-radius-topleft: 4px;
    -webkit-border-top-left-radius: 4px;
    -webkit-border-top-right-radius: 4px;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    background-color: #eeeeee;
    border: 1px solid #666666;
    color: #303030;
    font-weight: bold;
    margin-right: 10px;
    padding: 2px 5px;
    text-shadow: 0 1px 1px #ffffff;
    display: inline-block;
    text-decoration: none;
}

.tabpage_selected {
    border: 1px solid #666666;
    padding: 5px;
    -webkit-box-shadow: 0 2px 5px #000000;
    -moz-box-shadow: 0 2px 5px #000000;
    box-shadow: 0 2px 5px #000000;
}
.tabpage {
    display: none;
}

You can customise the above CSS as you see fit to change the styling of the tabs to suit your application.

[Moacir Gmail]

Hi, How are you?

1- I overhide css class of component in your css file, i use firebug for
that.

The wicket tab panel uses the example of this guy

http://www.alistapart.com/articles/slidingdoors/

Thanks

ps.: My english sucks!

[lee Chalupa]

ok great, I understand this now.  I saw the getCSS method in the javadoc I just didn't understand how to use it.  Regarding the .css file content that you shared below... The next time around I'm looking at another component, how will I know what is in the
existing .css file?  Is this information in a javadoc someplace? 

Thanks for your help.

Lee

[Richard Nichols]

You can check out the current CSS in any of these ways -

• using view-source and following the link to the current CSS in Firefox / Chrome / etc
• take a look in the source.zip file in the download for visural-wicket - all the CSS files are in there
• browse the Google Code web interface at http://code.google.com/p/visural-wicket/source/browse/#svn%2Ftrunk%2Fvisural-wicket%2Fsrc%2Fcom