Footer Menu -Proposed revisions to stylesheet

I have found Footer Menu by **Clyde Jones **(http://www.zen-cart.com/forum/showthread.php?t=127322) to be a really great add-on.

I would like to suggest however that Stylesheet_footer_menu.css be slightly revised and then preferably added to the end of your main Stylesheet.css instead of used as a separate .css.

You will notice that footer_menu.css contains many settings that are included in your main Stylesheet.css. This includes #navSuppWrapper. There should only be 1. Edit the one in you main stylesheet to include the setting for footer menu_css.

Other potential conflicts are with UL, LI, LI a, Li a:hover since these are also first called in your main stylesheet.
Example: li a {margin:0;padding-left:2em;display:block;}

This will likely cause an inline list in your header menu to read a list as block,

An easy work around is this:

Default Footer_Menu.css

#footer {clear:both;margin:0;}
#navSuppWrapper {
margin: 10px 5px 0;
padding: 0;
background:none;
font-weight: bold;
color: #000;
}
dl {margin: 0 0 3px 0;padding:0;clear:both;height:79px;width:100%;}/Adjust the height and width of the menu/
dt {margin-bottom:.3em;font-weight:bold;}
dd {margin:0;padding:0;float:left;width:24.3%;}/Column width of the menu - currently set for 4 columns/
ul {margin:0;padding:0;list-style: none;}
li {margin:0;padding:0;}
li a {margin:0;padding-left:2em;display:block;}
li a:hover {background:#FFBD3B;}
.menuTitle {margin:0;padding-bottom:.3em;text-align:center;font-size:1.1em;}
.first, .second, .third {border-right:1px dotted #000;}
#siteinfoLegal {
margin:0 auto;
padding: .5em 0 0;
font-size: 0.9em;
text-align:center;
width:100%;
line-height:normal;
clear:both;
}
#siteinfoLegal a {padding: 0 0.5em 0 0.5em;color: #000;font-weight:bold;white-space: nowrap; }
#siteinfoLegal a:hover {color: #000;background: #EAC27C;}

Change to:

#footer {clear:both;margin:0;
}
#footer li a:link { color: #5E84A0; }
#footer a { color: #5E84A0; }
#footer li a:hover {
background:#C5A754;
color: #333333;
}
#footer li a {margin:0;padding-left:2em;display:block;
}

#footer dl {margin: 0 0 3px 0;padding:0;clear:both;height:85px;width:100%;
background-color: #171729;
}/Adjust the height and width of the menu/

#footer dt {margin-bottom:.3em;font-weight:bold;
color: #FFFFAA;
}

#footer dd {margin:0;padding:0;float:left;width:24.3%;
}/Column width of the menu - currently set for 4 columns/

ul {margin:0;padding:0;list-style: none; /*applies to header and footer */
}

li {margin:0;padding:0;
color: C0AE2C;
}

li a:hover {
color: #000;
background:#FFBD3B;
}

.menuTitle {margin:0;padding-bottom:.5em;text-align:center;font-size:1.2em;
/* color: #FFF8DC; */
color: #C5A754;
}
.first, .second, .third {
border-right:1px dotted #a5a5a5;

}
#siteinfoLegal {
margin:0 auto;
padding: .5em 0 0;
font-size: 0.9em;
text-align:center;
width:100%;
line-height:normal;
clear:both;
}
#siteinfoLegal a {padding: 0 0.5em 0 0.5em;color: #000;font-weight:bold;white-space: nowrap; }
#siteinfoLegal a:hover {color: #000;background: #FFBD3B;}

Sigp220:

