The CSS and the JavaScript go in Other > Global Scripts > HEAD section. The HTML goes in the Source view of the page you want the tabs to show up on. CSS has to be in style tags, as follows:
Code:
<style type="text/css">
#tabs {
border:1px solid #ccc;
height:28px;
background:#eff5f9;
padding-left: 40px;
padding-top:45px;
-moz-box-shadow: inset 0 -2px 2px #dadada;
-webkit-box-shadow:inset 0 -2px 2px #dadada;
box-shadow: inset 0 -2px 2px #dadada;
border-top-left-radius:4px;
border-top-right-radius:4px;
}
#tabs li {
float:left;
list-style:none;
border-top:1px solid #ccc;
border-left:1px solid #ccc;
border-right:1px solid #ccc;
margin-right:5px;
border-top-left-radius:3px;
border-top-right-radius:3px;
-moz-box-shadow: 0 -2px 2px #dadada;
-webkit-box-shadow: 0 -2px 2px #dadada;
box-shadow: 0 -2px 2px #dadada;
}
#tabs li a {
font-family:Arial, Helvetica, sans-serif;
font-size:13px;
font-weight:bold;
color:#000000;
padding:7px 14px 6px 12px;
display:block;
background:#FFFFFF;
border-top-left-radius:3px;
border-top-right-radius:3px;
text-decoration:none;
background: -moz-linear-gradient(top, #ebebeb, white 10%);
background: -webkit-gradient(linear, 0 0, 0 10%, from(#ebebeb), to(white));
border-top: 1px solid white;
text-shadow:-1px -1px 0 #fff;
outline:none;
}
#tabs li a.inactive{
padding-top:5px;
padding-bottom:5px;
color:#666666;
background: -moz-linear-gradient(top, #dedede, white 75%);
background: -webkit-gradient(linear, 0 0, 0 75%, from(#dedede), to(white));
border-top: 1px solid white;
}
#tabs li a:hover, #tabs li a.inactive:hover {
border-top: 1px solid #dedede;
color:#000000;
}
.container{
clear:both;
padding:10px 0px;
width:664px;
background-color:#fff;
text-align:left;
}
</style>
Change the width of the tabbed container in the container class in the CSS.
The JavaScript looks like this (I have edited it with the right code for IE):
Code:
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('#tabs li a:not(:first)').addClass('inactive');
$('.container').hide();
$('.container:first').show();
$('#tabs li a').click(function(){
var t = $(this).attr('href');
$('#tabs li a').addClass('inactive');
$(this).removeClass('inactive');
$('.container').hide();
$(t).fadeIn('slow');
return false;
})
if($(this).hasClass('inactive')){ //this is the start of our condition
$('#tabs li a').addClass('inactive');
$(this).removeClass('inactive');
$('.container').hide();
$(t).fadeIn('slow');
}
});
</script>
Put the JavaScript before or after the CSS.
Add this Standards mode doctype to Other > Global Scripts > Before anything else in the file:
Code:
<!DOCTYPE html>
Be warned that XSitePro will no longer work as expected in certain areas. In general these are minor and will not affect your site, but it may confuse you if you are used to the way XSP works in Quirks mode. Note: The default Lightbox won't work properly, so you'll have to use a third party Lightbox like Slimbox.
Login
Register
FAQ
Search
