A Footer similar to the JR Footer on this site

@pch
9 years ago
328 posts

Hello JR Team,

Would you mind sharing the code in your footer on this JR site? I like the way the footer looks, it is well done. I am trying to achieve the same.

Also, I have a question of curiosity: I have noticed on many websites that since HTML5, CSS3 and the Responsive design, footers are designed with a dark background with a text color (dark grey) that makes the text almost difficult to read. I always wonder why. Is there any reason for that?

Thanks

updated by @pch: 09/30/16 12:31:36PM

@brian
9 years ago
10,149 posts

Text color is usually used to emphasize/de-emphasize something, so going with a lighter gray on a dark background prevents it from being "distracting" to the viewer if they are viewing other text near the footer.

Most users don't look in the footer - if you are however, then you are likely looking for something specific (privacy policy, terms of service, etc.) so the lighter text isn't likely to deter you.

You can get the footer code from our site just by doing a "view source" - past that into your footer.tpl and adjust it to suit your needs.

Let me know if that helps.

--
Brian Johnson
Founder and Lead Developer - Jamroom
https://www.jamroom.net

@pch
9 years ago
328 posts

brian:
Text color is usually used to emphasize/de-emphasize something, so going with a lighter gray on a dark background prevents it from being "distracting" to the viewer if they are viewing other text near the footer.
Most users don't look in the footer - if you are however, then you are likely looking for something specific (privacy policy, terms of service, etc.) so the lighter text isn't likely to deter you.

Hi Brian,

Thanks a lot for your reply. Things make sense now.

@pch
9 years ago
328 posts

brian:
You can get the footer code from our site just by doing a "view source" - past that into your footer.tpl and adjust it to suit your needs.
Let me know if that helps.

It is the following code, right?

        <div id="footer">
    <div id="prefooter">
        <div class="container">

            <div class="row">

                
                

                <div class="col6">
                    <div class="footer-section">
                        &copy; 2003 - 2016<br>
                        Talldude Networks, LLC.<br>
                        2885 Sanford Ave SW #15132<br>
                        Grandville, MI 49418 USA<br>
                        Jamroom.net is powered by Jamroom
                    </div>
                </div>
                <div class="col2">
                    <div class="footer-section">
                        <span>Community</span>
                        <ul>
                            <li><a href="https://www.jamroom.net/the-jamroom-network/forum">Support Forum</a></li>
                            <li><a href="https://www.jamroom.net/showcase">Member Sites</a></li>
                            <li><a href="https://www.jamroom.net/hosting">Jamroom Hosted</a></li>
                        </ul>
                    </div>
                </div>
                <div class="col2">
                    <div class="footer-section">
                        <span>Company</span>
                        <ul>
                            <li><a href="https://www.jamroom.net/the-jamroom-team">Jamroom Team</a></li>
                            <li><a href="https://www.jamroom.net/page/1/privacy-policy">Privacy Policy</a></li>
                            <li><a href="https://www.jamroom.net/page/2/terms-of-service">Terms of Service</a></li>
                        </ul>
                    </div>
                </div>
                <div class="col2 last">
                    <div class="footer-section">
                        <span>Social</span>
                        <ul>
                            <li>
                                <a href="https://twitter.com/Jamroom" target="_blank"><img src="/skins/jrJamroomNet/img/twitter.png?v=1" width="16" height="16" alt="Twitter"></a>
                                <a href="https://twitter.com/Jamroom" target="_blank">Twitter</a></li>
                            <li>
                                <a href="https://www.facebook.com/Jamroomdotnet" target="_blank"><img src="/skins/jrJamroomNet/img/facebook.png?v=1" width="16" height="16" alt="Facebook"></a>
                                <a href="https://www.facebook.com/Jamroomdotnet" target="_blank">Facebook</a></li>
                            <li>
                                <a href="https://www.youtube.com/user/jamroomdotnet" target="_blank"><img src="/skins/jrJamroomNet/img/youtube.png?v=1" width="16" height="16" alt="YouTube"></a>
                                <a href="https://www.youtube.com/user/jamroomdotnet" target="_blank">YouTube</a></li>
                        </ul>
                    </div>
                </div>
            </div>

        </div>
    </div>
</div>

Is there anything else to add to the css?

Thanks.

@brian
9 years ago
10,149 posts

You'll need to just add it to your footer and play around with it - since it is all in the footer ID, should be easy to target with your CSS.

--
Brian Johnson
Founder and Lead Developer - Jamroom
https://www.jamroom.net

@pch
9 years ago
328 posts

Thanks a lot Brian.

solved A Footer similar to the JR Footer on this site

Tags