Editing Texts

This chapter will teach you how to design the texts on your website.

• You can edit text directly in the preview. This practical new function is presented in this chapter.
• After that, you will learn about various options for designing your text in an appealing manner and for insertig dynamic elements. For example, you can change the type face with HTML and CSS, insert images and links, or insert personalized data using wildcards.

Editing Texts Directly in the Preview

The texts which the panelists see originate from various sources. Page names and texts of function modules, for example, are defined in the website editor on the respective page. Error messages and wildcards, however, are managed in dedicated menus.

The more familiar you are with EFS Panel, the fewer problems you will have finding the right place and editing the desired text directly at the source. However, you can edit most of the text directly in the preview:

• The following types of text can be edited: Wildcards, messages, texts from page modules and page titles. Texts which are not part of the CMS, such as news or forum posts, cannot be edited directly. They are managed in dedicated menus.
• Templates can be edited as well.
• The direct editing feature is only available for users logged into the admin area.
• As usual, the changes are made in the preview, not in the publicly accessible version of the page. You have to publish them explicitly.
• This feature is protected by the ACL right “panel_online_editing”. Write rights are required.

Working Directly in the Preview

To work directly in the preview, please proceed as follows:

1. In the preview drop-down list, select “Direct editing”. The preview is opened in a new window.
2. Open the page you wish to edit.
3. Switch to editing mode by clicking on the Edit button in the header section of the preview window.
   
   
   
   

4. Move your mouse pointer over the text elements. A green frame will indicate a text element that can be edited. Click on the desired text element.

5. The editing window will open.
   – The title will indicate the source of the text. In this case, the source is a page module.
   – Change the text as desired.

6. Save your changes. Check the result before publishing the changed version of the page via the website editor.

Formatting Text with HTML and CSS

The formatting of text elements – font, font size, color etc. – is defined by the page module’s template in combination with the panel’s CSS classes. This gives you efficient, centralized control over the layout properties of the entire panel. Details such as line breaks or formatting of individual words, on the other hand, can be directly defined with HTML and CSS in the text input fields.

The following tables give an overview of the most important HTML tags.

The most important HTML tags:

HTML tags for formatting text components:

HTML entities for German umlauts:

Uploading and Managing Images

Images and other media files for the website are managed with a panel-specific version of the EFS media library:

• The library is located in the menu Website → Asset library (until EFS 10.3: Media library).
• From EFS 10.4, the files are separated as follows:
  • Website assets: website-specific files.
  • Panel assets: files which can be used on all websites.
  • QuestBack assets: read-only assets provided by QuestBack, sorted by website themes.
• You can use not only images, but SVG graphics, flash and video formats as e.g. RealVideo or Quicktime. To access a detailed list of the permitted file types, open the Upload file dialog and click on the Question mark icon.
• The maximum file size is installation-specific. If you exceed the threshold value, a note will be displayed.

Inserting Links

Panel CMS contains different types of links.

• External links: Refer to a page outside the respective panel language version, usually an external domain. They are inserted in modules or templates using normal HTML tags. See the following section “1. External links”.
• Internal links: Refer to a page that is part of the respective panel language version. Internal links are also inserted using HTML tags; however, the so-called page identifier is inserted instead of the full URL. See the section “2. Internal links” for instructions.
• Short URLs: It is possible to display URLs shortened with a Smarty modifier, which are widely used on Twitter or in smartphone communication. Instructions can be found in section 3 “Optimized short URLs for Twitter”.

1. External Links

