Show/Hide Toolbars

Navigation: Using PHPRunner > Page Designer

PHPrunner32x32     PHPRunner manual


Page layout and grid type

Scroll Prev Next More

Page layout

You can select two types of page layout for the regular pages: top menu and left bar. Click change on the List page properties to select the page layout:

pd_page_layout

 

Layout options

Each layout has its own set of options.

 

Top menu layout options:

 

Menu width. You can choose the width of the top menu bar. Full - full window width. Standard - about 2/3 of a page width at its maximum.

 

Body width. Body width sets how the page content uses the browser window space. Full - the page always stretches to the entire browser width. Compact - the content uses as little space as possible. Standard - the content stretches to about 2/3 of a page.

 

Body align. This option lets you choose whether the page body aligns to the left or the center.

 

Fixed top menu. With this checkbox on, the top menu stays in place as you scroll the page.

 

An example of the top menu page layout. Full menu, standard body width, left alignment:

pd_page_layout_top_menu_ex

 

Left bar layout options:

 

Body width. Body width sets how the page content uses the browser window space. Full - the page always stretches to the entire browser width. Compact - the content uses as little space as possible. Standard - the content stretches to about 2/3 of a page.

 

Left bar width. Specify the width of the left menu bar. Clear the box to set the default value - 300px. You can enter any units available in CSS, for example, 400px or 20%.

 

Fixed top bar. With this checkbox on, the top bar stays in place as you scroll the page.

 

Fixed side bar. With this checkbox on, the side bar stays in place as you scroll the page.

 

Collapsible left bar. This option adds a button to collapse/expand the left bar.

 

Here is how the collapsible left bar works:

pd_page_layout_left_bar_coll_ex

 

An example of the left bar layout. Compact body width, left bar width - 150 px, fixed top/side bar, collapsible left bar:

pd_page_layout_left_bar_ex

 

Grid type

Page Designer can change the appearance of the grid type.

 

You can choose one of three grid types: horizontal, vertical or columns in Simple or Advanced grid mode. In the Advanced grid mode, you can easily change the properties of labels, cells, and columns when you need to set specific formatting. If you don't change anything in advanced mode, the generated pages look the same as in the simple mode.

 

To switch to Advanced grid mode, press the button above the grid:

pd_layout_advanced_grid

 

To switch back to a Simple grid type, click Change under the page properties on the right side, and choose one of the simple grid types.

page_layout_simple_grid

 

Example of a horizontal grid:

pd_page_layout_hor_grid_ex

 

Example of a vertical grid:

pd_page_layout_vert_grid_ex

 

Example of a columns grid with three columns:

pd_page_layout_columns_ex