Modal & Tab Setup

Modal Z-Index

When using these modals, it is important to understand the stacking order of the items on a web page. Each item has a z-index which is a number. The higher the number - the higher the item is in the stacking order which is their position from front to back.
It is really important not to use the "Always On Top" control in the Arrange menu - especially for the EverWeb default navigation - since this wll allow it to appear above the modal overlay.

Modal Tabs

The buttons which open the different types of modal are all styled in the same way so, to avoid repeating these instructions, they will only appear on this page.

Full Width Modal Tab Settings

Widget Settings

Enter the tab text and adjust the width using a drag handle. Use the HTML5 line break <br> to create returns.
Enter the font family name, check the box if it is Google hosted and select a suitable web safe fallback font.
Set the font color and the font hover color.
Set the background color and adjust its opacity as required.
Use the value for "Padding TB" to adjust the tab's height.
If the text is left aligned, use the value for "Padding LR" to adjust its spacing from the edge.
Set the text align.
If the text runs to two or more lines, adjust the line height as required.
Set the border width, color and corner radius if required.
Set the box shadow color and radius if required.

This widget is included in the Full Width Addons widget pack.

EverWeb Widgets | Full Width