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!

[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

[doone]

Wow, that is an awesome improvement Vladimir!  Thank you very much!

[Vladimir Sebastian Bach™]

Thank you, I'm glad to be of help. The new sub-tab layout makes it easier for tablets to browse the site.

[Kos]

I'm surprised there's not more discussion in the forums on tablets and what works/doesn't work. 

[Kos]

Here's Valimir's screen shot for everyone to view.  Nice, slick look .  Sadly none of us has truly managed to get the subtabs to "hug" the words but  there are certainly a lot of nice appearances here now to choose from.  Thanks guys!

[George H. Compton IV]

  Thank you Randy :-)

You should be able to use your design studio for those changes.
The border code was already in my original code just change the color and I added the background code to it for you. Just change the color to the color you prefer.This is what the two lines of code look like.
border: 1px solid #d2d2d2!important;
background-color: #d2d2d2!important;
these two lines of code are in the middle of the main code

You can change the color Of the text by changing the colors black and white in the two bottom codes. White is the the color of the mouse over affect.


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;
  background-color: #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;}

DIV#xg_navigation .xg_subtab SPAN{color:black!important;}

DIV#xg_navigation .xg_subtab SPAN:hover{color:white!important;}

[George H. Compton IV]

Awesome I'm glad I could help :-) you have a great day Randy

[George H. Compton IV]

of course there is :-)

this code will make all the tabs zoom when your mouse is over them.

DIV#xg_navigation .xg_subtab a:hover{transform:scale(1.20);-ms-transform:scale(1.20);-o-transform:scale(1.20);-webkit-transform:scale(1.20);-moz-transform:scale(1.20);-webkit-transition:all 1s ease-out;-moz-transition:all 1s ease-out;transition:all 1s ease-out;-ms-transition:all 1s ease-out;-o-transition:all 1s ease-out;}

And this code will only allow the subtabs to zoom

  DIV#xg_navigation UL.xg_subtab a:hover{transform:scale(1.20);-ms-transform:scale(1.20);-o-transform:scale(1.20);-webkit-transform:scale(1.20);-moz-transform:scale(1.20);-webkit-transition:all 1s ease-out;-moz-transition:all 1s ease-out;transition:all 1s ease-out;-ms-transition:all 1s ease-out;-o-transition:all 1s ease-out;}

[doone]

Thanks, George, that is an interesting and useful zoom effect.

[Kos]

George that sub tab zoom is a thing of beauty.  Thank you sir!