This topic contains 1 reply, has 2 voices, and was last updated by Zis Zis 2 years, 11 months ago.

Scrollbar Styling on Notification Dropdown


  • thekoreproject
    Participant

    Member Reply #1838

    I can’t seem to find out where I can change the color of the scrollbar for the notifications dropdown (accessed from the top header bar.

    Thanks,

    Mike

    Attachments:
    You must be logged in to view attached files.
    Zis
    Zis
    Participant

    Posts: 150
    Support Staff Reply #1840

    Hi there,

    You can change the scrollbar color in the following places:

    1) Using CSS file. Add the following code in your custom.css

    .slimScrollBar {

    background: … !important;

    opacity: … !important;

    }

    2) Using HTML file (where Metronic default color set for scrollbar). Find the following code in HTML file

    <ul class=”dropdown-menu-list scroller” style=”height: 250px;” data-handle-color=”…”>

    </ul>

    and add you color to data-handle-color=”…”

    3) Additionally, you can change from JS file. Refer to

    <script src=”../../assets/global/plugins/jquery-slimscroll/jquery.slimscroll.js” type=”text/javascript”></script>

    and change the following codes

    // scrollbar color, accepts any hex/color value

    color: ‘#000’,

    // sets scrollbar opacity

    opacity: .4,

    in the lines 26 and 38 respectively.

    If ever we can be of assistance, please let us know.

    Cheers! 😉

You must be logged in to reply to this topic.