Modify Styles of a Pop-Up Menu

From Wiki openElement
Jump to: navigation, search

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).

TutorielMenupopup1.png

Contents

Menu Positioning

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.

TutorielMenupopup3.png

Result:
TutorielMenupopup2.png

Editing Styles

Selecting Style Zones

Select the element by clicking on it (the pop-up menu is in the hidden elements bar).
TutorielMenupopup4.png
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.
TutorielMenupopup5.png

The different style zones of the Pop-Up Menu element are describe in more detail in this article.

Example 1

Select the style zone "Frames of the Pop-Up Menu"
This style zone allows you to edit the background color and the border
TutorielMenupopup6.png

Result:
TutorielMenupopup7.png

Example 1, continued
Select the style zone "Rows of the Pop-Up Menu"
Change the background color
TutorielMenupopup8.png

Result:
TutorielMenupopup9.png

Example 2: Creating a Menu from an Image

Note: this example requires a basic knowledge of creating and editing images.

The Base Image:

TutorielMenupopup10.png
This image must be cut up according to the following model:
TutorielMenupopup11.png
These are the resulting images (these images are framed for better legibility on this page):

  • First Row: TutorielMenupopup12.png
  • Rows: TutorielMenupopup13.png
  • Separator: TutorielMenupopup14.png
  • Last Row:TutorielMenupopup15.png



Creating the Menu

Initial State:
TutorielMenupopup16.png

Step 1
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).
TutorielMenupopup17.png
TutorielMenupopup18.png

Step 2
On the menu's rows, place the menu's background image, width equal to the previous one, and set all margins to 0px.
TutorielMenupopup19.png

Step 3
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.
TutorielMenupopup20.png

Step 4
Repeat the previous step, but for the "Last Row"
TutorielMenupopup21.png

Step 5
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.
TutorielMenupopup22.png

Step 6
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.
TutorielMenupopup23.png

Step 7
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.
TutorielMenupopup24.png


Result:
TutorielMenupopup25.png

Personal tools
Namespaces

Variants
Views
Actions
openElement
Community
Toolbox