Current status of the Ning Platform is always available on the Ning Status Blog.

NC for Hire

Way back in 2018, I shared this with you.  

Tip: How to Add an Easy to Manage News Ticker

Today, I'm going to share an entirely different version which is even easier to manage.  This one is great for community announcements.

See the Pen Pure CSS Ticker (Horizontal) by JFarrow (@JFarrow) on CodePen.

 

To install it, all you need to add to your site is the following CSS which goes inside your Design Studio custom CSS

@-webkit-keyframes ticker {
0% {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
visibility: visible;
}
100% {
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
}
}
@keyframes ticker {
0% {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
visibility: visible;
}
100% {
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
}
}
.ticker-wrap {
position: fixed;
bottom: 0;
width: 100%;
overflow: hidden;
height: 4rem;
background-color: rgba(0, 0, 0, 0.9);
padding-left: 100%;
}

.ticker {
display: inline-block;
height: 4rem;
line-height: 4rem;
white-space: nowrap;
padding-right: 100%;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-name: ticker;
animation-name: ticker;
-webkit-animation-duration: 30s;
animation-duration: 30s;
}
.ticker__item {
display: inline-block;
padding: 0 2rem;
font-size: 2rem;
color: white;
}

body {
padding-bottom: 5rem;
}

HTML CODE - change out the item text with your own news and place this inside an HTML module or inside the Below Header HTML

<div class="ticker-wrap">
<div class="ticker">
<div class="ticker__item">JFarrow can fix my Ning</div>
<div class="ticker__item">Im sending you subliminal messages</div>
<div class="ticker__item">Velcro is a ripoff</div>
<div class="ticker__item">French people give me the crepes.</div>
<!--<div class="ticker__item">Authentic bitters seitan pug single-origin coffee whatever.</div>
<div class="ticker__item">Letterpress chambray brunch.</div>
<div class="ticker__item">Vice mlkshk crucifix beard chillwave meditation hoodie asymmetrical Helvetica.</div>
<div class="ticker__item">Ugh PBR&B kale chips Echo Park.</div>
<div class="ticker__item">Gluten-free mumblecore chambray mixtape food truck. </div>
<div class="ticker__item">Authentic bitters seitan pug single-origin coffee whatever.</div>-->
</div>
</div>

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

  • thankss!!

  • Nice JF, might have to have a little play around with this.

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

Helmut Castaneda liked cédric's profile
14 hours ago
TJ @ jQueryHelp replied to Scott Bishop's discussion
Help Needed Quick!
"I don't see your N3 site, but found your N2 site…"
15 hours ago
Bizz replied to Scott Bishop's discussion
Help Needed Quick!
"Yes thats correct, you can make any page the homepage by checking that box with no need to add…"
21 hours ago
Scott Bishop replied to Scott Bishop's discussion
Help Needed Quick!
"How do I do that without needing to add a string after the .com/ ? It keeps telling me to add more…"
22 hours ago
Bizz replied to Scott Bishop's discussion
Help Needed Quick!
"No you can't, you just need to re-create it by creating a new blank page, mark it as the home page…"
yesterday
Scott Bishop liked Marly's discussion Ranking my Site in Google
yesterday
⚡JFarrow⌁ replied to Marly's discussion
Ranking my Site in Google
"I'll send you my contact info... happy to help.... ive been organically ranking ning sites since…"
yesterday
Marly posted a discussion
Hello,   I've owned my Ning site for about 7 years now. All this time, I've neglected to rank my…
Friday
Scott Bishop posted a discussion
I was removing a content element off my Home page and I must have hit the wrong delete button. I…
Friday
Franke Lauria is now a member of Ning Creators Social Network
Thursday
Rhye updated their profile photo
Thursday
Scott Bishop replied to Scott Bishop's discussion
Shrinking Logo in Sticky Header
"Yes! 
Where do I go to see/change the html in the header? Also of those 3 parts where do you paste…"
Wednesday
More…

Meanwhile, you can check our social media channels