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

Votes: 0
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

⚡JFarrow⌁ updated their profile photo
3 hours ago
⚡JFarrow⌁ replied to Aase Lillian's discussion
Community - activity page
"Yes you can add emojis to your community pretty much anywhere you like.
If you need some help…"
3 hours ago
Aase Lillian updated their profile
3 hours ago
Aase Lillian posted a discussion
Hi all. Is it possible to add emojis to the community? I also wish the activity page to include…
3 hours ago
Donna MacShoe updated their profile photo
Mar 6
Adul Rodri is now friends with ANGE.L LUAR and Margarida Maria Madruga
Feb 14
Shweta Sharma updated their profile
Jan 26
catherine martin updated their profile
Jan 16
Donna MacShoe updated their profile photo
Jan 15
⚡JFarrow⌁ replied to ⚡JFarrow⌁'s discussion
For Creators and Admins: Easy Way to Create a Community Status Report
"This is still one of the best posts for RSS feeds"
Jan 8
brahim jounh updated their profile
Dec 28, 2023
Sewerz updated their profile
Dec 20, 2023
More…

Meanwhile, you can check our social media channels