Modify Styles of a Pop-Up Menu
The Pop-Up Menu element is a good example of an element that can be difficult to customize graphically. Knowing a little CSS can come in handy (or lots of trial and error) to fully customize this element.
Users can also download and apply style presets, available in the Styles Menu.
This tutorial explains how to create or modify a custom preset. It cannot be exhaustive because there are way too many possibilities, but it should allow users to properly customize this versatile element.
The following example was done with the Metal01 preset:
- Go to the BaseLayer page
- Add a Pop-Up Menu on the page, then configure it (do not choose a style preset).
The menu's position can be changed using the element's properties on the right.
In the following example, we want the menu to open to the left. To do this, we must edit the position and the X Offset.
- X Offset: -200 (or -200 pixels) because the button is 200px wide.
- Position: Left
These 2 properties allow the menu to open 200 px to the left of the Left position setting.
Similarly, to have the menu open above a button, specify a position (Left) and a negative Y (vertical) Offset.
Selecting Style Zones
Select the element by clicking on it (the pop-up menu is in the hidden elements bar).
To change the look of a pop-up menu, users must edit one or more of the element's "style zones."
A style zone is a visible part of the element to which users can directly make visual changes (background color, border type, height, width, etc.).
To select a style zone: Go to the Main Menu above the editing pane, under the "Element Style Zone" tab, in the "Current Element Zone" section.
The different style zones of the Pop-Up Menu element are describe in more detail in this article.
Select the style zone "Frames of the Pop-Up Menu"
This style zone allows you to edit the background color and the border
Example 1, continued
Select the style zone "Rows of the Pop-Up Menu"
Change the background color
Example 2: Creating a Menu from an Image
Note: this example requires a basic knowledge of creating and editing images.
The Base Image:
Creating the Menu
Customize the border and the width of the menu's frame. The width must be equal to that of your background. Set the background color to transparent (2nd image).
On the menu's rows, place the menu's background image, width equal to the previous one, and set all margins to 0px.
On the first row, set the height and the width of the style zone to that of the "First Row" image, then add the image as a background image.
Repeat the previous step, but for the "Last Row"
For the "Separators", use the previous step's instructions. Additionally, set the background color to "transparent" and the margins to 0px.
Note, separators are added via the menu's configuration.
To space out the menu, add margins to the content of the rows.
Users can also set the alignment (in Text Styles) to Center in order to center the text.
To position the arrow, you need to have set a left margin to the content of the rows (see previous step)
Then, on the arrow's style zone, add a margin to the right.
The arrow image can be changed by changing the background image.