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

Rosas † Negras replied to Rosas † Negras's discussion
Ning 3.0 !How to create a test page for themes, also applies to changing themes to all groups
"you are welcome, I am happy that it was useful"
5 hours ago
Mystical replied to Rosas † Negras's discussion
Ning 3.0 !How to create a test page for themes, also applies to changing themes to all groups
"Thank you for sharing. I just added the test page to my website and it worked perfectly. Great…"
7 hours ago
Mystical and Hippy are now friends
8 hours ago
Rosas † Negras posted a discussion
<link rel="stylesheet" type="text/css" href="ADD YOUR CODES IN CSS FORMAT" /> 
yesterday
Anna Solano updated their profile
Friday
Oriel and Hippy are now friends
Friday
Eva updated their profile
Thursday
Eva and Hippy are now friends
Thursday
Tracy Cook updated their profile
Wednesday
Mystical updated their profile photo
Jan 15
Mystical updated their profile photo
Jan 15
Mystical updated their profile
Jan 15
More…

Meanwhile, you can check our social media channels