For anyone that likes the default vb look of your table header, here is the way I did it.
Step 1:
Keep a back up of your adv_portal_Tab_Block_Main template, and ajaxtabs.css
Step 2:
Figure out the way you want the header to look. In the first image, I used the default gradient_tcat and gradient_thead gifs. In the second I used the standard gradient_tcat gif, then turned it upside down and renamed it to gradient_thead.gif. Figure out what you want, then upload the two images to your ajaxtabs folder.
Step 3:
Here is my adv_portal_Tab_Block_Main. The
red is what you HAVE to change, the
blue matches my css, but if you change the width anywhere, you'll have to edit it.
Code:
<tr><td>
<head>
<link rel="stylesheet" type="text/css" href="http://www.XXXX.com/forums/ajaxtabs/ajaxtabs.css" />
<script type="text/javascript" src="http://www.XXXX.com/forums/ajaxtabs/ajaxtabs.js">
/***********************************************
* Ajax Tabs Content script- ? Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/
* Ajax Tabs Content script- ? Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/
</script>
</head>
<body>
<div id="tabs" class="indentmenu">
<ul>
<li><a href="http://www.XXXX.com/forums/tabexternal.php" rel="tabcontainer" class="selected"><strong>» Tab1</strong></a></li>
<li><a href="http://www.XXXX.com/forums/tabexternal2.php" rel="tabcontainer"><strong>» Tab2</strong></a></li>
<li><a href="http://www.XXXX.com/forums/tabexternal3.php" rel="tabcontainer"><strong>» Tab3</strong></a></li>
<li><a href="http://www.XXXX.com/forums/tabexternal4.php" rel="tabcontainer"><strong>» Tab4</strong></a></li>
</ul>
<br style="clear: left" />
</div>
<div id="divcontainer" style="border:1px solid #003366; border-top: none; width:99.75%; height: 573px; margin-bottom:1em">
</div>
<script type="text/javascript">
var mytabs=new ddajaxtabs("tabs", "divcontainer")
mytabs.setpersist(false)
mytabs.setselectedClassTarget("link")
mytabs.init()
</script>
</body>
</td></tr>
Step 4:
Next up is the indented portion of my css. Replace the Indented portion of your ajaxtabs.css with the edited AFTER YOUR CHANGES below.
The
red are the values to change to match your site. The
blue are optional width, that if you change you
HAVE to change to match in your adv_portal_Tab_Block_Main template. I have put comments in
green so it's easy to know where you can find these settings in your admincp to match your site (because I hate trying to figure out css).
Code:
/* ######### CSS for Indented CSS Tabs. Remove if not using ######### */
.indentmenu{
font: 10px Arial;
width: 100%;
}
.indentmenu ul{
margin: 0;
padding: 0;
float: left;
width: 99.75%; /*used in conjunction with width variable in adv_portal_Tab_Block_Main*/
border: 1px solid #003366; /*AdminCP=>Styles & Templates=>Style Manager=>All Style Options=>Table Border: Background of your table*/
border-bottom: none;
background: #05173D; /*AdminCP=>Styles & Templates=>Style Manager=>All Style Options=>Page Background: Background of your table*/
}
.indentmenu ul li{
display: inline;
}
.indentmenu ul li a{
float: left;
color: #ffcc00; /*AdminCP=>Styles & Templates=>Style Manager=>All Style Options=>Category Strips: Font Color of your Category Strips*/
padding: 2px 13px; /*Edit the 13px if you want to pad the cells wider or slimmer*/
font-size: 8pt;
padding-top: 6px; /*shift text down 1px*/
padding-bottom: 6px;
text-decoration: none;
background: #003366 url(http://www.XXXX.com/forums/ajaxtabs/gradient_tcat.gif) repeat-x top left; /*AdminCP=>Styles & Templates=>Style Manager=>All Style Options=>Category Strips: Background Color and Image Name of your Category Strips*/
}
.indentmenu ul li a:visited{
color: #ffcc00; /*AdminCP=>Styles & Templates=>Style Manager=>All Style Options=>Category Strips: Font Color of your Category Strips*/
}
.indentmenu ul li a:hover{
color: #ffcc00 !important; /*AdminCP=>Styles & Templates=>Style Manager=>All Style Options=>Category Strips: Font Color of your Category Strips*/
padding-top: 7px; /*shift text down 1px*/
padding-bottom: 5px;
background: #05173D url(http://www.XXXX.com/forums/ajaxtabs/gradient_thead.gif) repeat-x top left; /*AdminCP=>Styles & Templates=>Style Manager=>All Style Options=>Table Header: Background Color and Image Name of your Table Header*/
}
.indentmenu ul li a.selected{
color: #ffcc00 !important; /*AdminCP=>Styles & Templates=>Style Manager=>All Style Options=>Category Strips: Font Color of your Category Strips*/
padding-top: 7px; /*shift text down 1px*/
padding-bottom: 5px;
background: #05173D url(http://www.XXXX.com/forums/ajaxtabs/gradient_thead.gif) repeat-x top left; /*AdminCP=>Styles & Templates=>Style Manager=>All Style Options=>Table Header: Background Color and Image Name of your Table Header*/
Step 5 (Optional if using for recent threads):
Use the tabexternal attached.
More Information