Links to other domains (e.g. http://www.domain.com) can be inserted into modules or templates in a “normal” way, i.e. with the HTML tag <a href=http://www.domain.com>Linkname</a>.

Example: Inserting a link to your company homepage

The contact address entered on the “About us” page contains the company homepage URL http://www.example.com. However, it is not a clickable link. You can create a clickable link by amending the <a href=“URL“>Linkname</a> tag.

1. Enter the following into the “www” line:
   WWW: <a href=http://www.example.com>http://www.example.com />
2. Confirm by clicking on Save.
3. Click on Preview working version. The following figure shows the results of your work. Test whether the new link functions properly. If you are satisfied, click on Publish page to apply the change to the publicly accessible panel page.

2. Internal links

You can create internal links – i.e. links that refer from a panel page to another page of the same language version – using wildcards. Wildcards are based on the page identifier. They always follow the same pattern:

{$links.pageidentifier}

Example

You want to insert a back link on the “About us” page that allows panelists to return to the “Home” page.

1. First, in the website editor, determine the page identifier of the “Home” page for the desired language version. This is also named “home”.
   
   
   
   
2. Assemble the wildcard: {$links.home}
3. To create a clickable link, insert the <a href=“URL”>Linkname</a> HTML tag in the desired place in the content module of the “About us” page. Replace the URL with the {$links.home} wildcard:
   <a href="{$links.home}">back to home</a>




4. Click on Save.
5. Check the result in the working version. You can then publish the page.

3. Optimized short URLs for Twitter

You can create and display short URLs optimized for Twitter directly in the website editor. This is realized with the help of the Smarty modifier:

{"URL"|shorturl}

It can be entered in all fields of the website editor marked with “Smarty code” as well as in all panel templates. The entered URL will then be converted into a shorter URL.

Example:

Original URL: {"http://www.questback.de/"|shorturl}
Shortened URL: http://i.gpefs.com/?i=3-DW5w

Instead of a static URL, you can also use Smarty wildcards to insert indiviual URLs for each panelist, for example.

Using Wildcards to Output Predefined Text Elements

You can use wildcards to insert text elements instead of entering them into a module or the template source code. In the standard panel, this option mainly allows you to define and update message texts and labels of frequent input fields such as “Name” or “E-mail” for the entire language version. In addition, you can export these wildcards and edit them externally.

Example

In the main template “main_default” of the standard panel, the copyright claim is integrated by the following source code:

{* START COPYRIGHT *}
<div id="gpCopyright">
{$content.label_footer_copyright} {$env.now|localize_date:'Y'} //
</div>
{* END COPYRIGHT *}

In the Wildcard menu, look for the wildcard entitled “label_footer_copyright”. In the standard panel this wildcard contains the text “QuestBack &copy;”. If you call up a panel page, {$content.label_footer_copyright} is filled with this content, and “Questback ©” is displayed. If you change the content of the wildcard, the copyright claim on the panel pages will also be changed.

1. Managing wildcards

The menu Website → Standard content → Wildcards contains an overview of all wildcards available. The table has the usual search function, the individual wildcards can be edited or deleted.

2. Creating a new wildcard

1. Click on the Create wildcard button in the menu Website → Standard content → Wildcards.
2. Enter a name for the wildcard. Permissible characters are a-z, A-Z, 0-9, _ and -. Special characters and blank spaces are not permitted.

3. Enter the desired content in the “Content” field.
   
   

   Information

   
   

4. You can add a description to facilitate orientation.

5. Confirm by clicking on Create.

3. Editing wildcards

1. In the menu Website → Standard content → Wildcards, click on the Edit button or the title of the wildcard you wish to change.
2. You can change the name, content and description. If the wildcard is already being used in a module or a template, make sure you also correct the name of the wildcard there.
3. Confirm by clicking on Save.
4. Inserting wildcards in modules or templates

If you wish to insert a wildcard created in the Wildcards menu in a module or a template, use the following syntax:

{$content.wildcard}

This allows you to insert these wildcards in any module or template.

5. Deleting wildcards

There are two options to choose from when deleting wildcards:

• If you want to delete only one wildcard, click on the Delete icon. The wildcard will be removed after a confirmation prompt.
• If you want to remove several wildcards at once, tick the respective checkboxes of these wildcards in the “Delete” column. Depending on the situation, you may also use the checkboxes “Mark all entries on this page” and “Mark all entries found” below the table. After that, confirm by clicking on Delete. This batch delete function is particularly helpful while building or making major changes to a website when a large number of wildcards may have to be replaced and removed.

Using Wildcards to Output Data Dynamically

The wildcards introduced in the previous chapter are used to output predefined text elements. However, EFS Panel also has wildcards that can be used to dynamically output personal data of panelists, for example. These wildcards are primarily used in Smarty templates. You can, however, also use them in page modules, to further personalize and localize your panel pages:

• Information that can be output includes
  • Localization information (e.g. date and time)
  • Panel information (e.g. panel name)
  • Participant data (only for logged-in panelists)
  • Master data (only for logged-in panelists)
• Which wildcards are available on a certain page depends on various criteria, such as the page modules used on the respective page or the login status of visitors. The following three tables contain wildcards that are available across the entire panel.
• Page module input fields that allow the use of Smarty wildcards are marked accordingly with “Smarty code”.
• If you have the necessary programming skills you can program conditions for wildcard output.

Example

In the standard, panelists are welcomed by their first name on the personal homepage entitled “My home”.

In the content module, which defines the upper part of the page, enter the following text:

Hello {$respondent.u_firstname|escape:'html'}

The {$respondent.u_firstname} wildcard is dynamically filled with the first name of the respective panelist.

The escape:'html' command is a security measure: It ensures that any code in the u_firstname field of the user data table is not executed. It is recommended to use this escape command on output for all data, or at least for all data entered by visitors and panelists. This way you can prevent unauthorized persons from manipulating page output by entering JavaScript code, for example, or from obtaining data of other panelists.

Syntax

The following syntax is mainly used when entering dynamic wildcards in a module or a template:

{$prefix.wildcard}

The prefix indicates the context from which the variable is taken. The “respondent” prefix in the example above is used for the data of currently logged-in panelists, for example, whereas “content” is used for the wildcards defined in the Wildcards menu.

Overview of wildcards available across the panel site

1. Wildcards available across the panel site

2. Wildcards available in the internal area of logged-in panelists

Editing Messages

EFS panel has its own error message system. In the standard panel, the messages are shown on the right side of the content area above the login.

The messages are configured by QuestBack Support when the panel is set up. You can make subsequent changes to the content of the messages. However, you currently have no access to the rules that determine whether and in which situation a message will be invoked. Accordingly, it is usually not advisable to create new messages. Only when configuring the RegEx checks for the registration form do you have the option of defining new messages with related rules on invoking them.

Message Types

In EFS Panel, there are different message types:

• Error messages: Messages of the “error” type consist of a header and the actual message text.
• Notifications: Messages of the “notification” type consist only of the message text.
• Notifications which relate to keying errors during registration are a special case.

Managing Messages

The Website → Panel websites → {Selected language version} → Messages menu allows you to view existing messages, create new messages and delete messages that are no longer used.

The Messages overview comprises all the messages created for the predefined language version and contains the following information:

• Identifier: Internal Wildcard, used to invoke the message from the “Error messages” template.
• Header: Message header as displayed to visitors. Is only used with the “Error” message type.
• Message text: The actual content of the message.
• Message type:
  • Error
  • Notification

If you want to view messages of another language version which you’re authorized to access in a given installation with several websites and/or language versions, simply change the settings in the upper section of the dialog. You can use the View function to change the number of table columns displayed as well as the number of rows per page.

The table can be browsed according to the content of messages.

You can use the “Actions“ icons to edit the messages:

• Change: Opens a form in which you can change the type, header and text of a message.
• Delete:
  • If you want to delete only one message, click on the Delete icon. The message will be deleted after a confirmation prompt.
  • If you want to remove several messages at once, tick the respective checkboxes of these messages in the “Delete” column. Depending on the situation, you may also use the checkboxes “Mark all entries on this page” and “Mark all entries found” below the table. After that, confirm by clicking on Delete. This batch delete function is particularly helpful while building or making major changes to a website when a large number of messages may have to be replaced and removed.