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 Network to add comments!

Join Ning Creators Network

Email me when people reply –

Search the Creators Network

Latest Activity

Kyryl_Ning_Support replied to Yana Ning Support's discussion Video Feature on Ning 3.0 is now available!
"Hi John,
You shouldn't have, but I should admit that it will be easier for the management to look t…"
40 minutes ago
Beatriz Martín replied to Dan Porter's discussion Multiple Group Hubs
"thx, kos! :)"
44 minutes ago
Tony Rosa is now a member of Ning Creators Network
1 hour ago
Kos replied to Dan Porter's discussion Multiple Group Hubs
"Beatriz if you need something special designed beyond the ordinary, I would recommend you post your…"
9 hours ago
Garfield Archivist replied to Yana Ning Support's discussion Video Feature on Ning 3.0 is now available!
"Thank you. I appreciate the response and understand you needed to discuss with developers.
I find i…"
10 hours ago
Beatriz Martín replied to Dan Porter's discussion Multiple Group Hubs
"Hello.
I would like to know how this feature is done or which creator could help me.
Thx!!"
15 hours ago
Bizz ( John ) replied to Yana Ning Support's discussion Video Feature on Ning 3.0 is now available!
"Thanks Pat :-)
Yes it is a nice addition but I do wish a little more QA was done before releasing f…"
16 hours ago
Bizz ( John ) replied to Yana Ning Support's discussion Video Feature on Ning 3.0 is now available!
"I have re-uploaded this video so you can see it showing the green screen in the list page and also…"
16 hours ago
Bizz ( John ) replied to Yana Ning Support's discussion Video Feature on Ning 3.0 is now available!
"Thanks for the reply Kyryl. I have addressed all the issues in a single post for you to look at her…"
16 hours ago
Danny Lynn replied to Ian's discussion Side Backgound Image keeps shrinking and orienting left & animated gif header isn't working
""
17 hours ago
Danny Lynn replied to Ian's discussion Side Backgound Image keeps shrinking and orienting left & animated gif header isn't working
"Thank you ning team,  I Am not a owner at Media Center just member 4 years, i do link that page to…"
17 hours ago
Pat Howlett replied to Yana Ning Support's discussion Video Feature on Ning 3.0 is now available!
"Great addition Ning Team and I appreciate Bizz John taking the time to jump in and assist in findin…"
18 hours ago
Kyryl_Ning_Support replied to Ian's discussion Side Backgound Image keeps shrinking and orienting left & animated gif header isn't working
"Hi Daniel,
We do apologise for the inconveniences at this moment developers are working under the i…"
21 hours ago
Kyryl_Ning_Support replied to Yana Ning Support's discussion Video Feature on Ning 3.0 is now available!
"Hi John,
Regarding the video resolution, after the video has been uploaded, all of them are convert…"
21 hours ago
Kyryl_Ning_Support replied to Yana Ning Support's discussion Video Feature on Ning 3.0 is now available!
"XDD"
22 hours ago
Kyryl_Ning_Support replied to Yana Ning Support's discussion Video Feature on Ning 3.0 is now available!
"Hi there,
Sorry for delayed reply, it was necessary to take a hold of developers to find out the an…"
22 hours ago
Kyryl_Ning_Support replied to Yana Ning Support's discussion Video Feature on Ning 3.0 is now available!
"Hi John,
About the video that had only green screen background instead of the video itself. we have…"
23 hours ago
Irvin Carrero, Alison Pert and Shanelle Reed-Keahi joined Ning Creators Network
yesterday
Ian replied to Ian's discussion Side Backgound Image keeps shrinking and orienting left & animated gif header isn't working
"And now our 'space invaders' top nav bar gif crapped out!  Here's the original:"
yesterday
More…