6 replies to this topic

[Karl and Andrea Kropp]

Hello-

We've been experimenting w/Tabber-Widget and love it! We've found it very useful and very easy to customize styling through the template CSS. The one trick we've not been able to accomplish, though, is to add a continuous border that outlines/surrounds BOTH the tab and the content area without creating any visible border BETWEEN the tab and the content area.

We've chosen to retain white widget areas (white backgrounds) and would prefer a white background in the tabber-widget as well. However, we lose the active tab against the white background as a result. Simply putting a border around 3-4 sides of the tab itself looks a little odd, even if you include a border around the content area

Is there a CSS trick for this? Perhaps a way to make the active tab overlap slightly the content area below (and presumably cover up a portion of any border added to the top of the content area)?  

Our site is at http://practicelight.com. For now, we've used gray backgrounds to create a contiguous look for the active tab. Any way to do this with borders?

Thanks in advance!

Best,

Andrea and Karl

Edited by Sridhar Katakam, 08 April 2010 - 05:56 AM.

[Sridhar Katakam]

This is how currently the tabs are in your site:



Can you alter this image in Photoshop or otherwise to indicate what you want?

[Karl and Andrea Kropp]

Hi Sridhar-

Thank you for your note. I think we can live with what we've got now on that site--looks pretty nice. The attached picture should give you a clearer idea what we'd like to know how to do (I hope it does, anyway...). Note the way a single border surrounds both the tab and the content area and that there's no horizontal line separating the two.



Best,

Andrea and Karl

[Sridhar Katakam]

You can achieve by setting the background color of the tab's content to be same as that of the tab (the bottom of the tab to be specific, if the tab uses a image background)

For example, you can have the following look:



using this code:

.tabber-widget-rounded-light .tabber-widget-content {
 background-color: #1f9cdf !important;
 color: #FFFFFF;
}

.tabber-widget-rounded-light .tabber-widget-content a { 
 color: #FFFFFF;
}

.tabber-widget-rounded-light .tabber-widget-content a:hover { 
 color: #CCCCCC;
}

[Karl and Andrea Kropp]

Thanks Sridhar-

Appreciate your help on this! We've become passably good at manipulating the tab and content area backgrounds to get a variety of effects--where we're stuck is figuring out how to get a white active tab and content area to stand out against a white widget background. That's why we've been focused on adding blue/dark grey borders and not changing up the backgrounds. Clearly we can set borders for the active tab and the content area individually. Our challenge though is setting a top border for the content area that is visible beneath the inactive tabs but is not visible beneath the active tab.

It's really not a big problem as I think we can create lots of pleasing effects, but we'd like to know how to create this particular effect since we've seen it frequently elsewhere and are occasionally asked about it.

Best,

Andrea and Karl

[Darryl Mitteldorf]

Hi Andrea! Hoping that you read this and will post how you got that wonderful pencil thin borader around your tabber areas. I would like to do that for my site, malecare.org

Thanks

[nancyeb01]

I figured this out mostly. Don't know how to delete my post here.

Thank you, Nancy

previously:

Hello,

I would like my tabbers to look like Sridhars above. I just installed the tabber widget in my test site, and out of the box, it doesn't look good. http://test.millbrookcreative.com/about/

I added the code above to my style.css for the theme I am using (Americana)

I have selected 'Rounded Corners Light'.

I posted here also about getting some more css options for tabber if people would share them.

Thank you!

Nancy

Edited by Nancyb, 13 July 2011 - 03:28 AM.