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 through css variables, which are provided to the API as part of the config
object styles
property.
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
Example'Brush Script MT, cursive
The main font to use for inbox (affects all fonts in inbox).
If using a custom font, make sure you import it in your head
tag. For example:
<!DOCTYPE html>
<html>
<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>
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.
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.
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:
start
center
end
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
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)
Header Font Weight
Name: --optimove_inbox_header_font_weight
Example: bolder
Header Text Font Size
Name: --optimove_inbox_header_text_font_size
Example: 32px
Change the font size of the INBOX text in the header.
Header Text Color
Name: --optimove_inbox_header_text_color
Example: #AAFF00
Color for the Inbox header line.
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.
Message Bottom Margin
Name: --optimove_inbox_message_bottom_margin
Example: 0px
Defines how much space exists between each message
Message Content Font Size
Name: --optimove_inbox_message_content_font_size
Example: 10px
The size of the main content of each message.
Message Title Font Size
Name: --optimove_inbox_message_title_font_size
Example: 10px
The size of the Title of the messages.
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).
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).
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
Message Color
Name: --optimove_inbox_message_color
Example: TODO
TODO does not work
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.
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.
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.
Message Title Font Weight
Name: --optimove_inbox_message_title_font_weight
Example: bolder
The font weight for the Title of messages.
Message Title Font Color
Name: --optimove_inbox_message_title_font_color
Example: orange
Color of the title
Message Font Weight
Name: --optimove_inbox_message_font_weight
Example: lighter
Font weight of the main body of the message
Message Font Color
Name: --optimove_inbox_message_font_color
Example: orange
Changes the color of the main body of the message.
Action Menu Variables
This section relates to the context menu that appears when clicking on the '3 dots' button on the message.
Message Action Button Border
Name: --optimove_inbox_message_action_button_border
Example: TODO
Message Action Button Height
Name: --optimove_inbox_message_action_button_height
Example: TODO
Message Action Button Width
Name: --optimove_inbox_message_action_button_width
Example: TODO
Message Action Button Color
Name: --optimove_inbox_message_action_button_color
Example: TODO
Message Action Button Background Color
Name: --optimove_inbox_message_action_button_background_color
Example: TODO
Message Action Button Text Font Family
Name: --optimove_inbox_message_action_button_text_font_family
Example: TODO
Message Action Button Text Font Size
Name: --optimove_inbox_message_action_button_text_font_size
Example: TODO
Context Menu Background Color
Name: --optimove_inbox_context_menu_background_color
Example: TODO
Message Action Menu Font
Name: --optimove_inbox_message_action_menu_font
Example: TODO
Message Action Menu Font Color
Name: --optimove_inbox_message_action_menu_font_color
Example: #37474F
Action Menu Color
Name: --optimove-inbox-action-menu-color
Example: TODO
Action Menu Hover Color
Name: --optimove_inbox_action_menu_hover_color
Example: TODO
Action Menu Hover Scale
Name: --optimove_inbox_action_menu_hover_scale
Example: TODO
Action Menu Hover Transition
Name: --optimove_inbox_action_menu_hover_transition
Example: TODO
Action Menu Hover Opacity
Name: --optimove_inbox_action_menu_hover_opacity
Example: TODO
Bell Background
Name: --optimove_inbox_bell_background
Example: orange
TODO Spills outside border
Bell Fill
Name: --optimove_inbox_bell_fill
Example: orange
Bell Left
Name: --optimove_inbox_bell_left
Example: TODO
Badge Variables
These variables control the positioning and appearance of the launcher badge that shows when useBadge setting is enabled. To change the badge image itself (i.e. image path) see the main inbox settings.
Badge Position
Name: --optimove_inbox_badge_position
Example: TODO
Indicates the position of the launcher badge for Web Inbox when it is enabled
Badge Left
Name: --optimove_inbox_badge_left
Example: TODO
Badge Top
Name: --optimove_inbox_badge_top
Example: TODO
Badge Right
Name: --optimove_inbox_badge_right
Example: TODO
Badge Bottom
Name: --optimove_inbox_badge_bottom
Example: TODO
Badge Width
Name: --optimove_inbox_badge_width
Example: TODO
Badge Height
Name: --optimove_inbox_badge_height
Example: TODO
Badge Background Color
Name: --optimove_inbox_badge_background_color
Example: TODO
Badge Border Radius
Name: --optimove_inbox_badge_border_radius
Example: TODO
Badge Border
Name: --optimove_inbox_badge_border
Example: TODO
Badge Transform
Name: --optimove_inbox_badge_transform
Example: TODO
Badge Transform Origin
Name: --optimove_inbox_badge_transform_origin
Example: TODO
TODO: are these Icon settings for badge too?
Icon Color
Name: --optimove_inbox_icon_color
Example: TODO
Icon Left Margin
Name: --optimove_inbox_icon_left_margin
Example: TODO
Icon Size
Name: --optimove_inbox_icon_icon_size
Example: TODO
Updated about 1 month ago