Changing background and font colors

d_weaver · #1 02-27-2008, 07:17 PM

http://www.dynamicdrive.com/dynamicindex1/sm/index.htm

jscheuer1 · #2 02-27-2008, 10:17 PM

The background color is set here on the page:

Code:

<script language="JavaScript">

//Top Nav Bar I v2.1- By Constantin Kuznetsov Jr. (script@esolutiononline.com) 
//Modified by Dynamic Drive for NS6/Opera6 compatibility and code streamlining March 4th, 2002
//Visit http://www.dynamicdrive.com for this script

var keepstatic=1 //specify whether menu should stay static 0=non static (works only in IE4+)
var menucolor="#000000" //specify menu color
var submenuwidth=150 //specify sub menus' color

</script>

Other colors may be set in the style section (using regular css style rules):

Code:

<html>

<head>
<style>
all.clsMenuItemNS, .clsMenuItemIE{text-decoration: none; font: bold 12px Arial; color: white; cursor: hand; z-index:100}
#MainTable A:hover {color: yellow;}
</style>

<script language="JavaScript">

//Top Nav Bar I v2.1- By Constantin Kuznetsov Jr. (script@esolutiononline.com) 
//Modified by Dynamic Drive for NS6/Opera6 compatibility and code streamlining March 4th, 2002
//Visit http://www.dynamicdrive.com for this script

var keepstatic=1 //specify whether menu should stay static 0=non static (works only in IE4+)
var menucolor="#000000" //specify menu color
var submenuwidth=150 //specify sub menus' color

</script>

<title>Welcome to Homepage</title>
</head>

<body marginwidth="0" marginheight="0" leftmargin="0" topmargin="0">

<script language="Java . . .

The above examples are both taken from the sample.htm file in the distribution archive. What is not made clear, is that each menu item group has an id as assigned in menucontext.js. These id's may also be styled, using normal css id selectors and rules.

d_weaver · #3 02-27-2008, 11:53 PM

I can find no stylings on the menucontect.js. However I have found identical coding on the actual index.html page. I also have not found any sytle sheets reference in this cod. I am just dense? I looked for ccs in a search of the code. When I try to change the roll over text color on the index page instead of moving to a shade of red (#9A0150), I get blue. As when I treied to change the font to green ("#003300"). But so far I've only tried this on the index.html not in the menu.js. This is what is on the index page, identical to what is on the menu.js. Do all pages have to change in order to see results?

Code:

<STYLE>all.clsMenuItemNS {
	Z-INDEX: 100; FONT: bold 11px arial; CURSOR: hand; COLOR: <"#003300">; TEXT-DECORATION: none
}
.clsMenuItemIE {
	Z-INDEX: 100; FONT: bold 11px arial; CURSOR: hand; COLOR: <"#003300">; TEXT-DECORATION: none
}
#MainTable A:hover {
	COLOR: RED; TEXT-DECORATION: underline
}
</STYLE>

<SCRIPT language=JavaScript>
//Top Nav Bar I v2.1- By Constantin Kuznetsov Jr. (script@esolutiononline.com) 
//Modified by Dynamic Drive for NS6/Opera6 compatibility and code streamlining March 4th, 2002
//Visit http://www.dynamicdrive.com for this script
var keepstatic=0 //specify whether menu should stay static 0=non static (works only in IE4+)
var menucolor="#f7F9CD"//specify menu color
var submenuwidth=285 //specify sub menus' color
</SCRIPT>

<style fprolloverstyle>A:hover {color: RED}
</style>

<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
     function openWindow(url) {
     popupWin = window.open(url, 'remote',  'menubar=no,toolbar=no,location=no,directories=no,status=no,scrollbars=yes,resizable=no,width=660,height=480,left=50,top=50')
}
//  End -->
</script>

<base target="_self">

<meta name="Microsoft Theme" content="spaef 1111">
</HEAD>
<BODY topMargin=0 marginheight="0" marginwidth="0" leftmargin="0" backgroundcolor="#B9b9C1">
<script language="JavaScript" src="../../SPAEF/menu.js"></script>
<script language="JavaScript" src="../../SPAEF/menucontext.js"></script>
<SCRIPT language=JavaScript>
showToolbar();
</SCRIPT>

<SCRIPT language=JavaScript>
function UpdateIt(){
if (ie&&keepstatic&&!opr6)
document.all["MainTable"].style.top = document.body.scrollTop;
setTimeout("UpdateIt()", 200);
}
UpdateIt();
</SCRIPT>

jscheuer1 · #4 02-28-2008, 04:08 AM

Style is a common and standard optional feature of all web pages. It may be inline to an element, ex:

HTML Code:

<span style="color:red;">Hi There!</span>

It can also be in the head of each page (the method from the example page used with this script), or in a separate external file linked to the head of each page that is meant to use it.

There is no style in the menucontext.js file. All I said was that it establishes id selectors for each menu group. These may be styled in the stylesheet in the head of a page or in the external stylesheet linked to the head of the page.

I was hoping that you were already familiar with these fairly basic concepts, but it is OK that you are not, many people are not, more people in fact than are familiar with them.

To change the text color to that shade of green and the hover to that shade of red:

Code:

<style type="text/css">
all.clsMenuItemNS, .clsMenuItemIE {
text-decoration: none; 
font: bold 12px Arial; 
color: #003300; 
cursor: hand; 
z-index:100;
}
#MainTable A:hover {
color: #9A0150;
}
</style>

One could also put the above information (minus the opening and closing style tags) in an external file using a text editor like NotePad:

Code:

all.clsMenuItemNS, .clsMenuItemIE {
text-decoration: none; 
font: bold 12px Arial; 
color: #003300; 
cursor: hand; 
z-index:100;
}
#MainTable A:hover {
color: #9A0150;
}

Save it as - say mymenu.css, and put this tag in the head of each page instead of putting the style section in the head of each page:

Code:

<link rel="stylesheet" href="mymenu.css" type="text/css">

I think I will leave the bit about using selectors from menucontext.js to another time, it is a fine point. Let's first make sure that you are able to make the menu do what you want it to.

d_weaver · #5 02-28-2008, 09:48 AM

I appreciate the assistance. It's true I am pretty much a greenhorn in the coding of web pages.

Thread Tools	Search this Thread
Show Printable Version Email this Page	Search this Thread: Advanced Search