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

NC for Hire

What we will be creating is something like this:

fixedfooter ning

Download Text File with All Code

Add the Following HTML to your Below Footer HTML module(customize however you like with HTML):


<main>
<div class="arrow animated bounce">
</main>
<footer>
<h1>Hi, im a fixed-Footer!</h1>
</footer>

Add the Following Code to your Design Studio CSS:



@import url(http://fonts.googleapis.com/css?family=Raleway:400,300,700);html {  height: 100%;  box-sizing: border-box;}body {  height: 100%;  font-family: "Raleway", sans-serif;  color: #F5F3EC;  background: #333;  margin: 0px;  padding: 0px;}main {  z-index: 1;  position: relative;  height: 100%;  background: url("http://goo.gl/87Onyp") no-repeat scroll center center/cover transparent;  box-shadow: 0px 0px 40px rgba(0, 0, 0, 0.8);}footer {  position: relative;  z-index: -2;  height: 300px;  background: none repeat scroll 0% 0% #31353A;  font-size: 12px;  color: #CCC;  text-align: center;}footer h1 {  position: fixed;  z-index: 1;  left: 50%;  bottom: 110px;  margin-left: -400px;  width: 800px;  list-style: outside none none;  text-align: center;  font-weight: bold;  color: #FFF;  font-size: 2.125rem;  }@-moz-keyframes bounce {  0%, 20%, 50%, 80%, 100% {    -moz-transform: translateY(0);    transform: translateY(0);  }  40% {    -moz-transform: translateY(-30px);    transform: translateY(-30px);  }  60% {    -moz-transform: translateY(-15px);    transform: translateY(-15px);  }}@-webkit-keyframes bounce {  0%, 20%, 50%, 80%, 100% {    -webkit-transform: translateY(0);    transform: translateY(0);  }  40% {    -webkit-transform: translateY(-30px);    transform: translateY(-30px);  }  60% {    -webkit-transform: translateY(-15px);    transform: translateY(-15px);  }}@keyframes bounce {  0%, 20%, 50%, 80%, 100% {    -moz-transform: translateY(0);    -ms-transform: translateY(0);    -webkit-transform: translateY(0);    transform: translateY(0);  }  40% {    -moz-transform: translateY(-30px);    -ms-transform: translateY(-30px);    -webkit-transform: translateY(-30px);    transform: translateY(-30px);  }  60% {    -moz-transform: translateY(-15px);    -ms-transform: translateY(-15px);    -webkit-transform: translateY(-15px);    transform: translateY(-15px);  }}.arrow {  position: absolute;  bottom: 50px;  left: 50%;  margin-left: -20px;  width: 20px;  height: 20px;  background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNi4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iNTEycHgiIGhlaWdodD0iNTEycHgiIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA1MTIgNTEyIiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxwYXRoIGZpbGw9IiNGRkZGRkYiIGQ9Ik0yOTMuNzUxLDQ1NS44NjhjLTIwLjE4MSwyMC4xNzktNTMuMTY1LDE5LjkxMy03My42NzMtMC41OTVsMCwwYy0yMC41MDgtMjAuNTA4LTIwLjc3My01My40OTMtMC41OTQtNzMuNjcyICBsMTg5Ljk5OS0xOTBjMjAuMTc4LTIwLjE3OCw1My4xNjQtMTkuOTEzLDczLjY3MiwwLjU5NWwwLDBjMjAuNTA4LDIwLjUwOSwyMC43NzIsNTMuNDkyLDAuNTk1LDczLjY3MUwyOTMuNzUxLDQ1NS44Njh6Ii8+DQo8cGF0aCBmaWxsPSIjRkZGRkZGIiBkPSJNMjIwLjI0OSw0NTUuODY4YzIwLjE4LDIwLjE3OSw1My4xNjQsMTkuOTEzLDczLjY3Mi0wLjU5NWwwLDBjMjAuNTA5LTIwLjUwOCwyMC43NzQtNTMuNDkzLDAuNTk2LTczLjY3MiAgbC0xOTAtMTkwYy0yMC4xNzgtMjAuMTc4LTUzLjE2NC0xOS45MTMtNzMuNjcxLDAuNTk1bDAsMGMtMjAuNTA4LDIwLjUwOS0yMC43NzIsNTMuNDkyLTAuNTk1LDczLjY3MUwyMjAuMjQ5LDQ1NS44Njh6Ii8+DQo8L3N2Zz4=);  background-size: contain;}.bounce {  -moz-animation: bounce 2s infinite;  -webkit-animation: bounce 2s infinite;  animation: bounce 2s infinite;}

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

Join Ning Creators Social Network

Email me when people reply –

Replies

  • Awesome tip JF, thank you for sharing your cods. :-)

  • Going to give this a try.  Thanks!

  • NC for Hire

    cool guys... just a quick little thing.. totally customizable... glad you like it!

    you could even combine it with this POWr tip   to get something like this:

    fixedfooterPOWr.gif


    Clickiing that image will take you to the code view View it full screen here
  • Pretty slick man. Think I might play around with this to hide and display titles for pics or group list images...

    Thanks ;)

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

Alessandro liked Anastasia_Ning_Support's discussion Activity feed update
2 hours ago
⚡JFarrow⌁ replied to Anastasia_Ning_Support's discussion
Activity feed update
"Cool... thanks for the update!"
19 hours ago
https://emerchantauthority.com updated their profile
20 hours ago
Anastasia_Ning_Support posted a discussion
Based on your feedback, we’ve changed the way how newly added content items display in the activity…
22 hours ago
Kinga Incze replied to Nick Barr's discussion
Updates on revamped Activity Feed and other Main Page improvements
" Hi, I'm a new nc and just looking for like and comment functions for the feed. How is it possible?…"
yesterday
kostasgr replied to Bizz's discussion
Tip: Adding add content links to your activity feed
"hi Bizz !!  not working .....
Custom Code
===========
<script> // Remove group header crop x$(docum…"
yesterday
⚡JFarrow⌁ replied to Bizz's discussion
Tip: Adding add content links to your activity feed
"i figured it out..."
yesterday
Ana Massien liked Ana Massien's discussion Member's profile section / membership role shows on profile
yesterday
Ana Massien posted a discussion
I was wondering if a feature for the member's profile could be implemented at sign up or given by a…
yesterday
Ana Massien posted a discussion
I recently quit using twitter. I am looking for a way to add reactions (sharethis.com has them, but…
yesterday
Ana Massien updated their profile photo
yesterday
Ana Massien posted a discussion
  I am looking for a way to make sure free members do not turn off notifs from the network, or the…
yesterday
More…

Meanwhile, you can check our social media channels