Show/Hide Toolbars

Navigation: Using ASPRunnerPro > Visual Editor

ASPrunnerPro32x32     ASPRunnerPro manual

About Visual Editor

Scroll Prev Next More


Visual Visual Editor built-in in ASPRunnerPro is an editor control that allows the user to edit HTML contents in a more user friendly way. The editor control is very flexible and enables the advanced user to change the appearance of the pages in design or html mode.


Adding custom pages to your application

You can add a new page to your application or import existing one. You can import the whole folder with HTML, images, CSS files and edit/preview them in Visual Editor.


Locking of custom pages

After you modified a page in Visual Editor, you can lock it from further automatic modifications. To lock a page, right click the page name and select Lock page. The lock icon will appear before the name of locked page. Note that you can modify locked pages manually. To unlock the page, right click the page name and select Unlock page.


Also you can enable Lock pages modified in Visual Editor automatically option in Project -> Settings. After that all pages that you manually modify will be locked from further automatic modifications.


Editing field names

Now you can edit field names directly Page Designer. But if multiple project languages are selected on Miscellaneous page, you will not be able to do that. In this case double-click the field name and edit it in the opened Label Editor.

Setting landing page

You can set any page as landing page - the page to open when the user enters the site (if login is disabled or login and guest user login are enabled) or just after login. To do that right click the page name and select Set as Landing page.

The Visual Editor page allows you to modify the visual appearance of your pages and instantly preview the results.
You can see two sections on that page:

Tables list on the left. Moving across tables and their related pages, you can select a page to view/modify. To filter pages by the page name, use the text field above the events tree.

Editor on the right where you can alter certain aspects of your page, such as the project theme, fonts size and custom CSS,  and preview how the selected page will look like in a browser.

This page has custom settings is an option that allows you to select the appearance for pages that differ from the project ones.


Definition of layout, style, color scheme and theme


A layout is a page template (for an Add page, Edit page etc). Each template defines corresponding page structure and stored in the .ly file in the folder C:\Program Files\ASPRunnerPro10.1\templates\layouts.

You can choose the layouts for all pages by selecting the project scheme, for all List/Add/Edit/etc. pages by selecting layout from the Layouts list and for the currently selected page by enabling This page has custom settings option and then selecting layout from the Layouts list.


Style is a set of parameters that includes font, font size, margins, borders, alignment and more. Styles are stored as the .style files in the folder C:\Program Files\ASPRunnerPro10.1\styles.

Color schemes

The color scheme describes the color palette of layout elements. Color schemes are stored as the .color files in the folder C:\Program Files\ASPRunnerPro10.1\styles\colors.


Themes combine the properties of the Styles and the Color schemes.