Installing popBox

Upon uploading your popBox Stack, open up your “Stack Elements” option. You should be able to see two new Stacks included:

popBox Tutorial #1


There are two Stacks involved in popBox:

popBox popBox (Primary Stack)

This is the Outer Stack for popBox. When you apply it onto your RapidWeaver development page, you should be able to see two different areas:

popBox Tutorial #2

The top portion of the Stack is where you trigger the dialog box. The bottom portion is where you will place the Inner Stack of popBox. The Inner Stack is actually the dialog box that will display when you click on the Targeted Stack.


popBoxInner58 popBox (Inner Stack)

This is the Inner Stack for popBox. The Inner Stack comes with the option to place content within three sections: The Header, the Main Content, and the Footer:

popBox Tutorial #3


Apply content within both the Outer & Inner Stacks of popBox. Remember: The top portion will be the vehicle to trigger the dialog box, while the bottom portion is the dialog box itself.

popBox Tutorial #4

When you test your page out, you will initially see the targeted Stack in display:

popBox Tutorial #5

Click on it to view your dialog box.

popBox Tutorial #6


Customization

The popBox Stack offers a few options to maximize design potential and individuality:

  • Header Color: Adjust the background color of the popBox header section.
  • Header Border Color: Adjust the border color of the popBox header section.
  • Content Color: Adjust the background color of the popBox content section.
  • Content Border Color: Adjust the border color of the popBox content section.
  • Footer Color: Adjust the background color of the popBox footer section.
  • Footer Border Color: Adjust the border color of the popBox footer section.
  • Close Button Color: Adjust the color of the close button.
  • Mobile Header Color: On mobile devices, adjust the color of the header section.