Fully customizable actionbar on the Web

Don't you hate that non-customizable actionbar? With this tip, you can place your actionbar wherever you want, in what colour you want and whatever site you want.


Just put this in the onLoad event of the form:

STEP 1:

var oTable = document.forms[0].children[0];
if (oTable && oTable.tagName== "TABLE")   {
		document.forms[0].children[0].className = "actionBar";
	};

This little piece of code checks if there is an actionbar, and if so, it assigns a class to the table.

STEP 2: Put this in the HTML HEAD or create an external css file:

Table.actionBar {
	font-size 			: 95%;
    background:		rgb(120,172,255);
    width: 100%;
	border-collapse 		: collapse;
	margin 				: 20px 15px 20px;
	border 				: 1px solid;
    margin:60px 0px 10px 0px;
	padding: 17px 0px 0px 20px;
	height:33px; /* 14px + 17px + 2px = 33px */
	border-color:black;
	border-width:1px  1px; /* top and bottom borders: 1px; left and right borders: 0px */
	line-height:11px;
}

Table.actionBar a, Table.actionBar a:visited {
	color:				black;
	border:				1px solid rgb(120,172,255);/*rgb(255,128,0);*/
	text-decoration:	none;
	padding:			1px;
	padding-left:		5px;
	padding-right:		5px;
}

.actionBar TD,Table.actionBar a:hover {
	color:			black;
	background:		rgb(120,172,255);
	border-left:	1px solid rgb(234,242,255);/*#ffcc88;*/
	border-right:	1px solid rgb(0,66,174);/*#884400;*/
	border-top:		1px solid rgb(234,242,255);/*#ffcc88;*/
	border-bottom:	1px solid rgb(0,66,174);/*#884400;*/
}

hr{width:0px}

If you want another color, just change the values. Have fun with it.

This was first published in September 2001

Disclaimer: Our Tips Exchange is a forum for you to share technical advice and expertise with your peers and to learn from other enterprise IT professionals. TechTarget provides the infrastructure to facilitate this sharing of information. However, we cannot guarantee the accuracy or validity of the material submitted. You agree that your use of the Ask The Expert services and your reliance on any questions, answers, information or other materials received through this Web site is at your own risk.

Back to top