Changing color of menu!!

Arthur Peter · Post by **Arthur Peter** » Sat 27. Mar 2004, 07:38

I used the replacement tag for the complete menu. Unfortunately the color is in gray. Now my questions is can I change the color of this menu into a color that fits my site?
If so let me know. Hope to hear from someone.
Arthur Peter

frold · Post by **frold** » Sat 27. Mar 2004, 08:59

via the backend css control

admin > deafult css

search for this:

.nav_table, .nav_table a, .nav_table a:link, .nav_table a:active, .nav_table a:visited, .nav_table a:hover {
font-family: Verdana, Helvetica, Arial, sans-serif;
font-size: 10px;
color: #4A5966;
font-weight: normal;
text-decoration: none;
}
.nav_table a:hover {
text-decoration: underline;
}

.nav_table_active, .nav_table_active a, .nav_table_active a:link, .nav_table_active a:active, .nav_table_active a:visited, .nav_table_active a:hover {
font-family: Verdana, Helvetica, Arial, sans-serif;
font-size: 10px;
color: #4A5966;
font-weight: bold;
text-decoration: none;
}

Jan212 · Post by **Jan212** » Sat 27. Mar 2004, 21:19

hover row bg color etc.

include/inc_conf/conf.template_default.inc.php

start - Line 10

Code: Select all

// navigation table defaults
$template_default["nav_table_struct"]["table_border"]			= "0";
$template_default["nav_table_struct"]["table_width"]			= "100%";
$template_default["nav_table_struct"]["table_height"]			= "";
$template_default["nav_table_struct"]["table_bgcolor"]			= "";
$template_default["nav_table_struct"]["table_bgimage"]			= "";
$template_default["nav_table_struct"]["table_class"]			= "";
$template_default["nav_table_struct"]["table_cspace"]			= "0";
$template_default["nav_table_struct"]["table_cpad"]				= "0";
//
$template_default["nav_table_struct"]["space_width"]			= 10;
$template_default["nav_table_struct"]["space_left"]				= 7;
$template_default["nav_table_struct"]["space_right"]			= 10;
$template_default["nav_table_struct"]["space_celltop"]			= 2;
$template_default["nav_table_struct"]["space_cellbottom"]		= 2;
//
$template_default["nav_table_struct"]["cell_width"]				= "100%";
$template_default["nav_table_struct"]["cell_height"]			= "15";
$template_default["nav_table_struct"]["cell_bgcolor"]			= "";
$template_default["nav_table_struct"]["cell_bgimage"]			= "";
$template_default["nav_table_struct"]["cell_class"]				= "nav_table";
//
$template_default["nav_table_struct"]["cell_active_width"]		= "100%";
$template_default["nav_table_struct"]["cell_active_height"]		= "15";
$template_default["nav_table_struct"]["cell_active_bgcolor"]	= "";
$template_default["nav_table_struct"]["cell_active_bgimage"]	= "";
$template_default["nav_table_struct"]["cell_active_class"]		= "nav_table_active";
//
$template_default["nav_table_struct"]["js_over_effects"]		= 1;
//	
$template_default["nav_table_struct"]["linkimage_norm"]			= "img/article/nav_link_0.gif";
$template_default["nav_table_struct"]["linkimage_over"]			= "img/article/nav_link_1.gif";
$template_default["nav_table_struct"]["linkimage_active"]		= "img/article/nav_link_2.gif";
//
$template_default["nav_table_struct"]["row_norm_bgcolor"]		= "#D9DEE3";
$template_default["nav_table_struct"]["row_norm_bgimage"]		= "";
$template_default["nav_table_struct"]["row_norm_class"]			= "";
//	
$template_default["nav_table_struct"]["row_over_bgcolor"]		= "#D3ED7D"; //#AAB7C1
$template_default["nav_table_struct"]["row_active_bgcolor"]		= "#FFFFFF";
$template_default["nav_table_struct"]["row_active_bgimage"]		= "";
$template_default["nav_table_struct"]["row_active_class"]		= "";
//
$template_default["nav_table_struct"]["row_space"]				= 1;
$template_default["nav_table_struct"]["row_space_bgcolor"]		= "#4A5966";