I have found Footer Menu by **Clyde Jones **(http://www.zen-cart.com/forum/showthread.php?t=127322) to be a really great add-on.

I would like to suggest however that Stylesheet_footer_menu.css be slightly revised and then preferably added to the end of your main Stylesheet.css instead of used as a separate .css.

You will notice that footer_menu.css contains many settings that are included in your main Stylesheet.css. This includes #navSuppWrapper. There should only be 1. Edit the one in you main stylesheet to include the setting for footer menu_css.

Other potential conflicts are with UL, LI, LI a, Li a:hover since these are also first called in your main stylesheet.
Example: li a {margin:0;padding-left:2em;display:block;}

This will likely cause an inline list in your header menu to read a list as block,

An easy work around is this:

Default Footer_Menu.css

#footer {clear:both;margin:0;}
#navSuppWrapper {
margin: 10px 5px 0;
padding: 0;
background:none;
font-weight: bold;
color: #000;
}
dl {margin: 0 0 3px 0;padding:0;clear:both;height:79px;width:100%;}/Adjust the height and width of the menu/
dt {margin-bottom:.3em;font-weight:bold;}
dd {margin:0;padding:0;float:left;width:24.3%;}/Column width of the menu - currently set for 4 columns/
ul {margin:0;padding:0;list-style: none;}
li {margin:0;padding:0;}
li a {margin:0;padding-left:2em;display:block;}
li a:hover {background:#FFBD3B;}
.menuTitle {margin:0;padding-bottom:.3em;text-align:center;font-size:1.1em;}
.first, .second, .third {border-right:1px dotted #000;}
#siteinfoLegal {
margin:0 auto;
padding: .5em 0 0;
font-size: 0.9em;
text-align:center;
width:100%;
line-height:normal;
clear:both;
}
#siteinfoLegal a {padding: 0 0.5em 0 0.5em;color: #000;font-weight:bold;white-space: nowrap; }
#siteinfoLegal a:hover {color: #000;background: #EAC27C;}

Change to:

#footer {clear:both;margin:0;
}
#footer li a:link { color: #5E84A0; }
#footer a { color: #5E84A0; }
#footer li a:hover {
background:#C5A754;
color: #333333;
}
#footer li a {margin:0;padding-left:2em;display:block;
}

#footer dl {margin: 0 0 3px 0;padding:0;clear:both;height:85px;width:100%;
background-color: #171729;
}/Adjust the height and width of the menu/

#footer dt {margin-bottom:.3em;font-weight:bold;
color: #FFFFAA;
}

#footer dd {margin:0;padding:0;float:left;width:24.3%;
}/Column width of the menu - currently set for 4 columns/

ul {margin:0;padding:0;list-style: none; /*applies to header and footer */
}

li {margin:0;padding:0;
color: C0AE2C;
}

li a:hover {
color: #000;
background:#FFBD3B;
}

.menuTitle {margin:0;padding-bottom:.5em;text-align:center;font-size:1.2em;
/* color: #FFF8DC; */
color: #C5A754;
}
.first, .second, .third {
border-right:1px dotted #a5a5a5;

}
#siteinfoLegal {
margin:0 auto;
padding: .5em 0 0;
font-size: 0.9em;
text-align:center;
width:100%;
line-height:normal;
clear:both;
}
#siteinfoLegal a {padding: 0 0.5em 0 0.5em;color: #000;font-weight:bold;white-space: nowrap; }
#siteinfoLegal a:hover {color: #000;background: #FFBD3B;}

A solution is posted in the thread post

You are free to add this to your main stylesheet if you wish, however when creating a mod of this type it is easier to create a separate and specific stylesheet so as not to override changes that may have already been made to the main stylesheet.

Clyde,

I rate Footer_menu a 9+ as a useful add-on. :clap:

Including Stylesheet_footer_menu.css is the only practical way to package the add-on.

The main point I was try to convey is that Stylesheet_footer_menu.css contains settings that may likely change global settings in the main Stylesheet.css.

It may not be apparent to some users that #navSuppWrapper in Stylesheet_footer_menu.css is also declared in the default Zen Cart Main Stylesheet.css.

List Selectors li, ul, li a, are also declared globally in the main stylesheet.

Lists are used in almost all header menus.

If you simply modify your selectors in Stylesheet_Footer_menu to include the ID selector, no changes will be needed to any users existing template settings.

Example:

Stylesheet_Footer_menu.css

li a {margin:0;padding-left:2em;display:block;}

Proposed modification:

#footer li a {margin:0;padding-left:2em;display:block;}

Add the ID selector #Footer to each list declaration, eg. (li, ul, ul a, li a:hover, etc.) in Stylesheet_footer_menu.css.

This should eliminate any possibility that already declared lists in the main stylesheet or any other stylesheet will not be globally changed by Stylesheet_footer_menu.css

Clyde, please accept my apology. I should have contacted you first.