Footer Menu Support Thread

I am currently working on a dummy site. It is queencharlottesoaps.com/test. I normally keep it password protected, but I removed that for you.

mretzloff:

Excellent add-on. Thank you!

I do have one question, however. How can I remove the legal and "Powered by Zen Cart" from the footer? When I change the background color in the footer CSS file, I want the legal and "Powered by Zen Cart" to stay the color of the main page's background color.

to change background color of the footer open includes/templates/YOUR_TEMPLATE/css/stylesheet_footer_menu.css

find the following declaration and change the highlighted section as indicated.

#footer {
margin: 0 auto;
text-align: left;
background-color: #DCDCDC;
width: 960px;
height:112px;
clear:both;
}

That also changes the background color of legal and "Powered by Zen Cart" stuff. I want to keep that stuff at #DCDCDC and change the rest of the footer to another color. Is there any way to do that?

Thank you!

mretzloff:

That also changes the background color of legal and "Powered by Zen Cart" stuff. I want to keep that stuff at #DCDCDC and change the rest of the footer to another color. Is there any way to do that?

Thank you!

open stylesheet_footer_menu.css

find the following add a background color where indicated

#siteinfoLegal {
margin:0 auto;
padding: .5em 0 0;
font-size: 0.9em;
text-align:center;
width:100%;
line-height:normal;
background:#fff;
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;}

That worked. Thank you very much!

mretzloff:

That worked. Thank you very much!

glad to help

Clyde, sorry to bug you again, but I would appreciate it if you could please answer two questions for me:

1. How can I remove the space circled in red in this screenshot?

2. Is there any way to make the lines circled in red in this screenshot independent of amount of links next to them? As you can see, the more links that are to the left of the lines, the longer they are. I want to make all of the lines one size, regardless of how many links are to the left of them.

I am testing a dummy site at "queen charlotte soaps .com /test" (without the quotations and spaces).

mretzloff:

Clyde, sorry to bug you again, but I would appreciate it if you could please answer two questions for me:

1. How can I remove the space circled in red in this screenshot?

2. Is there any way to make the lines circled in red in this screenshot independent of amount of links next to them? As you can see, the more links that are to the left of the lines, the longer they are. I want to make all of the lines one size, regardless of how many links are to the left of them.

I am testing a dummy site at "queen charlotte soaps .com /test" (without the quotations and spaces).

1. no - it is showing the background color of the mainWrapper declaration in your stylesheet.css

2. I'd have to do some experimenting to see if its possible.

clydejones:

2. I'd have to do some experimenting to see if its possible.

If there was a way, that would be great. Thank you for the hard work.

Clyde, just to get back about the earlier post, that area I circled in red was able to be removed by removing the patting from margin-bottom from #footer in the stylesheet_footer_menu.css file. I just figured I would mention that to help anyone else who may want to change that.

You can hard-code the list height by adding to your stylesheet_footer_menu

#navSuppWrapper ul {height:10.0em;}

This will need to be adjusted to fit the number of links in the tallest column.

I have finally figured out my footer and thought I had it perfect but it's not lol. http://www.frompropertorocker.com

It looks great (at least on my end) in Firefox and IE. Chrome it looks horrible. lol

How do I fix it so it shows up better in Chrome without it making it look horrible in the other two?

Thanks in advance!

nolsowski:

I have finally figured out my footer and thought I had it perfect but it's not lol. http://www.frompropertorocker.com

It looks great (at least on my end) in Firefox and IE. Chrome it looks horrible. lol

How do I fix it so it shows up better in Chrome without it making it look horrible in the other two?

Thanks in advance!

You might want to put the following inside a div as indicated; style the div as follows:

.social {
clear:both;
width:100%;
}

<div class="social">
<span id="social-media">

<a href="http://www.twitter.com/From_Proper"><img src="includes/templates/alysa_rounded/images/twitter.png" class="twitter-image" alt="twitter link" /></a>
<a href="http://www.facebook.com/fromproper"><img src="includes/templates/alysa_rounded/images/facebook.png" class="facebook-image" alt="facebook link" /></a>
</span>

