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

Happy holidays :-)

The lights will be hanging from the bottom of your Ningbar, see image below.
If you would like to move it up or down just change the 30px in the bottom line of this code. You can also change the background Url to replace the Christmas lights with your own.

Just place this code in your "design studio CSS box".

Ning 3.0


DIV.ningbar.cf:before{
   background-repeat:repeat-x!important;
   content: ","!important;
   position: absolute!important;
   width: 100%!important;
   height: 35px!important;
   left: 0%!important;
   background: url(https://api.ning.com/files/6vIMLmuhUcrLLIL3po0DvpHbBYZ-QctxAE1sy*OqLilWCgFpTnDwYbklBuyggoVNV1mZx1UL1kiqY*gRuxCQoUG1n8w7dlyj/Animation3.gif);
   top: 30px!important; }



Ning 2.0


div#xn_bar_menu:before{
    content: ""!important;
    position: absolute!important;
    width: 100%!important;
    height: 35px!important;
    left: 0%!important;
    z-index:9999!important;
    background: url(https://api.ning.com/files/6vIMLmuhUcrLLIL3po0DvpHbBYZ-QctxAE1sy*OqLilWCgFpTnDwYbklBuyggoVNV1mZx1UL1kiqY*gRuxCQoUG1n8w7dlyj/Animation3.gif);
    background-repeat:repeat-x!important;
    top: 25px!important;}




click here to see it live.

 

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

  •  This is the content of my Custom CSS box - can any expert see something there that would conflict with inserting the above CSS for Ning 3 Lights?

    I am the opposite of an expert - a nexpert!

     

     

    .SP_sign_up{
    text-align:center;
    background:#fff;
    border-radius:3px;
    -webkit-border-radius:3px;
    -moz-border-radius:3px;
    padding:10px 0;
    }

    .SP_sign_up h4{
    font-weight:bold;
    }

    .SP_sign_up_button{
    padding:7% 10%;
    }

    .SP_sign_up_button a{
    color:#333;
    font-size:16px;
    border-radius:3px;
    -webkit-border-radius:3px;
    -moz-border-radius:3px;
    padding:5% 15%;
    background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #F8F7F7), color-stop(1, #ECEBEB));
    background:-moz-linear-gradient(top, #F8F7F7 5%, #ECEBEB 100%);
    background:-webkit-linear-gradient(top, #F8F7F7 5%, #ECEBEB 100%);
    background:-o-linear-gradient(top, #F8F7F7 5%, #ECEBEB 100%);
    background:-ms-linear-gradient(top, #F8F7F7 5%, #ECEBEB 100%);
    background:linear-gradient(to bottom, #F8F7F7 5%, #ECEBEB 100%);
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#F8F7F7', endColorstr='#ECEBEB',GradientType=0);
    background-color:#F8F7F7;
    border:solid 1px #c9c9c9;
    }

    .SP_sign_up_in p{
    font-size:12px;
    }

    .SP_sign_up_external{
    text-align:center;
    }
    .SP_sign_up_external ul{
    padding: 0;
    margin:0;
    }

    .SP_sign_up_external img{
    max-width: 15%;
    }

    .SP_sign_up_external li{
    display: inline;
    list-style: none;
    padding: 2px;
    }

    .SP_sign_up_external > p {
    font-size: 10px;
    }


    /** Like button **/
    .button-tiny.likeButton a .icon{
    display: inline-block;
    width: auto;
    height: 1em;
    overflow: hidden;
    vertical-align:middle;}
    .button-tiny.likeButton a { padding: 2px 4px 5px 7px; }

     

    .status-container {border: 2px groove #fff;padding: 10px;border-radius: 10px;
    background:linear-gradient(to bottom,rgba(255,255,255,1),rgba(0,134,173,.8),rgba(255,255,255,0)), url(//api.ning.com/files/J9FGucqSAtGBsvZjR7FU7RMeW52JmDEyRdxcrgLqW5y0xM4bvNfOyZF0l4gKyZ65z-3XY78WVEj5jnsNJAqz3JPL5gwSGROw/StatusUpdateBackground.png);background-repeat:repeat-x,repeat;background-position:bottom,top;
    -moz-box-shadow: 0px -1px 4px -1px rgba(0, 0, 0, 1) ;
    -webkit-box-shadow: 0px -1px 4px -1px rgba(0, 0, 0, 1) ;
    box-shadow: 0px 1px 4px 1px rgba(0, 0, 0, 1) ;}
    .status-body.media-body {border-bottom:none;}
    .js-statusForm.statusForm .button.button-primary {margin-top:10px;}
    .js-statusForm.statusForm .input-full {border: 1px solid #000; border-radius:10px;}
    .statusForm::before {border-color: transparent #000 transparent transparent;}


    .activityFeed-story:hover a.activityFeed-close.activity-close{ display:block; color:red }

     


    /********* VIDEOS PAGES *******/
    /*Remove upload feature*/
    .newVideoPage-page1 div:nth-child(3), .newVideoPage-page1 header.module-header:nth-child(2){ display:none }

     

    /**** search bar remove Ning ****/

    #xn_bar_menu_search{ display:none }

     

    .cht-forwardSymbol::after{content:"Online Now"; margin-left:4px; display:inline-block }

     

    a.dashboardBar-ningLogo,div.dashboardBar-toggleButton.toggle-button,div#dashboardBar,div.dashboardBar-innerSection {background:transparent!important;}

    div.dashboardBarWrap {background:transparent!important;}

     

    • NC for Hire

      .SP_sign_up{
      text-align:center;
      background:#fff;
      border-radius:3px;
      -webkit-border-radius:3px;
      -moz-border-radius:3px;
      padding:10px 0;
      }

      .SP_sign_up h4{
      font-weight:bold;
      }

      .SP_sign_up_button{
      padding:7% 10%;
      }

      .SP_sign_up_button a{
      color:#333;
      font-size:16px;
      border-radius:3px;
      -webkit-border-radius:3px;
      -moz-border-radius:3px;
      padding:5% 15%;
      background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #F8F7F7), color-stop(1, #ECEBEB));
      background:-moz-linear-gradient(top, #F8F7F7 5%, #ECEBEB 100%);
      background:-webkit-linear-gradient(top, #F8F7F7 5%, #ECEBEB 100%);
      background:-o-linear-gradient(top, #F8F7F7 5%, #ECEBEB 100%);
      background:-ms-linear-gradient(top, #F8F7F7 5%, #ECEBEB 100%);
      background:linear-gradient(to bottom, #F8F7F7 5%, #ECEBEB 100%);
      filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#F8F7F7', endColorstr='#ECEBEB',GradientType=0);
      background-color:#F8F7F7;
      border:solid 1px #c9c9c9;
      }

      .SP_sign_up_in p{
      font-size:12px;
      }

      .SP_sign_up_external{
      text-align:center;
      }
      .SP_sign_up_external ul{
      padding: 0;
      margin:0;
      }

      .SP_sign_up_external img{
      max-width: 15%;
      }

      .SP_sign_up_external li{
      display: inline;
      list-style: none;
      padding: 2px;
      }

      .SP_sign_up_external > p {
      font-size: 10px;
      }

      DIV.ningbar.cf:before{
      background-repeat:repeat-x!important;
      content: ","!important;
      position: absolute!important;
      width: 100%!important;
      height: 35px!important;
      left: 0%!important;
      background: url(https://storage.ning.com/topology/rest/1.0/file/get/9851882874?prof...);
      top: 30px!important; }

      }

      /** Like button **/
      .button-tiny.likeButton a .icon{
      display: inline-block;
      width: auto;
      height: 1em;
      overflow: hidden;
      vertical-align:middle;}
      .button-tiny.likeButton a { padding: 2px 4px 5px 7px; }

      .status-container {border: 2px groove #fff;padding: 10px;border-radius: 10px;
      background:linear-gradient(to bottom,rgba(255,255,255,1),rgba(0,134,173,.8),rgba(255,255,255,0)), url(//api.ning.com/files/J9FGucqSAtGBsvZjR7FU7RMeW52JmDEyRdxcrgLqW5y0xM4bvNfOyZF0l4gKyZ65z-3XY78WVEj5jnsNJAqz3JPL5gwSGROw/StatusUpdateBackground.png);background-repeat:repeat-x,repeat;background-position:bottom,top;
      -moz-box-shadow: 0px -1px 4px -1px rgba(0, 0, 0, 1) ;
      -webkit-box-shadow: 0px -1px 4px -1px rgba(0, 0, 0, 1) ;
      box-shadow: 0px 1px 4px 1px rgba(0, 0, 0, 1) ;}
      .status-body.media-body {border-bottom:none;}
      .js-statusForm.statusForm .button.button-primary {margin-top:10px;}
      .js-statusForm.statusForm .input-full {border: 1px solid #000; border-radius:10px;}
      .statusForm::before {border-color: transparent #000 transparent transparent;}

      .activityFeed-story:hover a.activityFeed-close.activity-close{ display:block; color:red }

      /********* VIDEOS PAGES *******/
      /*Remove upload feature*/
      .newVideoPage-page1 div:nth-child(3), .newVideoPage-page1 header.module-header:nth-child(2){ display:none }

      /**** search bar remove Ning ****/

      #xn_bar_menu_search{ display:none }

      .cht-forwardSymbol::after{content:"Online Now"; margin-left:4px; display:inline-block }

      a.dashboardBar-ningLogo,div.dashboardBar-toggleButton.toggle-button,div#dashboardBar,div.dashboardBar-innerSection {background:transparent!important;}

      div.dashboardBarWrap {background:transparent!important;}

    • I would do it this way instead of using the ningbar, this way it does not matter how tall your ning bar is and also will not interfere with any of the links up there while keeping responsive, it's the same effect as it still sits under the ning bar.

      For now you can see it here: https://jr-images.ning.com/activity

      Add you christmas lights image into file manager then copy the link from the file manager and add into the css in the part for background url. The link in the code is to mine so would still work although if I remove or change it then your would to so best add your own link.

      .central-content::before{
      content: " ";
      position: relative;
      width: 100%;
      height: 35px;
      background: url(https://storage.ning.com/topology/rest/1.0/file/get/9861552479?prof...);
      background-repeat:repeat-x!important;
      display:flex;
      }

      This is the image that rosa posted so click on that then save it to your computer ( keep it as a gif ).

      Copy the image into your file manager then once done save the link from file manager and add it to the css replacing the one that is there.

      9861601694?profile=RESIZE_180x180

      jr-images
      jr-images is a demo site
      • Thank you Rosas and Bizz.

        I am afraid I do not understand these instructions.

        I will see if I can do it but I have not used file manager before or saved images etc.

         

        Will let you know if I manage it.

      • OH MY GOD!!!! :D :D :D It worked!!!

         

        I am so pleased. Thank you Bizz and Rosas for your help. I feel like an expert now. Woohoo!!!

         

        Happy Christmas to all, and hopefully we will all have some peace and good health. And time with our families. xxxxx

      • NC for Hire

        9867606286?profile=RESIZE_930x

        I don't use file manager for photos, so if it's a photo I'm not interested even if after I close the box it always stays alive
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