I decided to scrap the default Boonex footer navigation links and add in three columns instead. This example is pretty crude, but gets the job done:
Sorry the graphic is a bit dark, but this piece has been tailored to my new template design. Here's the CSS you'll want to add (you can add it under just about any CSS file within your template, for the footer I chose common.css)
footer {background: #1a1a1a;background-image: url(../images/footer.png);height: 240px;border-top: 1px solid #3f3830;margin-top: 15px;}footer .widget-title { font-size: 14px;color: #fff;text-shadow: 0px 1px 0px #000;text-transform: uppercase;margin-bottom: 10px;}.container { position: relative;width: 1140px;margin: 0 auto;padding: 0;}.container .column,.container .columns { float: left;display: inline;width: 338px;height: 200px;padding-left: 10px;padding-right: 10px;margin-top: 20px;margin-left: 10px;margin-right: 10px;color: #ccc;background-color: #1c1c1c;opacity:0.6;border: 1px solid #111111;}.custom_menu_widget ul { }.custom_menu_widget ul li { }.custom_menu_widget ul li a { display: block;font-size: 12px;color: #bfbfbf;text-decoration: none;text-shadow: 0px 1px 0px #000;}.custom_menu_widget ul li a:hover { color: #fff;}
Now, add the HTML to your footer. _footer.html should look like this:
<bx_injection:injection_footer /><!-- FOOTER Start --><footer><div class="container"><!-- Custom Columns Start --><div class="three columns"><div class="custom_menu_widget"><h3 class="widget-title">Column 1</h3><p>Here's a quick description about our community.</p><p>Another paragraph with more explaination on why you should join us!</p></div></div><div class="three columns"><div class="custom_menu_widget"><h3 class="widget-title">Column 2</h3><ul><li><a href="privacy.php">Read our Privacy Policy</a></li><li><a href="terms_of_use.php">Terms of Use</a></li><li><a href="faq.php">Frequently Asked Questions</a></li><li><a href="#">Hyperlink 4</a></li>
</ul></div></div><div class="three columns"><div class="custom_menu_widget"><h3 class="widget-title">Column 3</h3><ul><li><a href="#">Hyperlink 1</a></li><li><a href="#">Hyperlink 2</a></li><li><a href="#">Hyperlink 3</a></li></ul></div></div><!-- Custom Columns End --></div></footer><!-- FOOTER End --> </body></html>
That's it! Using an enhanced text editor such as Notepad++, you can edit the values quite easily.
Some things to note:
The designated width for this implentation is 1140px, I am following 7.1 defaults with this design.
If you need to change the overall width, be sure to update the column width to reflect the new total. I currently have each column at 338px wide plus 2 more pixels being used for borders (340px total). That puts us at 1020px for the boxes & 20px left for inner margins.
You can change the colors, remove borders etc as you see fit. The footer.png graphic I use is 280px height & width repeats.
