How to Add "Under Construction" Banner To Groups in Development

posted Aug 19, 2014, 3:15 PM by Jaybird Farrow   [ updated Aug 20, 2014, 4:25 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;

}