fancy tabs with rounded corners and rounded borders

[joster]

Dear all-

I would like to beautify my tabs (TabPanel/TabBar GWT widget) - would
like to add:
- rounded edges (top-left and top-right)
- borders for tabs

I am able to added rounded edges (using the KitchenSink example) - but
am unable to figure out how to do borders for the tabs. I would like
to control the color of the borders from within my code (CSS).

Has any one done this before? Request your help.

Joster

[Peter Blazejewicz]

hi Joster,
http://gwt.bouwkamp.com/
regards,
Peter

[joster]

Thanks Peter. I am able to get rounded edges, but not rounded borders.
Essentially I would like two distinct colors for the background and
border. Please see attached picture.

Any idea how this can be done?

Joster

On Nov 12, 3:51 pm, Peter Blazejewicz <peter.blazejew...@gmail.com>
wrote:
> hi Joster,http://gwt.bouwkamp.com/

[John Webster]

With attachment.

On Nov 12, 2007 6:24 PM, joster <joste...@gmail.com> wrote:

Thanks Peter. I am able to get rounded edges, but not rounded borders.
Essentially I would like two distinct colors for the background and
border. Please see attached picture.

Any idea how this can be done?

Joster

On Nov 12, 3:51 pm, Peter Blazejewicz <peter.blazejew...@gmail.com>
wrote:

> hi Joster, http://gwt.bouwkamp.com/

[Peter Blazejewicz]

hi,

Because of IE buggy rendering (and luck of CSS2.1 or even CSS2.0) I
would use graphic content (you know, some graphic work in Photoshop-
like tool) for corners with two different colors,
if you want to support FF/Safari only that is fairly easy because they
support rounded borders by css extensions so no additional code is
required or work, just two lines css declarations (one for Safari/one
for FireFox, just search for "FireFox rounded border" via web search),

regards,
Peter

[anubhava]

Hi dear,

 

 You can change it’s background to same as it’s borders style.

Then it looking displays as round shape.

 

 

 

Thanks

Anubhava Dimri

[joster]

Hi Anubhava-

Thanks, sorry, I am not following, could you please elaborate? How do
I get distinct color for background and border. See my picture in this
thread, say I want the border to be red color and background to be
green color, how do I do this?

Joster

On Nov 13, 12:25 am, "anubhava" <anubhava.prod...@gmail.com> wrote:
> Hi dear,
>
> You can change it's background to same as it's borders style.
>
> Then it looking displays as round shape.
>
> Thanks
>
> Anubhava Dimri
>
> From: Google-We...@googlegroups.com
> [mailto:Google-We...@googlegroups.com] On Behalf Of John Webster
> Sent: Tuesday, November 13, 2007 7:57 AM
> To: Google Web Toolkit
> Subject: Re: fancy tabs with rounded corners and rounded borders
>
> With attachment.
>

> On Nov 12, 2007 6:24 PM, joster <joster.j...@gmail.com> wrote:
>
> Thanks Peter. I am able to get rounded edges, but not rounded borders.
> Essentially I would like two distinct colors for the background and
> border. Please see attached picture.
>
> Any idea how this can be done?
>
> Joster
>
> On Nov 12, 3:51 pm, Peter Blazejewicz <peter.blazejew...@gmail.com>
> wrote:
>

> > hi Joster, <http://gwt.bouwkamp.com/> http://gwt.bouwkamp.com/

[Peter Blazejewicz]

hi Joster,
don't bother with that if you are targeting IE, just prepare graphic
content with content filled with your background color and border set
to 1px or 2px filled with different color,
the issue is that also background color of such image needs to match
your web page body background color,
THat's IE, fact of live,

regards,
Peter

[joster]

Hi Peter-

Thanks for your help. I understand your comments. In many cases IE has
been pain. What kind of graphic tool do you use for build pure graphic
content? It would be great if there was a native class which would do
this well for rounded panels and borders.

Joster

On Nov 13, 3:12 pm, Peter Blazejewicz <peter.blazejew...@gmail.com>

[Milan Jaric]

hey, hey, stop there is no need for pictures, men whats css so I sugest to look this article
"Nifty corners"
http://www.html.it/articoli/nifty/index.html

[rusty]

I find that you get the most freedom (and browser support) by using
background images, in your css, for example:
.gwt-TabBar {
font-size: 10px;
background-image: url(/images/nav-bg.gif);
height: 49px;
}