gjh42:

You can hard-code the list height by adding to your stylesheet_footer_menu

#navSuppWrapper ul {height:10.0em;}

This will need to be adjusted to fit the number of links in the tallest column.

Perfect!

Thank you for the help.

clydejones:

You might want to put the following inside a div as indicated; style the div as follows:

.social {
clear:both;
width:100%;
}

<div class="social">
<span id="social-media">

<a href="http://www.twitter.com/From_Proper"><img src="includes/templates/alysa_rounded/images/twitter.png" class="twitter-image" alt="twitter link" /></a>
<a href="http://www.facebook.com/fromproper"><img src="includes/templates/alysa_rounded/images/facebook.png" class="facebook-image" alt="facebook link" /></a>
</span>

<span id="paypal-logo"> <a href="https://www.paypal.com/us/verified/pal=frompropertorocker%40gmail.com"><img src="includes/templates/alysa_rounded/images/paypal.gif" class="paypal-image" alt="paypal link" /></a> </span> </div>

Thank you! I will give it a shot.

clydejones:

You might want to put the following inside a div as indicated; style the div as follows:

.social {
clear:both;
width:100%;
}

<div class="social">
<span id="social-media">

<a href="http://www.twitter.com/From_Proper"><img src="includes/templates/alysa_rounded/images/twitter.png" class="twitter-image" alt="twitter link" /></a>
<a href="http://www.facebook.com/fromproper"><img src="includes/templates/alysa_rounded/images/facebook.png" class="facebook-image" alt="facebook link" /></a>
</span>

<span id="paypal-logo"> <a href="https://www.paypal.com/us/verified/pal=frompropertorocker%40gmail.com"><img src="includes/templates/alysa_rounded/images/paypal.gif" class="paypal-image" alt="paypal link" /></a> </span> </div>

Okay brain fart lol. Where would I put this code?

nolsowski:

Okay brain fart lol. Where would I put this code?

I'm guessing you made modifications to tpl_footer_menu.php

The css change would be made to stylesheet_footer_menu.css

clydejones:

I'm guessing you made modifications to tpl_footer_menu.php

The css change would be made to stylesheet_footer_menu.css

Yep I did make modifications in the tpl_footer. I added the code to the stylesheet_footer_menu and I am lost now. I can't even get them to where they were before.

Oh I added it to my test site here http://frompropertorocker.com/fptr_test/index.php?main_page=

nolsowski:

Yep I did make modifications in the tpl_footer. I added the code to the stylesheet_footer_menu and I am lost now. I can't even get them to where they were before.

Oh I added it to my test site here http://frompropertorocker.com/fptr_test/index.php?main_page=

This does not go in the stylesheet_footer_menu.css but in tpl_footer_menu.php

<div class="social">
<span id="social-media">

<a href="http://www.twitter.com/From_Proper"><img src="includes/templates/alysa_rounded/images/twitter.png" class="twitter-image" alt="twitter link" /></a>
<a href="http://www.facebook.com/fromproper"><img src="includes/templates/alysa_rounded/images/facebook.png" class="facebook-image" alt="facebook link" /></a>
</span>

<span id="paypal-logo">
<a href="https://www.paypal.com/us/verified/pal=frompropertorocker%40gmail.com"><img src="includes/templates/alysa_rounded/images/paypal.gif" class="paypal-image" alt="paypal link" /></a>
</span>
</div>

This goes in the stylesheet_footer_menu.css
.social {
clear:both;
width:100%;

clydejones:

This does not go in the stylesheet_footer_menu.css but in tpl_footer_menu.php

<a href="http://www.twitter.com/From_Proper"><img src="includes/templates/alysa_rounded/images/twitter.png" class="twitter-image" alt="twitter link" /></a>
<a href="http://www.facebook.com/fromproper"><img src="includes/templates/alysa_rounded/images/facebook.png" class="facebook-image" alt="facebook link" /></a>
</span>

Ok got them where they need to be. How do I get it so it looks good in Chrome now?