Custom CSS Styling Guide for Icegram Express

You can style Icegram Express subscription forms to perfectly match your theme typography and brand palette by adding custom CSS to your theme’s Additional CSS panel (Appearance > Customize > Additional CSS) or via a custom code plugin.

Common CSS Selectors and Customizations

1. Change Submit Button Text & Background Color

/* Normal state */
.es_textbox_button {
  background-color: #2563eb;
  color: #ffffff;
  border-radius: 6px;
  font-weight: 600;
  padding: 10px 20px;
}

/* Hover state */
.es_textbox_button:hover {
  background-color: #1d4ed8;
  color: #ffffff;
}

2. Style the Email Input Field

.es_txt_email {
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  padding: 10px 14px;
  color: #1e293b;
  background-color: #ffffff;
}

.es_txt_email:focus {
  border-color: #2563eb;
  outline: none;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}

3. Add Border and Padding to Widget Forms

.widget .es_subscription_form {
  border: 2px solid #e2e8f0;
  border-radius: 8px;
  padding: 20px;
  background-color: #f8fafc;
}