options - FORUM - Ning Creators Social Network2024-03-29T07:45:45Zhttps://creators.ning.com/forum/topics/feed/tag/optionsChange the colours of your drop down options list in Profiles And Eventshttps://creators.ning.com/forum/topics/change-the-colours-of-your-drop-down-options-list-in-profiles-and2017-03-19T22:39:20.000Z2017-03-19T22:39:20.000ZBizz ( John )https://creators.ning.com/members/Bizz<div><p>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.</p>
<p>Key</p>
<p>.optionsDropdown-list background color: this is the colour for the list itself</p>
<p>.optionsDropdown a background color: this is for each of the links</p>
<p>.optionsDropdown-button background color: this is for the options button</p>
<p>color: this is the text colour</p>
<p>Here is an example</p>
<p><a href="http://storage.ning.com/topology/rest/1.0/file/get/558789?profile=original" target="_self"><img src="http://storage.ning.com/topology/rest/1.0/file/get/558789?profile=original" class="align-full" width="538"></a>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</p>
<p><script><br> // Add Class to events detail page<br> x$(document).ready(function(){<br> x$('.eventDetailPage').closest('body').addClass('eventDetail');<br> });<br> </script></p>
<p>Next is all the css for the colour changes, this goes in your design studio custom css</p>
<p>/* Profile Settings for the options drop down box and list And Events detail page drop down list */<br> .profileCoverArea-actions .optionsDropdown-button, .eventDetail .content-actions .optionsDropdown-button {<br> background-color: #d1e0f8;<br> }<br> .profileCoverArea-actions .optionsDropdown a, .eventDetail .content-actions .optionsDropdown a{<br> padding: 6px 8px;border-radius:4px; color:black;<br> }<br> .profileCoverArea-actions .optionsDropdown a:hover, .eventDetail .content-actions .optionsDropdown a:hover{<br> text-decoration:none; background-color:royalblue; color:white;<br> }<br> .profileCoverArea-actions .optionsDropdown-featureButton.feature-button.is-selected, .eventDetail .optionsDropdown-featureButton.feature-button.is-selected{<br> background-color:darkblue;color:white; border-radius:4px;<br> }<br> .profileCoverArea-actions .optionsDropdown-list, .eventDetail .content-actions .optionsDropdown-list{<br> background-color:#c9d3f2; border-radius:4px; box-shadow: 0px 8px 7px darkgray;<br> }</p>
<p></p></div>