Overview
This article provides a compilation of CSS and JavaScript snippets to enhance and customize your online community interface. The enhancements range from UI customizations, like hiding specific widgets, to integrating external widgets such as Google Translate. Before implementing these codes, ensure you're familiar with the Custom Header/Footer menu of your platform.
Information
Please use the following CSS & Javascript snippets below to customize and enhance your community. These snippets can be implemented within the Custom Header/Footer menu. If you're not familiar with this menu, please read the following article:
Notes:
- Place all CSS styling rules within opening and closing style tags. (ex. <style> </style>)
- Property values within CSS rules are default.
Hide the Popular Topics widget
#recent-topics-widget { display: none; }
Hide the Recent Badges widget
#recent-badges-widget{ display:none; }
Hide the password fields from the user profile menu
This is recommended for sites that have an SSO implemented since password changes are handled through an SSO portal.
Note: The numbered selectors can be affected if you add additional fields via User Profile Extended Properties.
#detailsPanel .form-horizontal .control-group:nth-child(4), #detailsPanel .form-horizontal .control-group:nth-child(5) { display: none; }
Hide the email address field from the user profile menu
#detailsPanel .form-horizontal .control-group:nth-child(3), #detailsPanel .form-horizontal .control-group:nth-child(4), #detailsPanel .form-horizontal .control-group:nth-child(5){ display: none; }
Change color of the CREATE button and dropdown arrow menu directly next to it
#main-navbar .navbar-inner .btn.btn-warning#create-button, #main-navbar .navbar-inner .btn.btn-warning.dropdown-toggle { background-color: #2F3E64; }
Change the color of the navigation bar
#main-navbar .navbar-inner { background: #2f4151; }
Change the color of area above navbar that contains logo
#main-navbar .navbar-inner.brand-nav { background: #fff; }
Change the size of the logo
#main-navbar .navbar-inner.brand-nav img{ max-width: 260px; max-height: 100px; }
Priyanka Bhotika
Comments