Jump to content

Folder Icons

Recommended Posts

The icon image is hard coded into FrogLearn I'm afraid, although CSS can come to the rescue here.   

As with any element in FrogLearn, if you right-click on a folder and choose "Inspect Element" you see the final HTML used to generate the folder


With a bit of practice, you can spot the CSS class which sets the look of the element.  In this case it's os-icon-ext-resources-folder, so if we then add an HTML widget to the primary dashboard we can do something like this:

.os-icon-ext-resources-folder {
    background: url('image-url.jpg?width=150&height=150') !important;

  • You will have to upload your own image to a shared area in Frog (I couldn't get color overlay to work)
  • It's always worth adding ?width=150&height=150 to the URL as this triggers Frog to create a smaller image - rather than use a huge picture for a tiny icon
  • !important was needed as it forced the style sheet to overwrite the orginal.  Unfortunately IE does not respond to !important

If you do get something working, please post a screenshot here - it might inspire others and I'll show the product team


Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Create New...