Sub-Tab Styling

[Eric Bersen]

I'd like to add some style to this drop-down.... rounded corners, space in between the sub-tabs and have the box fit the tabs tighter.  Thanks!

[Kos]

I've been looking for this as well.  Fingers crossed someone knows a method

[Eric Bersen]

Okay, so I just starting playing with code a few weeks ago...  I got this from code I found from soaringeagle on another forum, and adjusted it to this for my site...  before, it had shadows and all kinds of dicey stuff, anyhow, here you go...

#xg_navigation ul div.xg_subtab ul li a{border:1px solid #dbd4db!important;-moz-box-shadow:3px 4px 12px #dbd4db inset!important;-ms-box-shadow:3px 4px 12px #ccc inset!important;-o-box-shadow:3px 4px 12px #dbd4db inset!important;}

it's probably not the perfect code, but it's a start, and it works,  Change the color code (after the #) for what you need.  Also, make sure you choose all the colors you'd like in Appearance, Customize, Tab.

I hope someone will let me know how to round the corners and any other suggestions...

[Eric Bersen]

Awesome, thanks. I'm starting to figure this code out a bit.  Would you know how to decrease the width in the subtabs, so it hugs the word a bit better?

Thanks!

[Kos]

Here's what I'm using but yes, I'd like that right margin side to shrink in and *hug* the word as well.  Still looks a lot better.  Just adjust color and background subtab as needed.

#xg_navigation ul div.xg_subtab ul li a {color:#000000;background:#ffffff;border-radius: 10px}
#xg_navigation ul div.xg_subtab ul li a:hover {color:#000000;background:#ffffff;border-radius: 10px

[Kos]

Oops!  My code above is missing a } at the end of it.  Should read:

#xg_navigation ul div.xg_subtab ul li a {color:#000000;background:#ffffff;border-radius: 10px}
#xg_navigation ul div.xg_subtab ul li a:hover {color:#000000;background:#ffffff;border-radius: 10px}

[George H. Compton IV]

try this edit the size at the bottom.

DIV#xg_navigation UL.xg_subtab{
  background-color: transparent!important;}
DIV#xg_navigation UL.xg_subtab a {
  text-align: center!important;
  margin: 0px!important;
  margin-bottom: 8px!important;
  padding: 0px!important;
  border: 1px solid #d2d2d2!important;
  border-radius: 5px 5px 5px 5px!important;
  -moz-border-radius: 5px 5px 5px 5px!important;;
  -webkit-border-radius: 5px 5px 5px 5px!important;
  width:165.4px!important;}

[Kos]

Did you try removing any recently-added code and see if it reverts back to normal?

[Eric Bersen]

Yep, it's the code.  It actually was a few codes back.  I wouldn't have thought that code would do that, but better I learn now than 20 more codes down the line.   Thanks

[Kos]

Oh really?  So very nice of them to let everyone know there's a problem out there...............#fail

[lorianne]

thanks for this one. i've added it with only the slightest mod by making the drop downs 'container' transparent... i love it, so thanks!

OurSalon

[George H. Compton IV]

you're welcome and your site looks awesome :-)

[George H. Compton IV]

your sub tabs look great :-) awesome job Vladimir