.gwt-TabBarFirst {
background-image: url(/images/nav-left.gif) !important;
background-repeat: no-repeat;
}

.gwt-TabBarRest {
background-image: url(/images/nav-right-long.gif) !important;
background-repeat: no-repeat;
}

.gwt-TabBarItem {
white-space:nowrap;
background-image: url(/images/nav-off.gif);
background-repeat: no-repeat;
cursor: pointer;
width: 125px;
height: 49px;
text-align: center;
color: #555;
font-weight: bold;
}

On Nov 14, 9:24 am, "Milan Jaric" <milan.ja...@gmail.com> wrote:
> hey, hey, stop there is no need for pictures, men whats css so I sugest to
> look this article
> "Nifty corners"http://www.html.it/articoli/nifty/index.html
>

> On Nov 14, 2007 12:12 AM, Peter Blazejewicz <peter.blazejew...@gmail.com>

> --
> Milan Jaric

[joster]

Thanks Rusty, could you please post your images?

[rusty]

I can't post them, but I can tell you what they are:
nav-bg.gif is a 3x49 pixel image, which you tile in the background of
your tab
nav-left.gif & right are probably not needed in this example, but they
are the 'cap's to the thing below our tab bar.

What I forgot to mention (which is important) is that we built our
tabs using a table like widget:
<td>image1</td>
<td>Tab text</td>
<td>image2</td>

where image 1 and image 2 are the left and right rounded bits of our
tabs, which sit on top of our CSS background image (nav-bg.gif)

It will probably make more sense when you see the end result, which is
here (look at the tabs at the top of this application):
http://googlewebtoolkit.blogspot.com/2007/10/epo-builder-built-with-gwt.html

hope that helps

Rusty

[joster]

Thanks Rusty.

> What I forgot to mention (which is important) is that we built our
> tabs using a table like widget:
> <td>image1</td>
> <td>Tab text</td>
> <td>image2</td>
>
> where image 1 and image 2 are the left and right rounded bits of our
> tabs, which sit on top of our CSS background image (nav-bg.gif)

I really like the way you have created tabs for your web-site, they
look really neat and adds clarity to the tabs. Could you please
elaborate how you create your tabs? May be post some code-snippets?

Joster

[Peter Blazejewicz]

hi Milan,
please read topic: Joster needs rounded corners with optional 1px
border color (hence we have 3 colors for internal background, border
color, external color),

regards,
Peter

On Nov 14, 12:24 am, "Milan Jaric" <milan.ja...@gmail.com> wrote:
> hey, hey, stop there is no need for pictures, men whats css so I sugest to
> look this article
> "Nifty corners"http://www.html.it/articoli/nifty/index.html
>

> On Nov 14, 2007 12:12 AM, Peter Blazejewicz <peter.blazejew...@gmail.com>

> --
> Milan Jaric

[rusty]

@Joster: I went back and looked at my code, and actually it's a lot
easier than I thought (and please ignore my previous posts, I think
they were based on how I did it the first time around, not the final
version).

So the main 2 bits of CSS you need to worry about are:

.gwt-TabBarItem {
white-space:nowrap;
background-image: url(/images/nav-off.gif);
background-repeat: no-repeat;
cursor: pointer;
width: 125px;
height: 49px;
text-align: center;
color: #555;
font-weight: bold;
}

.gwt-TabBarItem-selected {
white-space:nowrap;
background-image: url(/images/nav-on.gif);
background-repeat: no-repeat;
width: 125px;
height: 49px;
cursor: default;
color: #2c2c58;
font-weight: bold;
}

And all you do in there is the background image your rounded tab (out
of photoshop or whatever), you need to make it big enough to fit any
text you want to put on those tabs, because it won't auto-stretch or
anything.

>From there you just create your tab panel:
mainTabPanel = new TabPanel();
mainTabPanel.setWidth("900");
mainTabPanel.add(getTab1Panel(), "Tab 1");
mainTabPanel.add(getTab2Panel(), "Tab 3");
mainTabPanel.add(getTab3Panel(), "Tab 4");

and now it will use your two background images, one for when it's not
selected, and one for when it is. You could for example make the
selected one have a darker color or something, you could also change
the text if you wanted, you do all that in the CSS I posted above.

Rusty

On Nov 14, 11:30 am, Peter Blazejewicz <peter.blazejew...@gmail.com>