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

This tip is to show how you can the boring old gray options drop down list into something with a little more colour. You can change the setting to fit your site in the code.

Key

.optionsDropdown-list background color: this is the colour for the list itself

.optionsDropdown a background color: this is for each of the links

.optionsDropdown-button background color: this is for the options button

color: this is the text colour

Here is an example

First we need just to add a small bit of custom code for the events page, this code goes in your site&pages custom code

<script>
// Add Class to events detail page
x$(document).ready(function(){
x$('.eventDetailPage').closest('body').addClass('eventDetail');
});
</script>

Next is all the css for the colour changes, this goes in your design studio custom css

/* Profile Settings for the options drop down box and list And Events detail page drop down list */
.profileCoverArea-actions .optionsDropdown-button, .eventDetail .content-actions .optionsDropdown-button {
 background-color: #d1e0f8;
 }
.profileCoverArea-actions .optionsDropdown a, .eventDetail .content-actions .optionsDropdown a{
 padding: 6px 8px;border-radius:4px; color:black;
 }
.profileCoverArea-actions .optionsDropdown a:hover, .eventDetail .content-actions .optionsDropdown a:hover{
 text-decoration:none; background-color:royalblue; color:white;
 }
.profileCoverArea-actions .optionsDropdown-featureButton.feature-button.is-selected, .eventDetail .optionsDropdown-featureButton.feature-button.is-selected{
 background-color:darkblue;color:white; border-radius:4px;
 }
.profileCoverArea-actions .optionsDropdown-list, .eventDetail .content-actions .optionsDropdown-list{
 background-color:#c9d3f2; border-radius:4px; box-shadow: 0px 8px 7px darkgray;
 }

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

Join Ning Creators Social Network

Email me when people reply –
 

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

Tim replied to Anastasia_Ning_Support's discussion
What’s New on NING: Recap of the Latest Updates
"Perfect, works now, thank you!"
3 hours ago
Unpwn Producer replied to Unpwn Producer's discussion
I need to secure my site
"Thank you!! I've been really busy and haven't had time to mess with things I'm not familiar with, h…"
4 hours ago
Anastasia_Ning_Support replied to ⚡JFarrow⌁'s discussion
Question about "What's New With Ning" Module
"Hello Justin!
I have asked around, and if I understood your question correctly, you will not really…"
4 hours ago
Anastasia_Ning_Support replied to Anastasia_Ning_Support's discussion
What’s New on NING: Recap of the Latest Updates
"Hello again!
We have refreshed a few things on our end and now the search results should display al…"
4 hours ago
Anastasia_Ning_Support liked ⚡JFarrow⌁'s discussion New App for Getting Help with Your Ning Community
4 hours ago
Anastasia_Ning_Support replied to Anastasia_Ning_Support's discussion
What’s New on NING: Recap of the Latest Updates
"Hello Tim!
Advance search should find single words as well. I will send your network to our tech te…"
5 hours ago
Splisk, Jimi le Roux, Christine Brumback and 1 more joined Ning Creators Social Network
5 hours ago
Matt replied to Garfield Archivist's discussion
Javascript Edits
"nice"
7 hours ago
Stan updated their profile photo
10 hours ago
Garfield Archivist replied to Garfield Archivist's discussion
Javascript Edits
"Thank you so much Matt. I used your code to get to my ideal solution but I could not have gotten th…"
14 hours ago
Matt replied to Garfield Archivist's discussion
Javascript Edits
"have a play with following: ning 2
<script>{x$('.xg_headline').insertAfter('.vid_container');}</scr…"
17 hours ago
Garfield Archivist posted a discussion
Quick questions: There are css edits you can do on Ning and those are relatively simple but does an…
22 hours ago
More…

Meanwhile, you can check our social media channels