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

FORUM

In our events page we have an options drop down where members can choose to edit, delete etc for their event. What this tip does is change the options list into a nice open toolbar and when viewing on mobile it goes back to the list drop down.

Here is an example showing the new toolbar

So here is the code for you to do this

First a little code to go in your site&pages custom code

<script>
// Add Class to events detail page and change text for featured event
x$(document).ready(function(){
x$('.eventDetailPage').closest('body').addClass('eventDetail');
x$('.eventDetail .optionsDropdown-featureButton.feature-button.is-selected').text('Event Featured');
});
</script>

Next we add some css for the styling and this goes in your design studio custom code

@media only screen and ( min-width:771px ){
.eventDetail .content-actions .optionsDropdown-button{ display:none }
.eventDetail .content-actions #eventPage-optionsDropdown{ display:block!important }
.eventDetail .content-actions .optionsDropdown-list{ width:auto; position:relative; border:none }
.eventDetail .content-actions .optionsDropdown-list > li { padding: 4px; display: inline-block; float: left; }
.eventDetail .content-actions .linkbar{ width:100%; clear:both }
.eventDetail .content-actions .linkbar > li{ float:right;  }
.eventDetail .content-actions .optionsDropdown a{ margin-right:5px }
.eventDetail .content-actions .optionsDropdown{ float:right }
}
.eventDetail .content-actions .optionsDropdown a{ padding: 6px 8px;border-radius:4px }
.eventDetail .content-actions .optionsDropdown a:hover{ background-color:royalblue; color:white }
.eventDetail .optionsDropdown-featureButton.feature-button.is-selected{ background-color:darkblue;color:white; border-radius:4px }

@media only screen and ( max-width:771px ){
.eventDetail .content-actions .optionsDropdown-list{
background-color:#c9d3f2;
border-radius:4px;
box-shadow: 0px 8px 7px darkgray;
}
.eventDetail .content-actions .optionsDropdown a{
color: #5c5151
}
.eventDetail .content-actions .optionsDropdown-button {
background-color: #d1e0f8;
}
.eventDetail .content-actions .optionsDropdown{
margin-right:10px;
}
}

That's it, you can change all the colours etc for your own site by editing the color parts of the code.

Enjoy

John :-)

You need to be a member of Ning Creators Social Network to add comments!

Join Ning Creators Social Network

Email me when people reply –

Latest Activity

Kyryl_Ning_Support replied to Bizz ( John )'s discussion
Multiple choice poll- how to make the selections stand out better
"Nice tip, John!"
1 hour ago
Kyryl_Ning_Support replied to Kyryl_Ning_Support's discussion
Overview of Q3 and Ning Q4 2017 plan.
"Hi Kos,
I have tried to reproduce this issue on my PC but no luck with that. Could you please share…"
1 hour ago
Kyryl_Ning_Support replied to Kyryl_Ning_Support's discussion
Overview of Q3 and Ning Q4 2017 plan.
"Thanks, I have updated the suggestion with your notes :-)
When I would hear something about this I'…"
2 hours ago
Kyryl_Ning_Support replied to Kyryl_Ning_Support's discussion
SSL certificate feature release
"Hi there!
If you mapped your domain, in that case, yes, it's not the only thing you should do. The…"
2 hours ago
Robert Martin, waimaoniu, Brawen and 50 more joined Ning Creators Social Network
3 hours ago
Ning via Facebook

The best 23 articles about social media are here for you! Follow the link and read them all!…

Kos replied to Kyryl_Ning_Support's discussion
Overview of Q3 and Ning Q4 2017 plan.
"To be honest, I think it depends on the SIZE of the network and how heavily they use Chat.  I think…"
16 hours ago
Mary Adams replied to Kyryl_Ning_Support's discussion
SSL certificate feature release
"There is now a check box in my Ning 2.0 site  to use SSL. I imagine that I don't just check the box…"
17 hours ago
Ning via Facebook

Your blog HAS its voice! And you have outstanding chance to make it awesome. Begin with these…

Kos replied to Kyryl_Ning_Support's discussion
Overview of Q3 and Ning Q4 2017 plan.
"No, not really although I will say, when I initially open chat, the chat screen is blank and I have…"
18 hours ago
Kyryl_Ning_Support replied to Suzie Nielsen's discussion
Anyone else having the following issues
"Hi Suzie,
If it's necessary you can disable Captcha in Network Details section. At the very bottom…"
yesterday
Anam replied to Kyryl_Ning_Support's discussion
Overview of Q3 and Ning Q4 2017 plan.
"Oh right, I get it, that's a bug. Did not know that."
yesterday
More…

Meanwhile, you can check our social media channels