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

Croatia replied to Kyryl_Ning_Support's discussion
Servers maintenance
"Hi creators, what's going on here? is there any news or activity? it looks like everyone is sleepin…"
yesterday
Kyryl_Ning_Support replied to Kyryl_Ning_Support's discussion
Servers maintenance
"Hello, Trish!
Could you please specify what kind of issue you are experiencing at the moment so we…"
yesterday
Trish Urquhart replied to Kyryl_Ning_Support's discussion
Servers maintenance
"Thanks, we are still having the problem. How long until it's fixed?
Thanks
Trish"
yesterday
Kyryl_Ning_Support replied to Kyryl_Ning_Support's discussion
Servers maintenance
"Hello, Anam!
So far we have resolved all the major issues related to server maintenance.
If you sti…"
yesterday
Kyryl_Ning_Support commented on Gerard Nealy's blog post SSL Certification
"Hello, Gerard!

Our developers are currently working on the SSL certificate for 3.0 networks, so I…"
Friday
Ning via Facebook

Choose the best plan for an amazing Friday :) Prepare for a cool weekend with…

Anam replied to Kyryl_Ning_Support's discussion
Servers maintenance
"I have posted this as a support ticket and been told that they recognise it as a bug, and it would…"
Friday
Trish Urquhart replied to Kyryl_Ning_Support's discussion
Servers maintenance
"Over the past week a number  of our members are having trouble posting on our network.  Please can…"
Friday
More…

Meanwhile, you can check our social media channels