Coming really soon...

Forum

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 –

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…"
11 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…"
54 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…