Coming really soon...

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

Jennifer Peterson replied to Jennifer Peterson's discussion
How to Make Profile Picture Size Bigger on Profile Page
"Hi kyryl,
I put your code in and it did work :) I will try Johns tonight when I am able to work on…"
9 minutes ago
Jennifer Peterson replied to Jennifer Peterson's discussion
How to Make Profile Picture Size Bigger on Profile Page
"Ok sounds good John. I did use the code earlier from what kyryl gave me. I will wait for yours and…"
10 minutes ago
Manuel A J replied to Kyryl_Ning_Support's discussion
Chat Feature Update on Ning 3.0 is ready!
"Hola Kyryl ... sigue el chat sin enviar un mensaje ... cada vez que tienes que actualizar ... esto…"
22 minutes ago
Bizz ( John ) replied to Jennifer Peterson's discussion
How to Make Profile Picture Size Bigger on Profile Page
"Hi Kyryl, I see you added some code for Jennifer for the text. That's an awful lot of code to do th…"
53 minutes ago
Bizz ( John ) replied to Jennifer Peterson's discussion
How to Make Profile Picture Size Bigger on Profile Page
"Hi Jennifer, here is the line off css for the text you wanted. I have added your logo and the text…"
55 minutes ago
Bizz ( John ) replied to Jennifer Peterson's discussion
How to Make Profile Picture Size Bigger on Profile Page
"Hi Jennifer, thanks for posting the message. You might have sent it on my old profile ( the one wit…"
4 hours ago
Ning via Facebook

#Ning #secret #success Do you want to have the secret weapon for growing your online community?…

Ning via Facebook

#Ning #learn #English Learning English or know someone who does? Check out a guide for learning…

More…