frold · Post by **frold** » Sat 27. Mar 2004, 21:21

oooh yes stupid me!!

Arthur Peter · Post by **Arthur Peter** » Sun 28. Mar 2004, 12:56

I was able to understand everything and find the post that was sent to me by "frold"
but "Jan212" added something I didn't understand.

What do you mean with "hover row bg color etc." Sorry I am just new in this all. Do you mean that all the post that contain this message that is where I need to change the color I want it to be? Do I need to do this in my "default css"?

You also told me to go to
"include/inc_conf/conf.template_default.inc.php"

I presume that is in my File manager and not in my default css. Is that correct? What do I need to do in my file manager?

Do you mean with start line 10 - space width?

Thanks,
Arthur Peter

Jan212 · Post by **Jan212** » Sun 28. Mar 2004, 14:13

that is going to be complicated

- but no prob

yes, the path i posted is a file in the phpwcms folder...
you could define the row over background color, the color of the spacer and so on there.
yes the code you have to change is starting at line ten. open the code in an editor and you'll see what i mean

sorry, i that presupposed some basics in html and filemanagment, i thought you were able to understand my posting, but with this explanation it should work. if not feel free to post again

Arthur Peter · Post by **Arthur Peter** » Mon 29. Mar 2004, 01:37

Okay I went to the file you mentioned.

"include/inc_conf/conf.template_default.inc.php"

Found all kind of "$template_default" codes and many different topics e.g. article, breadcrumbs, date and time formatting, rss image, new articles etc. etc.

But was not able to find any code or post with the name
"navigation table defaults"

Any other ideas?

Arthur Peter

Jérôme · Post by **Jérôme** » Mon 29. Mar 2004, 09:21

The excerpt jan212 showed to you contains all the variables that are concerned with the navigation table. I will try to break down the most "interesting" things

.

With all lines that contain the substring "bgcolor", you can change the background-color of this item.

background-color of the whole table that contains the navigation:

Code: Select all

$template_default["nav_table_struct"]["table_bgcolor"]         = "";

