Styling Web Inbox
Contents
How To
Both the web Inbox and badge widgets are added to your page through Shadow DOMs. This ensures there can be no conflict of styles/fonts etc with your main page. Styling is done via CSS variables, which you should set on your webpage.
For example:
<style>
:root
{
--optimove_inbox_z_index: 9000;
--optimove_inbox_z_index_1: 2147483645;
--optimove_inbox_header_background_color: #F10A69;
--optimove_inbox_badge_right: 15px;
--optimove_inbox_badge_bottom: 15px;
--optimove_inbox_badge_width: 58px;
--optimove_inbox_badge_height: 58px;
--optimove_inbox_badge_background_color: #F10A69;
--optimove_inbox_badge_border_radius: 50%;
--optimove_inbox_badge_transform: scale(0.5);
--optimove_inbox_badge_transform_origin: center;
}
</style>
The sections below describe each variable and its effects.
Inbox Component Variables
The following variables affect the appearance and layout of the main inbox component.
Font Family
Name: --optimove_inbox_font_family
ExampleBrush Script MT, cursive
The main font to use for inbox (affects all fonts in inbox).
Changing font family to cursive.
If using a custom font, make sure you import it in the head tag of your page. For example:
<head>
<!-- Custom font -->
<link href="https://fonts.googleapis.com/css2?family=UnifrakturMaguntia&display=swap" rel="stylesheet">
<style>
:root
{
--optimove_inbox_font_family: 'UnifrakturMaguntia', sans-serif;
}
</style>
</head>
Z Index
Names:
--optimove_inbox_z_index--optimove_inbox_z_index_1--optimove_inbox_z_index_2--optimove_inbox_z_index_3--optimove_inbox_z_index_4
Example: 9000
This variable determines the z index of the inbox. Because inbox widget includes aspects such as popup context menus there are 5 values.
All layers are optional. Missing values are automatically filled in (defaulting to +1 of previous layer).
Do not set z_index to its maximum (2147483647) otherwise there will be no higher values for layers 1-4.
Background Color
Name: --optimove_inbox_background_color
Exampleorange
Changes the background color of the inbox.
Changing background color to orange.
Width
Name: --optimove_inbox_width
Example: 40%
The width of the main inbox component when not in mobile (fullscreen) mode. Mobile mode kicks in when the width of the screen is below a given threshold.
Wider messages by setting inbox to 40% width.
Height
Name: --optimove_inbox_height
Example: 400px
The height of the main inbox component when not in mobile (fullscreen) mode. Mobile mode kicks in when the width of the screen is below a given threshold.
Note: percent values will take into account any top or bottom margin set on the inbox. To set the height to a percentage of the whole screen while also setting margins, use vh (viewport height) instead of %.
Top Margin
Name: --optimove_inbox_margin_top
Example: 20px
The gap between the inbox component and the top edge of the page.
Bottom Margin
Name: --optimove_inbox_margin_bottom
Example: 20px
The gap between the inbox component and the bottom edge of the page.
Horizontal Margin
Name: --optimove_inbox_margin_horizontal
Example: 40px
The gap between the inbox component and the side edge of the page.
Depending on whether the inbox is configured to show on the left or right side of the page, the margin will move the inbox away from the corresponding edge.
Vertical Alignment
Name: --optimove_inbox_vertical_align
Example: center
Possible values:
startcenterend
Controls the vertical positioning of the inbox component when the height is less than 100%.
Use start to align to the top of the page, center to align to the middle of the page, or end to align to the bottom of the page.
By default, the inbox is aligned to the top of the page.
Padding
Name: --optimove_inbox_padding
Example: 0px
The padding to use for the content area of the inbox
Removing padding from the message content area by setting padding to 0px.
Header Background Color
Name: --optimove_inbox_header_background_color
Example: red
Changes the background color on the header of the inbox (where it says INBOX)
Changing header to red.
Header Font Weight
Name: --optimove_inbox_header_font_weight
Example: bolder
Making header font weight 'normal'.
Header Text Font Size
Name: --optimove_inbox_header_text_font_size
Example: 32px
Change the font size of the INBOX text in the header.
Making header font size very large (32px).
Header Text Color
Name: --optimove_inbox_header_text_color
Example: #AAFF00
Color for the Inbox header line.
Setting header text to green.
Header Delete Button Background Color
Name: --optimove_inbox_header_delete_button_background_color
Example: #BB0000
A background can be added to the close button e.g. red.
Adding a red background to the close button.
Message Bottom Margin
Name: --optimove_inbox_message_bottom_margin
Example: 0px
Defines how much space exists between each message
Removing the grey line separating messages by setting the message bottom margin to 0px.
Message Content Font Size
Name: --optimove_inbox_message_content_font_size
Example: 10px
The size of the main content of each message.
The font size has been changed to very small for the message content.
Message Title Font Size
Name: --optimove_inbox_message_title_font_size
Example: 10px
The size of the title of messages.
Title is very small (10px).
Message Background Read
Name: --optimove_inbox_message_background_read
Example: #EEEEEE
The background color to use for messages that have been read by the user (previously opened and viewed).
Example setting read messages color to gray (#EEEEEE). The blue color shows for the top message because it is unread.
Message Background Unread
Name: --optimove_inbox_message_background_unread
Example: #FBFFA1
The background color to use for messages that have NOT been read by the user (or explicitly marked unread).
Example setting unread (new) messages to yellow. The other message which is old remains the default (white) color
Message Border Radius
Name: --optimove_inbox_message_border_radius
Example: 15px
Creates a rounded border on messages.
Large Image Radius
This setting does not affect the top border of large image cards. However this can be included by also setting
--optimove_inbox_message_images_border_radius.
Messages with a wide rounded border (15px). Note that the large image top border is not affected.
Message Images Border Radius
Name: --optimove_inbox_message_images_border_radius
Example: 50%
Controls the upper left and right borders of large image messages (lower left/right are fixed at 0). This can be combined with --optimove_inbox_message_border_radius.
Creating a rainbow shaped message with image border radius (only affects large image format).
Message Images Small Width/Height
Name:
--optimove_inbox_message_images_small_width--optimove_inbox_message_images_small_height
Example: 50%
Determines the size of the image in 'small' image messages. Typically these should be kept the same as one another to avoid clipping square images.
The small image takes up 50% of the message width and height (both are set to 50%).
Message Images Small Border Radius
Name: --optimove_inbox_message_images_small_border_radius
Example: 50%
Controls how rounded the images are on the small message image.
Small image has a completely circular image (50% border radius)
Message Title Font Weight
Name: --optimove_inbox_message_title_font_weight
Example: bolder
The font weight for the title of messages.
Bolder message title.
Message Title Font Color
Name: --optimove_inbox_message_title_font_color
Example: orange
The color of the title of messages.
Changing color of the title to orange.
Message Font Weight
Name: --optimove_inbox_message_font_weight
Example: lighter
The font weight of the main body of the message.
Content of the message with 'lighter' font weight.
Message Font Color
Name: --optimove_inbox_message_font_color
Example: orange
The color of the main body of the message.
Message with orange font color.
Action Menu Variables
These variables style the context menu that appears when clicking the "3-dots" button on the message.
Message Action Button Color
Name: --optimove_inbox_message_action_button_color
Example: #00aaff
The color of the "x minutes ago" text and the 3-dots menu button.
The "3-dots" menu and "1 Minutes ago" text is changed to blue.
Message Action Button Background Color
Name: --optimove_inbox_message_action_button_background_color
Example: #00aaff
The background color of buttons in the message action menu.
The background of the "Mark as unread" and "Delete" buttons is changed to blue.
Message Action Button Icon Size
Name: --optimove_inbox_icon_icon_size
Example: 24px
The size of the icons in the action menu of each message.
The icons of the action menu items are larger.
Message Action Button Text Font Family
Name: --optimove_inbox_message_action_button_text_font_family
Example: Brush Script MT
The font family used by the "x minutes ago" text.
The "8 Minutes ago" text is changed to cursive.
Message Action Button Text Font Size
Name: --optimove_inbox_message_action_button_text_font_size
Example: 16px
The font size of the "x minutes ago" text.
The "7 Minutes ago" text is changed to be larger.
Action Menu Background Color
Name: --optimove_inbox_context_menu_background_color
Example: #91daff
The background colour of the action menu when the "3 dots" menu is clicked.
The background of the context menu is changed to blue.
Action Menu Hover Color
Name: --optimove_inbox_action_menu_hover_color
Example: #00aaff
The text color of buttons in the action menu when hovered.
The action menu items are made blue when hovered.
Action Menu Hover Scale
Name: --optimove_inbox_action_menu_hover_scale
Example: scale(1.2)
The scaling factor of buttons in the action menu when hovered.
The action menu items are set to scale 1.2x when hovered.
Action Menu Hover Transition
Name: --optimove_inbox_action_menu_hover_transition
Example: 500ms
The duration of the transition when hovering over action menu items.
Action Menu Hover Opacity
Name: --optimove_inbox_action_menu_hover_opacity
Example: 50%
The opacity of buttons in the action menu when hovered.
The opacity of the action menu items is reduced to 50%.
Bell Background
Name: --optimove_inbox_bell_background
Example: orange
The background color of the bell icon in the header of the inbox.
The background of the bell icon is set to orange.
Bell Fill
Name: --optimove_inbox_bell_fill
Example: orange
The foreground fill color of the bell icon in the header of the inbox.
Inbox with the bell in the header set to orange.
Bell Left
Name: --optimove_inbox_bell_left
Example: 16px
Controls the left padding of the bell icon in the inbox header.
Badge Variables
These variables control the positioning and appearance of the launcher badge that shows when enabled in your Web Inbox settings. To use a custom badge image, set it in your Web Inbox settings.
Badge Position
Name: --optimove_inbox_badge_position
Example: fixed
Indicates the position of the launcher badge for Web Inbox when it is enabled. This is passed to the position property of the badge.
Badge Left
Name: --optimove_inbox_badge_left
Example: 16px
This is passed to the left property of the badge. Set to auto to ignore.
Badge Top
Name: --optimove_inbox_badge_top
Example: 16px
This is passed to the top property of the badge. Set to auto to ignore.
Badge Right
Name: --optimove_inbox_badge_right
Example: 16px
This is passed to the right property of the badge. Set to auto to ignore.
Badge Bottom
Name: --optimove_inbox_badge_bottom
Example: 16px
This is passed to the bottom property of the badge. Set to auto to ignore.
Badge Width
Name: --optimove_inbox_badge_width
Example: 50px
The width of the launcher badge.
Badge Height
Name: --optimove_inbox_badge_height
Example: 50px
The height of the launcher badge.
Badge Background Color
Name: --optimove_inbox_badge_background_color
Example: #00aaff
The background colour of the launcher badge.
The badge with a blue background.
Badge Border Radius
Name: --optimove_inbox_badge_border_radius
Example: 8px
The border radius of the launcher badge.
The badge with 8px rounded corners.
Badge Border
Name: --optimove_inbox_badge_border
Example: 2px solid black
This is passed to the border property of the launcher badge.
The badge with a solid black border.
Badge Transform
Name: --optimove_inbox_badge_transform
Example: scale(1.5)
Applies a custom transform to the badge image. This only takes effect when you have set a custom badge image in your inbox settings. Accepts any valid CSS transforms.
Badge Transform Origin
Name: --optimove_inbox_badge_transform_origin
Example: center
Sets the transform-origin property of the badge image.
Updated 2 days ago