Jump to content


Better, More Convenient, Private Support for Your iThemes Products Is Here.


We're moving support away from the forum and in to private tickets - Log In to Get Support Here


Note: any currently open support threads in the community forum will stay open while we resolve them.

Adding contiguous border styling to tabber-widget


This topic has been archived. This means that you cannot reply to this topic.
6 replies to this topic

#1 andreakropp

andreakropp

    Advanced Member

  • Members
  • Others: Toolkit
  • PipPipPip
  • 164 posts

Posted 24 March 2010 - 02:59 PM

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.


#2 sridhar

sridhar

    Advanced Member

  • Members
  • Others: BackupBuddy
  • 22,262 posts

Posted 08 April 2010 - 06:03 AM

This is how currently the tabs are in your site:

Posted Image

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

#3 andreakropp

andreakropp

    Advanced Member

  • Members
  • Others: Toolkit
  • PipPipPip
  • 164 posts

Posted 08 April 2010 - 05:03 PM

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.

Posted Image

Best,

Andrea and Karl

#4 sridhar

sridhar

    Advanced Member

  • Members
  • Others: BackupBuddy
  • 22,262 posts

Posted 09 April 2010 - 02:12 AM

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:

Posted Image

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;
}


#5 andreakropp

andreakropp

    Advanced Member

  • Members
  • Others: Toolkit
  • PipPipPip
  • 164 posts

Posted 09 April 2010 - 11:52 AM

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

#6 dmitteldorf

dmitteldorf

    Advanced Member

  • Members
  • Others: Toolkit, Sync
  • PipPipPip
  • 321 posts

Posted 28 September 2010 - 02:25 PM

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

#7 nancyeb01

nancyeb01

    Advanced Member

  • Members
  • PipPipPip
  • 194 posts

Posted 13 July 2011 - 07:45 AM

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.





Better, More Convenient, Private Support for Your iThemes Products Is Here.


We're moving support away from the forum and in to private tickets - Log In to Get Support Here


Note: any currently open support threads in the community forum will stay open while we resolve them.