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...

[Vladimir Sebastian Bach™]

To round corners add border-radius: 10px; to your code and to space out the subtabs add margin-bottom: 8 px;

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

[Vladimir Sebastian Bach™]

This is what I use, edited and added from George's code. You can see it on www.roleplaysocial.net

I'd provide a screenshot but I can't hover over the tabs and select screen capture at the same time.

DIV#xg_navigation UL.xg_subtab{
  background-color: #fff !important;}
DIV#xg_navigation UL.xg_subtab a {
  text-align: center!important;
  margin: 0px!important;
  margin-bottom: 2px!important;
  padding: 0px!important;
  border: 1px solid #000!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:215.4px!important;
box-shadow: 0px 2px 6px 0px #777;
-moz-box-shadow:  0px 2px 6px 0px #777;
-webkit-box-shadow:  0px 2px 6px 0px #777;}

#xg_navigation ul div.xg_subtab ul {
    width: 220.4px;
    padding: 4px !important;
box-shadow: 0px 2px 8px -2px #000;
-moz-box-shadow:  0px 2px 8px -2px #000;
-webkit-box-shadow:  0px 2px 8px -2px #000;
}

[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

[Vladimir Sebastian Bach™]

That only happens to me when I'm adding code, publishing, and adding more code. Doesn't happen often though and only to me.