How to Add Social Icon Footer to a Ning Network

Post date: Mar 31, 2014 1:30:35 AM

Long Shadow Social Icons Footer for Ning 3.0

Hey Ningers, here is a simple yet elegant and modern social footer featuring entypo icon font and long-shadow icon design. The whole thing requires no javascript or images. What we are building is this:

NOTE: You do not have to have 2 rows of icons. If you'd just like one row, I'll explain below [All Code Attached at Bottom as TXT File]

Step One: Edit and Add HTML

STEP ONE: Copy this code to a text document and find/replace all instances of [YOUR NETWORK] and yournetwork.ning.com with your own URLs and Network Name. Basically change all links to go to the pages on your network which the icon represents. THEN, Place this in the above Footer Section of your Pages Manager:

</div>

</br>

</div>

Like So:

Step Two: Add Font to Custom Code

STEP TWO: Place This in your Top Section of your Custom Code Page at the top:

Further Customizations to Social Footer

Further Customization:

If you only want one row of icons, simply remove one entire block of links like so:

If you'd like to change the hover color of the links, change the value in red (above) with the HEX code for the color you want.

Want to Change out the Icons? Entypo has hundreds of icons to choose from. Simply head to the Character Map for Entypo and change out the unicode for the icon with the one you prefer. For example: To change the icon for Facebook to one for Tumblr, simply change  to  in the HTML portion.

Step Three: Add CSS to Design Studio

STEP THREE: Add this Code to the Advanced Section of CSS:

/* entypo */

[class*="entypo-"]:before {

font-family: 'entypo', sans-serif;

}

.jffooter {

padding: 20px 0;

text-align: center;

}

.jfsocial {

display: inline-block;

width: 70px;

height: 70px;

margin: 0 10px;

line-height: 70px;

font-family: Entypo;

font-size: 35px;

text-align: center;

color: #bbb;

border-radius: 50%;

background: #eee;

overflow: hidden;

transition: color .3s;

}

.jfsocial:hover {

color: #000;

cursor: pointer;

}

.jfsocial {

box-shadow: rgb(210, 210, 210) 1px 1px,

rgb(210, 210, 210) 2px 2px,

rgb(211, 211, 211) 3px 3px,

rgb(211, 211, 211) 4px 4px,

rgb(211, 211, 211) 5px 5px,

rgb(212, 212, 212) 6px 6px,

rgb(212, 212, 212) 7px 7px,

rgb(212, 212, 212) 8px 8px,

rgb(213, 213, 213) 9px 9px,

rgb(213, 213, 213) 10px 10px,

rgb(214, 214, 214) 11px 11px,

rgb(214, 214, 214) 12px 12px,

rgb(214, 214, 214) 13px 13px,

rgb(215, 215, 215) 14px 14px,

rgb(215, 215, 215) 15px 15px,

rgb(215, 215, 215) 16px 16px,

rgb(216, 216, 216) 17px 17px,

rgb(216, 216, 216) 18px 18px,

rgb(216, 216, 216) 19px 19px,

rgb(217, 217, 217) 20px 20px,

rgb(217, 217, 217) 21px 21px,

rgb(218, 218, 218) 22px 22px,

rgb(218, 218, 218) 23px 23px,

rgb(218, 218, 218) 24px 24px,

rgb(219, 219, 219) 25px 25px,

rgb(219, 219, 219) 26px 26px,

rgb(219, 219, 219) 27px 27px,

rgb(220, 220, 220) 28px 28px,

rgb(220, 220, 220) 29px 29px,

rgb(221, 221, 221) 30px 30px;

text-shadow: rgb(226, 226, 226) 1px 1px,

rgb(227, 227, 227) 2px 2px,

rgb(227, 227, 227) 3px 3px,

rgb(228, 228, 228) 4px 4px,

rgb(229, 229, 229) 5px 5px,

rgb(229, 229, 229) 6px 6px,

rgb(230, 230, 230) 7px 7px,

rgb(230, 230, 230) 8px 8px,

rgb(231, 231, 231) 9px 9px,

rgb(232, 232, 232) 10px 10px,

rgb(232, 232, 232) 11px 11px,

rgb(233, 233, 233) 12px 12px,

rgb(233, 233, 233) 13px 13px,

rgb(234, 234, 234) 14px 14px,

rgb(235, 235, 235) 15px 15px,

rgb(235, 235, 235) 16px 16px,

rgb(236, 236, 236) 17px 17px,

rgb(236, 236, 236) 18px 18px,

rgb(237, 237, 237) 19px 19px,

rgb(238, 238, 238) 20px 20px;

}

More Ning Design Help

UPDATE: as an exercise, I pretended that I had never done this before and followed my own tip to add slightly modified version of this to the bottom of Beautiful Nation Project as a demo.

As always, if you are ever in need of Ning Help, feel free to get in touch with me. Always happy to assist Ning cummunity managers with their networks.