Docs    Instagram    Customizations

How to change the color of the icons when a photo has a like or comment

Version 6.0 and above

By default, each photo’s like and comment icons will remain the same color, whether they are 0 or not. You can add a JavaScript snippet to the plugin, which will change the color of the icons when a photo has received either a like or comment.

Add the following JavaScript to your site. This can be done manually using a custom JavaScript plugin. For further information see our documentation here.

$('#sb_instagram .sbi_item').each(function(){
  $self = $(this);
  if( parseInt( $self.find('.sbi_likes').text() ) > 0 ) $self.find('.sbi_likes, .sbi_likes svg').css('color', 'blue');
  if( parseInt( $self.find('.sbi_comments').text() ) > 0 ) $self.find('.sbi_comments, .sbi_comments svg').css('color', 'blue');
});

The code above will change the color of the icons to blue. However, you can modify this color by changing the section in the code ('color', 'blue'). You can use any other color or HEX code.

Below version 6.0

By default the like and comment icons for each photo will remain the same color whether they are 0 or not. You can add a JavaScript snippet to the plugin which will change the color of the icons when a photo has received either a like or comment. Add the following to the plugin’s Custom JavaScript section, which is on the plugin’s Customize page and tweak the colors in the snippet accordingly:

$('#sb_instagram .sbi_item').each(function(){
  $self = $(this);
  if( parseInt( $self.find('.sbi_likes').text() ) > 0 ) $self.find('.sbi_likes, .sbi_likes svg').css('color', 'blue');
  if( parseInt( $self.find('.sbi_comments').text() ) > 0 ) $self.find('.sbi_comments, .sbi_comments svg').css('color', 'blue');
});

support

Couldn’t find your answer in the docs?

Contact Support

Was this article helpful?