Posted on

Developers Delight! Custom Code Feature added to Icegram

Last updated on September 23, 2020

This post is about the addition of the Custom Code Block.

Achieve anything with Custom Coding

Custom Code
Custom Code
  • You can increase/decrease the height of a message type.
  • Change the width of the message type.
  • Apply a different font to the message body.
  • Change the font size of the headline.
  • And lot more…

How to quickly run Custom Code In Icegram

You can now add all your CSS and JS code in a separate code block. It appears right above the targeting rules section in the Icegram Campaign Editing Panel.

custom_css_js code block
custom_css_js code block

Try in under 5 minutes


Use these simple custom css codes in your next Icegram campaign and have fun!

1. Change the width of the entire Icegram message

      #ig_this_message{width:30% !important;}

NOTE: prefix your CSS selector/rule with “#ig_this_message” for any HTML element inside main Container.

2. Change the font-size of the headline

#ig_this_message .ig_headline{font-size: 3em !important;}

3. Change font-family for the entire message

#ig_this_message .ig_message{font-family:"Times New Roman", Georgia, Serif !important;}

Note: Use !important override default CSS. For js code add your javascript code between “<script>”

German Translation


We have also added the German translation to Icegram thanks to one of our client's Mr. Franz for helping us with it.

Other Notable Mentions

The add-ons and docs page inside the plugin are revamped. And we hope this change will only prove beneficial. Please give it a look. Also, we've internally prevented the false impression count caused due to crawling. Thus Analytics will only record true impressions by real visitors and not the ones by crawlers/bots.

26 thoughts on “Developers Delight! Custom Code Feature added to Icegram

  1. Hi,
    I’m using Icegram WordPress plugin to display the Action Bar to subscribe to my blog posts. I find the hight of the Action Bar to be too big. As you explained here I can change the font-size of the headline setting it to:
    #ig_this_message .ig_headline{font-size: 3em !important;}

    I found even that I can change the hight of the Action Bar itself by setting this:
    #ig_this_message .ig_form_container{height: 1em !important;}

    But how can I change the hight of the input text field and the submit button?

    Thank you!

    1. Hi Alex,

      You can add below CSS instead of you added for headline and form container.

      #ig_this_message {font-size: 0.75em !important;}
      You can change the font-size as per your requirement.

      Thank you.

  2. Hi there, I’m using Icegram in order to display a Pop Up. I’d like my users to be able to see what they are typing in this field: [email* your-email] (which comes from a form made in contact form 7) … as whatever you type in this field goes white. How can I change the color? black for example. Many thanks.


    1. Hi Mauro,

      It seems, your wp theme or some third party plugin is overriding the text color of email field.

      Please add below css in Custom code > css area.

      #ig_this_message .ig_form_container input[type="email"] { color: #000 !important }

      Thank you

  3. Hi, I’m using the Action Bar. What CSS can I use to change the height of the bar? and also change the input field size for the form in the action bar? Love the plugin – thanks!!

    1. Hi Mike,
      Thank you for using Icegram.
      Can you please link where you have setup this Action bar?
      We have to check first how action bar looks.
      Team Icegram

  4. Hello! Im new with icegram , i’ve follow your CSS codes and its working great though I can’t seem to find out how to change the button font and place it along with the fields in the bottom of the window. Any help? Thank you!

    1. Hi Sofia,
      Thank you for using Icegram.
      Can you please give us the URL where you have set Icegram’s message?
      We will check message and let you know.
      You can share url on email id.

  5. Loving your plugin.
    Is it possible for me to add a background image using custom css?

    1. Hi Gavin,

      Yes, it is possible to add background image using custom css.
      You can take a look at our Gallery in Icegram > Gallery section within the plugin, using Icegram Plus plan.
      We have readymade template to use.
      Hope this helps you.

  6. Hi,

    Love the Plugin, but need help. I’m using the Solid Action Bar and would like to have the text centered. What do I add to the custom code css to make changes.

    Thanx in advance…

    1. Hi Robin,
      We recommend you to use hello theme of action bar for centre aligned content.
      You can hide border by using below css and make it like Solid action bar.
      #ig_this_message, #ig_this_message.ig_hello.ig_hide .ig_close{
      border: none;
      Let us know how it goes?

  7. Hello. Love Icegram but just changed theme and now want the headline a different colour. Is there a simple code to do that please? I’ve had a go but haven’t quite succeeded.

    1. Hi Matt,

      You can change the font color of the headline using a simple css.
      <span style="color:#FE0000;">Your headline here</span>

      Add this code to your headline section and replace the #FE0000 with the color of your choice. If you need any help feel free to send us an email.


  8. Hi – I’m using Icegram with Group Selector to help people register for a reminder on their birth month. The groups are the month names, and I’d love to have cron send the group a message at the beginning of the previous month.
    I know how to set up the cron piece, but currently cron just sends all emails in the queue whenever it kicks off. I need to customize so that each time I ask the newsletter to send an email via cron, it gives me a unique message id to send. Any clues?

    1. Hi David,

      In Email Subscribers, you cannot send emails via cron to a particular group. If you are using cron, it will send all emails in queue.
      You can write your own custom code to achieve this.

  9. Love the plugin. I was wondering if it is possible to have the action bar retain it’s properties when moving to a new page. Specifically if the bar has been minimised by the user, can it stay minimsed when a navigating to another page on the site? Is there some custom css i can add? At the moment for me it reverts to it’s original setting of being open.

    Many thanks.

    1. Hi Nick,
      Thank you for using Icegram.
      Currently it is not possible to retain Action bar in minimise position.
      We have design Action Bar like that, so it will reopen and noticeable on every page.
      Hope this helps you.

  10. I want to change the background image of your default pop up which i selected from your gallery. How it is possible

    1. Please find out the image URL in the custom code > css section. Find out image URL and replace it.

  11. I am using a custom Rainmaker Form with Icegram.
    The email validation fails with type=”email” occasionally.
    I’m intentionally testing with bad emails like “123@” or “123” or “123@abc”
    I’d also like to validate a zipcode5.
    I’d like to incorporate some custom code.
    Do you have any examples where this is being done?

    1. Hi Roman,
      This should not happen.
      Rainmaker should validate email. As you have added some custom form you have to validate you extra fields like zip code etc.
      Add script to validate zip and other fields in custom form section only.

  12. Hi Guys – can’t get a paragraph within my pop up. Apologies if this is me being awful at coding but tried all sorts of tags in the message body to no avail!

    1. Hey Marc,

      Kindly email usthe link of your website where you have this popup setup. We can definitely have a look and help you achieve what you want.

  13. Hi, could you please tell me how to change the text input box and button size, along with their fonts? As they are very small. I know you had previously replied to a comment stating:

    #ig_this_message {font-size: 0.75em !important;}

    But this isn’t working for me…the input/button and text stays the same…

    Thank you

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.