Boost: "ghost" icons in header and nav-drawer

Boost: "ghost" icons in header and nav-drawer

by Glenn Pillsbury -
Number of replies: 3

Hi,

Using Moodle 3.3 and a modified version of the kraus-blue.scss file.  As you can see from the screenshot below, I'm getting a strange "ghosting" effect with the notifications and messages icons.  It also occurs in the nav drawer in the display of the little folder icon next to each item in the list of sections courses (see screenshot).

Header:

Nav-drawer:


In the .scss file, this seems to be the relevant code, but I don't see anything obvious that would cause multiple instances of the icon to appear.

#nav-notification-popover-container,
#nav-message-popover-container {
    background-repeat   : no-repeat;
    background-position : center;
    img {
        visibility : hidden;
    }
}
#nav-notification-popover-container {
    background-image : url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAArElEQVR4AY1TAY3EMAx7CA9hEAphEA5CIQxCGBTCIBTCQRiEQSiEXCd5khVdbrZkaUpnp02SPxXuvk72yUUVLBBENEVcJofnsCeDw5/xysTVNRyZweki8uwiovgf2VUMFhpXXcT7NrDb8QqCwk3QShqW+uVJFYZ5G68PukHh0UWssVFWwJ1MNopzXSx0aY0mRocnfi4h804mPds4LuCAqE1uOK/chV/j3JVd+ACbo6JOTd4N8wAAAABJRU5ErkJggg==');
}
#nav-message-popover-container {
    background-image : url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAYAAABWdVznAAAAOElEQVR4AWP4//+/ARA3EItBGub/JwEwgHUSAqMaEPGwH01uPdZ4gAJ0m+YzEAAIDQjFhDUQoxgAihXBqBpEOfEAAAAASUVORK5CYII=');
}

Would appreciate any help on this!

Average of ratings: -
In reply to Glenn Pillsbury

Re: Boost: "ghost" icons in header and nav-drawer

by Gareth J Barnard -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Plugin developers

This is down to the base 64 encoded PNG background images you see in the SCSS you've posted.

In reply to Gareth J Barnard

Re: Boost: "ghost" icons in header and nav-drawer

by Glenn Pillsbury -

Thanks for the reply!

Yes, I see that the images are being generated by that code, but I don't understand why there are both black and white icons showing.  I didn't write the original CSS, so I'm trying to understand why it's written that way.  And, I don't see how the code could generate a duplicate image in the nav-drawer since that area is not targeted by the image CSS.

Will keep looking...

In reply to Glenn Pillsbury

Re: Boost: "ghost" icons in header and nav-drawer

by Gareth J Barnard -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Plugin developers

The white icons are coming from the scss you've added.  The black icons are coming from the Boost theme itself in other selectors as presets (I believe) add to the SCSS.