Tag: Scripts

I found these cool AJAX Tabs for Prototype and added some of my own style to them. If you need something like this then you might want to check these tabs out,  they are slick!  These AJAX tabs where built by 20bits.com. I needed to add more style to them for the new TMS theme that I was building yesterday.  Anyway take a look at the before and after screen shots. IF you install theme why not try out my CSS located at the bottom of this post.

Don’t forget to check out the Live Demo!!

Install the tabs by following the directions at this site. 20bits.com

Once you have installed the tabs grab the CSS below and have some fun!

.tabbed-pane * {
	margin: 0;
	padding: 0;
}
.tabbed-pane {
	margin:0 0 0 2px;
	width:305px;
	text-align:left;
        background: #222;
	color:#888;
	border:1px solid #333;
    padding:3px;
}

.tabbed-pane img
{
	width:300px;
	height:200px;
	margin:0 0 8px 0px;
	padding:1px;
	float:left;
	border:1px solid #000;
}

 .tabs {
	float: left;
	width: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
	background: #111;
	border-bottom: 1px solid #333;

}

.tabbed-pane ol {
       height:28px;
       margin-bottom:5px;
}
 .tabs li a.active {
	float: left;
	display: block;
	padding: 6px 8px 6px 8px;
	text-decoration: none;
	font-weight: bold;
	font-size: 90%;
	color: #EEE;
	background: #222;
        border: 1px solid #222;
}
 .tabs li {
	float: left;
	margin: 0 0px 0 0;
}

 .tabs li a {
	float: left;
	display: block;
	padding: 6px 8px 6px 8px;
	text-decoration: none;
	font-weight: bold;
	font-size: 90%;
	background: #111;
        color:#FFF000;

}

 .tabs li a:hover {
	float: left;
	display: block;
	padding: 6px 8px 8px 8px;
	text-decoration: none;
	font-weight: bold;
	font-size: 90%;
	color: #EEE;
	background: #333;
}

.tabbed-container {
	position: relative;
	clear: both;
	min-height: 10em;
}
.tabbed-container .overlay {
	position: absolute;
	clear: both;
	padding: 0px 5px 0px 5px;
	width: 290px;
        height: 100%;
	top: 0;
	left: 0;
	opacity:.70;
	filter:alpha(opacity=70);
	background:#222;
	text-align: center;
	z-index: 100;

}

.tabbed-container .overlay h3{
       	font-size:18px;
	font-weight:700;
        color:#ffF000;
}