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;
}
Replies