TIP: Ace Bar

Direct your visitors and show them most important content

CUSTOM CSS
#acebar {
display: block;
width: 100%;
text-align: center;
position: fixed;
height: 30px;
top: 0; left: 0;
z-index: 99999;
padding: 5px 0;
border-bottom: 1px solid rgba(255,255,255,0.5);
color: #534306;
font: normal 18px/25px Geogrotesque-Medium, Helvetica, Arial, sans-serif;
text-shadow: 1px 1px 0 rgba(255,255,255,0.5);
background: #fff298; /* Old browsers */
background: -moz-linear-gradient(top, #fff298 0%, #e8d56f 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fff298), color-stop(100%,#e8d56f)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #fff298 0%,#e8d56f 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #fff298 0%,#e8d56f 100%); /* Opera11.10+ */
background: -ms-linear-gradient(top, #fff298 0%,#e8d56f 100%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=’#fff298′, endColorstr=’#e8d56f’,GradientType=0 ); /* IE6-9 */
background: linear-gradient(top, #fff298 0%,#e8d56f 100%); /* W3C */
}
#acebar .inner { position: relative; width: 960px; margin: 0 auto; }
#acebar .inner p { padding: -10px 0; }

/* Ace Bar Announcement */
#acebar.ace .button {
background: #A66396; /* Old browsers */
background: -moz-linear-gradient(top, #A66396 0%, #653C5C 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#A66396), color-stop(100%,#653C5C)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #A66396 0%,#653C5C 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #A66396 0%,#653C5C 100%); /* Opera11.10+ */
background: -ms-linear-gradient(top, #A66396 0%,#653C5C 100%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=’#A66396′, endColorstr=’#653C5C’,GradientType=0 ); /* IE6-9 */
background: linear-gradient(top, #A66396 0%,#653C5C 100%); /* W3C */
padding:3px 8px;
color: #fff;
text-shadow:0 1px 0 #4F2F49;
border:1px solid #4F2F49;
margin-left:.5em;
-webkit-box-radius:3px;
-moz-border-radius:3px;
border-radius:3px;
-webkit-box-shadow:
inset 0 0 0 1px rgba(255,255,255,0.3),
0 1px 2px rgba(0,0,0,0.2);
-moz-box-shadow:
inset 0 0 0 1px rgba(255,255,255,0.3),
0 1px 2px rgba(0,0,0,0.2);
box-shadow:
inset 0 0 0 1px rgba(255,255,255,0.3),
0 1px 2px rgba(0,0,0,0.2);
}

CUSTOM CODE or Text Box
You may paste this code in your custom code if you want to appear on all pages or paste in the text box on homepage to appear only on the homepage..

<div id=”acebar” class=”ace”>
<div class=”inner”>
<p>Direct your visitors and show them most important content<a href=”http://www.allforning.tk/ning-ace-bar/” class=”button”>Get It Now</a></p>
</div>

Because this will appear over the current Ning bar, we need to push down the bar using this code:
.xj_before_content {padding-top: 35px;
}

That also goes in the Custom CSS

In Progress:
Visitor to be able to close it

_______________________________________________

Free Ning Layouts and Codes at www.allforning.tk

Tags: ace, bar, emmanuel, ning

Favorite

0 members favorited this

▶ Reply to This

Replies to This Discussion

NC for HirePermalink Reply by Jen on March 24, 2012 at 4:45pm

Sylvia,

Isn't he?! I couldn't have said it better. I keep looking for Ning to select Emmanuel as a SuperStar! He's always so helpful, thoughtful, and just downright talented.

Great job Ace!

Best Regards,

Jen