Current status of the Ning Platform is always available on the Ning Status Blog.

NC for Hire

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 and we may learn something new together.  What we are building is the following, using an icon font:

Minor NOTE: You do not have to have 2 rows of icons. If you'd just like one row, I'll explain below

The HTML for the Page Footer:  [All Code Attached at Bottom as TXT File]

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 class="jffooter">
  <a title="[YOUR NETWORK] on Facebook" href="http://facebook.com/YourPage"><div class="jfsocial">&#62220;</div>
  <a title="[YOUR NETWORK] on Twitter" href="http://yournetwork.ning.com"><div class="jfsocial">&#62217;</div>
  <a title="[YOUR NETWORK] on Google+" href="http://yournetwork.ning.com"><div class="jfsocial">&#62223;</div>
  <a title="[YOUR NETWORK] on Linkedin" href="http://yournetwork.ning.com"><div class="jfsocial">&#62232;</div>
  <a title="[YOUR NETWORK] Member Map" href="http://yournetwork.ning.com"><div class="jfsocial">&#59175;</div>
  <a title="[YOUR NETWORK] on Pinterest" href="http://yournetwork.ning.com"><div class="jfsocial">&#62226;</div>
  <a title="[YOUR NETWORK] on Vimeo" href="http://yournetwork.ning.com"><div class="jfsocial">&#62214;</div>
</div>
</br>
<div class="jffooter">
  <a title="Your Profile Page" href="http://yournetwork.ning.com"><div class="jfsocial">&#59170;</div>
  <a title="Community Hubs for Surveyors" href="http://yournetwork.ning.com"><div class="jfsocial">&#128101;</div>
  <a title="Add Yourself to Member Map" href="http://yournetwork.ning.com"><div class="jfsocial">&#59172;</div>
  <a title="Surveying Photos" href="http://yournetwork.ning.com"><div class="jfsocial">&#128247;</div>
  <a title="Articles for Land Surveyors" href="http://yournetwork.ning.com"><div class="jfsocial">&#128240;</div>
  <a title="Student Surveyors" href="http://yournetwork.ning.com"><div class="jfsocial">&#127891;</div>
  <a title="Surveying Video Library" href="http://yournetwork.ning.com"><div class="jfsocial">&#127916;</div>
</div>

 

Like So:

 

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

<link href='http://weloveiconfonts.com/api/?family=entypo' rel='stylesheet' type='text/css'>

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;
}

 

 

Further Customization:

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

If you'd like to change the hover color of the links, change the value(s) in red (above) with the HEX code for the color you want.  The first red color is the color of icon before hover and the second red color is the one it changes to on hover..

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  &#62220;  to &#62229;  in the HTML portion.

 

I will be adding more customization options to this page on my project site under "Ning Tips". Enjoy!

You need to be a member of Ning Creators Social Network to add comments!

Join Ning Creators Social Network

Votes: 0
Email me when people reply –

Replies

  • NC for Hire

    just 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.

    • Dear JF what do you mean "Add Yourself to member Map" ? :) This piece of code is awesome. I wanna try. Thank you JF.3236462?profile=original

      • NC for Hire

        that was about the point where i decided to make this tip/ template for everyone..that "Add yourself to member map" is merely a suggestion because i have a mapping group on my network which is separate from member map.... everything in there should be customized to your liking.. this is just a template to find/replace and try different things out.. the icons are all changable as well..

        enjoy!

  • Pretty slick bro..have to play with this one

  • This is great--JFarrow--thanks!  I'm going to try it out!

  • This reply was deleted.
  • NC for Hire

    Just updated the CSS portion with another color change option.  Portions in red can be easily changed to reflect colors on your site.  Like so...

    3236337?profile=original

    3236379?profile=original

  • i like it but it has an extremely exagerated drop shadow  i want to reduce

This reply was deleted.
 

Some interesting articles related to community management, digital marketing etc. could be found in our digest. Don't hesitate to leave a feedback so we would know that we should continue :-)

Latest Activity

Cindy Dean Mccoy replied to Cindy Dean Mccoy's discussion
We cannot reduce our Data Usage by removing content.
"I final got a response from Ning on my trouble ticket.  How long has it been, um . . . almost 3…"
3 minutes ago
Rosas † Negras replied to Rosas † Negras's discussion
how do i center members? I point out that there are at most theme codes, is it possible to increase the theme codes with javascrips ning 2.0?
"Bizz 
i can't get it to work help me plz"
18 hours ago
Rosas † Negras replied to Rosas † Negras's discussion
how do i center members? I point out that there are at most theme codes, is it possible to increase the theme codes with javascrips ning 2.0?
"Bizz  
is the theme that I use in the site the codes"
yesterday
Rosas † Negras replied to Rosas † Negras's discussion
how do i center members? I point out that there are at most theme codes, is it possible to increase the theme codes with javascrips ning 2.0?
"it won't let me, you can check i am in the slaughterhouse with the codes, find the file manager…"
yesterday
Rosas † Negras posted a discussion
integrate a page into my site that transforms css into Javascript, where can I get the html codes?
yesterday
Rosas † Negras replied to AnGella's discussion
Slow and Painful 2.0 Death
"as soon as we started our discussion the site in confusion, the one that makes me angry, everything…"
Friday
cybercity model updated their profile
Thursday
Steve C and Vander NG are now friends
Wednesday
AnGella replied to AnGella's discussion
Slow and Painful 2.0 Death
"When did that happen?"
Feb 22
Kathleen (SunKat) updated their profile
Feb 22
Rosas † Negras replied to AnGella's discussion
Slow and Painful 2.0 Death
"with error 500 everything was destroyed, the forms disappeared even in the member page, I laugh,…"
Feb 20
Rosas † Negras replied to AnGella's discussion
Slow and Painful 2.0 Death
"AnGella 
can you pass me email and password in my page in private please don't remember the…"
Feb 18
More…

Meanwhile, you can check our social media channels