Streaming live at 10am (PST)

Using ColorThief

Hey guys,

I’m looking to create a box where the border (or a div) is the dominant color from an image uploaded in through the CMS.

I have attached a screenshot of an example from Color Thief and I am wondering if anyone knows how to implement this code into a CMS image to get the dominant color and apply it to a div block.


Webflow.push(function() {
  $.getScript('', function() {
    var color = colorThief.getColor($('#insertImageId'));
    $('#insertDivId').css('background-color', color);

Replace insertImageId and insertDivId with your own.

Hey Sam,

Thanks for the code. I just purchased the CMS plan. Where is the best place to insert this code?

Place this in the footer code (before </body> tag) of the page settings.

Replace the jQuery selectors to match the ID or class of the elements on the page.

I have entered the code in the before tag on the home page but I’m not getting it to work.

Any ideas what I might be doing wrong? Here is a preview link. There div I am trying to change is called SlideNavHeader and I want it to draw from ModalImage.

Thanks for your support!