Skip Ribbon Commands
Skip to main content

Portfolio

:

Styled Easy Tabs
SharePoint Easy Tabs v5 with custom stylesheet

 

 About this page

 
​

This page showcases an example of Easy Tabs customization using stylesheets.

The design presented here is inspired by the jQuery Conference site (design by Doug Neiner), and the explanations from Louis Lazaris, found on Impressive Webs. The demo features: 

  1. Rounded corners on all tabs
  2. Box shadow (bottom of inactive tabs)
  3. Hover effect (on inactive tabs)
  4. Transitions (the glow on hover)
  5. A subtle color gradient on the active tab
CSS Transitions work in Chrome, Safari, Opera 10.5 & Firefox 3.7.
 
Rounded corners, box shadow, and gradients are rendered in Internet Explorer 6/7/8 thanks to CSS3 PIE (author: Jason Johnston).
 

 The Easy Tabs

 
 
When added to a Web Part zone, the Easy Tabs automatically generate a tabbed interface, with one tab per Web Part visible in the zone.
 
The Easy Tabs are compatible with both SharePoint 2007 and 2010. They are released under a MIT license, and can be downloaded from this page.
 
 EasyTabs
 

 CSS3 enhancements

 

​

This demo features an image-less look, entirely based on CSS.

It includes 4 different CSS3 enhancements:

  1. Rounded corners: border-radius
  2. Box shadow (bottom of inactive tabs) : box-shadow
  3. Transitions (the glow on hover) : transition
  4. Gradients (the active tab)
Rounded corners, box shadow, and gradients are rendered in Internet Explorer 6/7/8 thanks to CSS3 PIE. PIE stands for Progressive Internet Explorer. It is an IE attached behavior which, when applied to an element, allows IE to recognize and display a number of CSS3 properties.
 

 The stylesheet

 

Here is the stylesheet I used on this page, to replace the default one that comes with the Easy Tabs:

<style type="text/css">
.et-tab{position: relative;line-height: 28px;font-family: Arial, Helvetica, sans-serif;text-transform: uppercase;font-size: 12px;font-weight:bold;padding:3px 20px;display:inline-block;cursor:pointer;
-webkit-transition: background-color 0.2s linear;-moz-transition: background-color 0.2s linear;-o-transition: background-color 0.2s linear;
}
.et-activetab{
position: relative;height:32px;margin: 0 10px 0 0;background-color:#d2d2d2;color: #2B477D;
border-top: solid 1px #f2f2f2;border-left: solid 1px #f2f2f2;border-right: solid 1px #f2f2f2;
-webkit-border-top-left-radius: 6px;-webkit-border-top-right-radius: 6px;-moz-border-radius: 6px 6px 0 0;border-radius: 6px 6px 0 0;
background: #D2D2D2;background: -webkit-gradient(linear, 0 0, 0 bottom, from(#D2D2D2), to(#f2f2f2));background: -moz-linear-gradient(#D2D2D2, #f2f2f2);background: linear-gradient(#D2D2D2, #f2f2f2);-pie-background: linear-gradient(#D2D2D2, #f2f2f2);
behavior: url("/utilities/PIE.htc");
}
.et-inactivetab{
position: relative;height: 27px;margin: 0 10px 5px 0;background-color:#2B477D;color:#fff;
border-top: solid 1px #415F9D;border-left: solid 1px #415F9D;border-right: solid 1px #415F9D;
-webkit-border-top-left-radius: 6px;-webkit-border-top-right-radius: 6px;-moz-border-radius: 6px 6px 0 0;border-radius: 6px 6px 0 0;
-webkit-box-shadow: #2B477D 0px 4px 5px;-moz-box-shadow: #2B477D 0px 4px 5px;box-shadow: #2B477D 0px 4px 5px;
behavior: url("/utilities/PIE.htc");
}
.et-inactivetab:hover{
background-color:#5a87dd;
-webkit-box-shadow: #5a87dd 0px 4px 5px;-moz-box-shadow: #5a87dd 0px 4px 5px;box-shadow: #5a87dd 0px 4px 5px;
behavior: url("/utilities/PIE.htc");
}
.et-tabrow{white-space:nowrap;padding: 20px 20px 0 30px;}
.et-separator{display:none;}
.et-offscreen{position:absolute;max-height:1px;max-width:1px;top:-9999px;}
#MSO_ContentTable{background-color:#131925;}
.ms-wpContentDivSpace{width:700px;font-family: Arial, Helvetica, sans-serif;font-size: 13px;background-color:#f2f2f2;padding:20px;border: solid 1px #f2f2f2;
-webkit-border-radius: 12px;-moz-border-radius: 12px;border-radius: 12px;
}
</style>