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

Votes: 0
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:

    3238376?profile=original


    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

AHMI Sydney updated their profile
Thursday
Dallas Shirts updated their profile
Sep 14
Michael and Alex - Rosas † Negras are now friends
NC for Hire
Sep 12
Michael updated their profile
Sep 6
⚡JFarrow⌁ replied to Suzie Nielsen's discussion
How to take my site off line?
"Hi Suzie... I just got back from Africa... call me if you still need help..."
Sep 5
Annabel Gregory replied to Annabel Gregory's discussion
Reset Password fails
"Ok, one of them has just got the promised email, so that problem is sorted."
Sep 4
Annabel Gregory posted a discussion
We have had repeated problems with members trying to reset their password, and nothing happens when…
Sep 4
Ning Support liked Alex - Rosas † Negras's discussion ACCESSIBILITY STATEMENT - THE PERFECT FUNCTION TO RESPECT THE LAWS AND PEOPLE WITH HANDICAPS
Aug 22
Alex - Rosas † Negras posted a discussion
Aug 22
Pam Givens and ⚡JFarrow⌁ are now friends
NC for Hire
Aug 20
Tyler Durbin replied to Suzie Nielsen's discussion
How to take my site off line?
"How many members do you have?"
Aug 13
Suzie Nielsen posted a discussion
Hello,.In light of recent actions, I feel it is necessary for me to remove my Political website...…
Aug 9
More…

Meanwhile, you can check our social media channels