How to Add "Under Construction" Banner To Groups in Development
Post date: Aug 19, 2014 10:15:36 PM
Do You Have Ning Groups Under Construction?
This is a simple tip and trick for adding a classy, eye catching Under Construction Banner to any Groups you are working on that are not quite ready for prime-time. This tip uses no images or javascript...just simple HTML and CSS
Example: Makulu Journey Channel
First, The Tip!
Add the following CSS to your Custom CSS (or if you are bringing in an external style sheet for a group, add it there)
#construction {
position: absolute;
width: 100%;
text-align: center;
z-index: 1000;
font-size: 2.7em;
color: black;
font-weight: bold;
-webkit-transform: rotate(315deg) scale(1) skew(1deg) translate(-200px, 0);
-moz-transform: rotate(315deg) scale(1) skew(1deg) translate(-200px, 0);
-o-transform: rotate(315deg) scale(1) skew(1deg) translate(-200px, 0);
-ms-transform: rotate(315deg) scale(1) skew(1deg) translate(-200px, 0);
transform: rotate(315deg) scale(1) skew(1deg) translate(-200px, 0);
background-image: repeating-linear-gradient(55deg, rgb(255, 255, 255), rgb(255, 255, 255) 50px, rgb(248, 174, 94) 50px, rgb(252, 144, 3) 110px);
-webkit-box-shadow: 5px 5px 10px 0 rgba(0, 0, 0, .2);
box-shadow: 5px 5px 10px 0 rgba(0, 0, 0, .2);
}
#construction p {
margin: 0;
/* color: #F2F2F2; */
border-top: 1px solid #eee;
}
Now the Trick...
Add the Following HTML inside the box where you place the description of the group, so it disappears after a site member has seen it. In other words, add =editPages after the Group URL and add it to the description box in HTML view.
<div id="construction">
<p> Under Construction</p>
</div>
Note: You can obviously change the wording to something other than Under Construction
- You can also add this HTML to a text box inside the group if you'd like for it to continue to display.
- Don't forget to remove it when your group is ready.
I was going to add this to my How Did You Do That Group on Creators, but those posts just don't seem to be indexed yet and have not made it into the stream. For Example: Tip: Magic Inline Facebook Style Dropdowns with CSS Only