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

LEO Mobile App Builder updated their profile
Tuesday
Aase Lillian replied to Aase Lillian's discussion
Community - activity page
"Ok, thank you. Please send me details as I have no idea on how to do it. "
Mar 19
Aase Lillian and ⚡JFarrow⌁ are now friends
NC for Hire
Mar 19
⚡JFarrow⌁ updated their profile photo
Mar 18
⚡JFarrow⌁ replied to Aase Lillian's discussion
Community - activity page
"Yes you can add emojis to your community pretty much anywhere you like.
If you need some help…"
Mar 18
Aase Lillian updated their profile
Mar 18
Aase Lillian posted a discussion
Hi all. Is it possible to add emojis to the community? I also wish the activity page to include…
Mar 18
Donna MacShoe updated their profile photo
Mar 6
Adul Rodri is now friends with ANGE.L LUAR and Margarida Maria Madruga
Feb 14
Shweta Sharma updated their profile
Jan 26
catherine martin updated their profile
Jan 16
Donna MacShoe updated their profile photo
Jan 15
More…

Meanwhile, you can check our social media channels