Configuring the MightyCall Contact Widget using CSS

If you want to customize Contact Widget, you can use your .css file, or styles and place them on the web page.
To achieve maximum effect consider the following recommendations:

  1. Place your custom styles after the widget code.
  2. Use !important keyword at style property to avoid styles collision.
  3. Use #InfratelWidget prefix before any style definition to target your styles exactly to Contact Widget.

Here is an example:

/* Common Styles */
#InfratelWidget,
#InfratelWidget h2,
#InfratelWidget h4,
#InfratelWidget button {
font-family: Georgia,Serif !important;
}
/* Headers */
#InfratelWidget h2,
#InfratelWidget h4 {
color: #453320 !important;
}
/* Links */
#InfratelWidget a {
color: #e50000 !important;
}
/* Container */
#InfratelWidget {
border: 1px solid #b09370 !important;
border-radius: 4px !important;
background-color: #f4d0a8 !important;
}
/* Data Table Borders */
#InfratelWidget .table td {
border-top: 1px solid #b09370 !important;
}
/* Contact Us Button */
#InfratelWidget #InfratelWidgetButton button {
background: #000 !important;
border: none !important;
padding: 6px 10px !important;
margin: 0 !important;
text-transform: uppercase !important;
color: #fff !important;
}
#InfratelWidget #InfratelWidgetButton button:hover {
background: #e50000 !important;
}
/* Widget Blocks */
#InfratelWidget #InfratelWidgetCompany, /* Company Name and Address */
#InfratelWidget #InfratelWidgetContacts, /* Phone Numbers and Other Contacts */
#InfratelWidget #InfratelWidgetHours, /* Working Hours */
#InfratelWidget #InfratelWidgetMedia, /* Social Media Links */
#InfratelWidget #InfratelWidgetInfo, /* vCard, Email info */
#InfratelWidget #InfratelWidgetButton, /* Contact Button Block */
#InfratelWidget #InfratelWidgetMap, /* Map */
#InfratelWidget #InfratelWidgetGallery, /* Gallery */
#InfratelWidget #InfratelWidgetLike { /* Like Buttons */
border: 1px solid #b09370 !important;
border-radius: 4px !important;
background-color: white !important;
padding: 5px;
}