(TIP N3.0 & N2.0) let's hang some Christmas lights..CSS.. Happy holidays :-) updated 12-04-14

[George H. Compton IV]

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.

 

[Alex - Rosas † Negras]

everything is working just change the photo plz

[Alex - Rosas † Negras]

[Anam]

 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;}

 

[Alex - Rosas † Negras]

.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;}

[Alex - Rosas † Negras]

Anam 

put this code if it's a 3.0

[Bizz]

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.

[Anam]

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.

[Anam]

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

[Alex - Rosas † Negras]

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