Change Tabs style like OneInstructor

Last updated on by

The new tabs style :

1. The Shortcode for the Tabs  (in text mode):

<p>
 
</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<h2>TAUGHT BY HIGHLY <strong><span style="color: #ff6600;">EXPERIENCED</span> INSTRUCTOR&nbsp;</strong><br /> &amp; LOVED BY <strong><span style="color: #ff6600;">THOUSANDS</span> OF&nbsp;STUDENTS.</strong></h2>
<p style="text-align: center;">
</p>
<p style="text-align: center;"><img class="alignnone size-full wp-image-43" src="http://vibethemes.com/envato/wplms/skins/onecourse/wp-content/uploads/2015/04/jobs.jpg" alt="jobs" width="460" height="460" /></p>
<h3 style="text-align: center;">Lupin Remus</h3>
<p style="text-align: center;"><span style="color: #999999;"><em>Michigan University</em></span></p>
<p style="text-align: center;">
 
</p>
<p style="text-align: center;"><img class="alignnone size-full wp-image-44" src="http://vibethemes.com/envato/wplms/skins/onecourse/wp-content/uploads/2015/04/col.jpg" alt="col" width="460" height="460" /></p>
<h3 style="text-align: center;">Angelina Thomas</h3>
<p style="text-align: center;"><span style="color: #999999;"><em>Chicago&nbsp;University</em></span></p>
<p style="text-align: center;">
 
</p>
<p style="text-align: center;"><img class="alignnone size-full wp-image-45" src="http://vibethemes.com/envato/wplms/skins/onecourse/wp-content/uploads/2015/04/steve.jpg" alt="steve" width="460" height="460" /></p>
<h3 style="text-align: center;">William Jones</h3>
<p style="text-align: center;"><span style="color: #999999;"><em>London University</em></span></p>
<p style="text-align: center;">
</p>
<p>
 
</p>
<p>&nbsp;</p>
<p><a href="http://vibethemes.com/envato/wplms/skins/oneinstructor/wp-content/uploads/2015/04/studying.png"><img class="alignnone size-full wp-image-40" src="http://vibethemes.com/envato/wplms/skins/oneinstructor/wp-content/uploads/2015/04/studying.png" alt="studying" width="446" height="356" /></a></p>
<p>
</p>
<h2>&nbsp;</h2>
<p>&nbsp;</p>
<h2>GET MORE FROM <span style="color: #ff6600;">TEACHING</span><br /> BY INSTRUCTING MORE STUDENTS&nbsp;<strong><span style="color: #ff6600;">ONLINE.</span>&nbsp;</strong></h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
<p>Get started now</p>
<p>
 
</p>
<h2>&nbsp;</h2>
<p>&nbsp;</p>
<h2>ONLINE EDUCATION WITH <span style="color: #ff6600;">BEST RESULTS</span><br /> AND&nbsp;GUARENTEED&nbsp;<strong><span style="color: #ff6600;">SATISFACTION.</span></strong></h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
<p>Get started now</p>
<p>
 
</p>

2.  Add custom Class on block : moderntabs and add custom CSS :

3.  Add this css in Theme customiser – Custom CSS or in Child theme – style.css or in wplms customiser – customiser.css

.moderntabs{text-align:center;}
.moderntabs .tabs{display:inline-block;border:none;}.moderntabs .tabs .nav.nav-tabs{display:inline-block;}
.moderntabs .nav.nav-tabs > li > a {  padding: 10px 24px;  border: 2px solid #222;  border-right: none;  border-radius: 0;}
.moderntabs .nav.nav-tabs > li:last-child > a{border-right:2px solid #222;}
.moderntabs .nav-tabs > li.active > a,.moderntabs .nav-tabs > li> a:hover, .moderntabs .nav-tabs > li.active > a:hover,.moderntabs  .nav-tabs > li.active > a:focus{background:#222;color:#fff;border-color:#222;}