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

Bizz replied to Scott Bishop's discussion
Photo Slideshow Embed for N2
" As long as the page being iframed is within your own site you should be able to iframe the page, i…"
5 hours ago
Tavolo Ornitologico posted a discussion
}.photo{border:4px ridge #ffffff;} this also applies to ning 30 years ago .. but one of the problem…
11 hours ago
Scott Bishop replied to Scott Bishop's discussion
Photo Slideshow Embed for N2
"realise = release "
21 hours ago
Scott Bishop posted a discussion
Ning has been promising to realise a way to embed our photo slideshows once again but it is yet to…
21 hours ago
This Is bully replied to David Shaw's discussion
Unexpected $4.50 NING Application Fee
"I keep the group or page private when they want to read or enter the group they cash app me the fun…"
yesterday
⚡JFarrow⌁ replied to David Shaw's discussion
Unexpected $4.50 NING Application Fee
"interested in how you do this.."
yesterday
Mr.Krissada Thongsom, Gerard Howard, Michael Daniel and 9 more joined Ning Creators Social Network
yesterday
Tavolo Ornitologico replied to Bizz's discussion
Tip: How I added Music To A Page
"thanks to you they are now ready to open a music site"
yesterday
Bizz replied to Bizz's discussion
Tip: How I added Music To A Page
"Thanks Tavolo, glad you found it useful"
yesterday
Tavolo Ornitologico liked Bizz's discussion Tip: How I added Music To A Page
yesterday
Tavolo Ornitologico replied to Bizz's discussion
Tip: How I added Music To A Page
""
yesterday
Tavolo Ornitologico replied to Bizz's discussion
Tip: How I added Music To A Page
"a nice bottle of Chianti from my Italy and Tuscany I send you a case of wine you are a great"
Monday
More…

Meanwhile, you can check our social media channels