background-color of "normal" navigation rows (if a row is not active and if you don't move the mouse pointer on it)

Code: Select all

$template_default["nav_table_struct"]["row_norm_bgcolor"]      = "#D9DEE3";

background-color of "active" navigation rows (when you have clicked on a navigation item)

Code: Select all

$template_default["nav_table_struct"]["row_active_bgcolor"]      = "#FFFFFF";

background-color of "hover" navigation rows (when you move the mouse pointer on a navigation item without clicking at it)

Code: Select all

$template_default["nav_table_struct"]["row_over_bgcolor"]      = "#D3ED7D"; //#AAB7C1

It is the same with all other properties: e.g. bgimage defines a background-image for the different states.

In addition to that, you can also define and assign CSS-classes to the different states of the navigation by editing the classes frold mentioned some posts ago. You should not define the same properties at both places.

So, don't define a background color in conf.template_default.inc.php and in the CSS at the same time, because it is not predictable which browser will handle which definition.

Jan212 · Post by **Jan212** » Mon 29. Mar 2004, 11:13

thanks 2 jerome for detailled explanation...

Arthur Peter · Post by **Arthur Peter** » Tue 30. Mar 2004, 09:06

Thanks for explanation that is great.
Before I start changing things i just would like to check something.

In my file

"include/inc_conf/conf.template_default.inc.php"

I didn't find any "navigation table defaults", however I found them

via the backend css control admin > default css

Now my question is two fold. Do I need to change the color etc. in my default css or do I just have to add these codes you gave me in the "include/inc_conf/conf.template_default.inc.php" file?

Thanks for all your help. I am getting to understand things a little now. Thanks for your help.

Hope to hear from someone.
Arthur Peter

Jérôme · Post by **Jérôme** » Tue 30. Mar 2004, 11:17

You should have a look at both. If you compare the properties of the CSS and the content of conf.template_default.inc.php, you will see that you can either define everything at just one place or mix it up.

The most standard (W3C, of which I am a big fan

) compliant way would be to define everything in the CSS. I think, the easiest way is to give you an example/template for a CSS-based definition which you can modify afterwards

conf.template_default.inc.php

Code: Select all

// navigation table defaults
$template_default["nav_table_struct"]["table_border"]			= "0";
$template_default["nav_table_struct"]["table_width"]			= "100%";
$template_default["nav_table_struct"]["table_height"]			= "";
$template_default["nav_table_struct"]["table_bgcolor"]			= "";
$template_default["nav_table_struct"]["table_bgimage"]			= "";
$template_default["nav_table_struct"]["table_class"]			= "";
$template_default["nav_table_struct"]["table_cspace"]			= "0";
$template_default["nav_table_struct"]["table_cpad"]				= "0";
//
$template_default["nav_table_struct"]["space_width"]			= 10;
$template_default["nav_table_struct"]["space_left"]				= 7;
$template_default["nav_table_struct"]["space_right"]			= 10;
$template_default["nav_table_struct"]["space_celltop"]			= 2;
$template_default["nav_table_struct"]["space_cellbottom"]		= 2;
//
$template_default["nav_table_struct"]["cell_width"]				= "100%";
$template_default["nav_table_struct"]["cell_height"]			= "15";
$template_default["nav_table_struct"]["cell_bgcolor"]			= "";
$template_default["nav_table_struct"]["cell_bgimage"]			= "";
$template_default["nav_table_struct"]["cell_class"]				= "nav_table";
//
$template_default["nav_table_struct"]["cell_active_width"]		= "100%";
$template_default["nav_table_struct"]["cell_active_height"]		= "15";
$template_default["nav_table_struct"]["cell_active_bgcolor"]	= "";
$template_default["nav_table_struct"]["cell_active_bgimage"]	= "";
$template_default["nav_table_struct"]["cell_active_class"]		= "nav_table_active";

As you can see, there are no color definitions at all. The most interesting parts are the "cell_" and "cell_active_" properties that define the menu items when you hover or don't hover over them.

Both have different CSS properties assigned: "nav_table" for the inactive cells and "nav_table_active" for the active cells.

Now go into your CSS-file and search the parts that begin with ".nav_table" and ".nav_table_active"

This could look like the following:

Code: Select all

.nav_table, .nav_table a, .nav_table a:link, .nav_table a:active, .nav_table a:visited, .nav_table a:hover {
	font-family: Verdana, Helvetica, Arial, sans-serif;
	font-size: 10px;
	color: #4A5966;
	font-weight: normal;
	text-decoration: none;
}

.nav_table_active, .nav_table_active a, .nav_table_active a:link, .nav_table_active a:active, .nav_table_active a:visited, .nav_table_active a:hover {
	font-family: Verdana, Helvetica, Arial, sans-serif;
	font-size: 10px;
	color: #4A5966;
	font-weight: bold;
	text-decoration: none;
}

In these parts you can define everything you want. Interesting properties shoud be "background-color" and "color". But you can assign multiple properties. For example "font-weight: bold", if you want the text to be displayed as... guess it? ... bold text.

PS: To be honest. In conf.template_defaults.inc.php I should not have defined the cell_height and I should have done this in the CSS, if I was consequent. But I am not, and lazy as well. And in addition to that, some browsers still have problems with CSS and tables, so I will keep it as it is.

PPS: To be sure, you can also define everything in the inc.php and the CSS. But only if you use exactly the same values, and although I don't like the idea and it is not standards compliant (did I manteion that I am a biiig fan... ?

). But so you can be sure that even browsers that don't like CSS too much (AFAIK Konqueror supports only CSS1) will display your pages correctly.

ionrock · Post by **ionrock** » Tue 30. Mar 2004, 22:49

Konquerer sucks and people that use it should use a better browser when looking at my site!

Other than that

nice post. I think I will look into making my menus all div and lists pretty soon....

Standards are good... Konquerer is bad

Jérôme · Post by **Jérôme** » Tue 30. Mar 2004, 23:01

ack, ionrock

Arthur Peter · Post by **Arthur Peter** » Wed 31. Mar 2004, 00:30

This is great!!! I think I understand it and I will be experimenting with it. Thanks for all your help and explanation. This is great!!

Arthur Peter