Text Style

Step 2 - Template >

Text Style

Previous pageReturn to chapter overviewNext page

The commands in this window can be used to define the styles available for the various texts in the website.

A style can be generically defined as a series of indications for formatting text and graphics that are applied to an element to change its appearance. By applying a style, you can associate several different formats in a single operation.

First of all, you have to choose the Page Item you want to define a style for. Select it from the drop-down menu or click on the preview.

The various page items you can apply a style to are:

Page Title: this is the title in the website pages. It is taken from the name given to the page when the website Map is created in the Sitemap Creation window, or, if otherwise specified, from the Extended Page Title in the Page Properties window.

Page Path: this is the text that appears immediately below the page title, and it shows the path to this page in the website ("breadcrumb navigation"). The Program adds the path automatically.

Headings: you can define the paragraph and subparagraph titles on a Page as Headings. It is possible to define up to 6 Heading levels: in the Pro edition, by activating the Set H1..H6 tag for the Template Headings option available in the SEO | Tags window, when you choose a Heading Style the corresponding <h1>..<h6> tag is automatically applied to the text.

Page Text: this is the text of the single paragraphs that are added using the Text Object. The style indicated here is applied by default to text entered using the Text Object editor. When a style is changed, all the texts to which it has been applied are automatically updated. You can use the editor's commands to make further changes and customizations, which can always be deleted with the Reset Format button.

The page text style is also applied to text that is added automatically by the Program, such as pages in the Members' Area, the Blog, the built-in search engine and the website Map.

The font that is defined for this item is used as the Default Font for the website's texts and appears in the drop-down menu for selecting the Font Type.

Link: these options refer to hypertext links created with the Text Object. A link can change its appearance according to its state: active, on mouseover, already visited. Visually distinguishing an active link from an already visited one helps the visitor to navigate the website, reminding him which parts he has already seen.

Date: namely the dates that can be reported in different places on the website, for example, in relation to e-commerce, Blog, Comments and Rating, Contact Form and Portfolio Objects, as well as the Online Control Panel.

Field / Button: these are the fields and buttons in the forms that are created with the Contact Form Object, the Search Object or the e-commerce shopping cart, the login/logout fields of the Members' Area, etc. When you create a new Contact Form Object the fields and buttons in it take on the style defined here by default. You can subsequently change the style of a particular form using the options in the Contact Form Object | Style section.

Scroll-to-top Button: this is the back to top button, shown at the bottom of the page, which takes the visitor back to the top of the page, without having to scroll.

If you select Page Item, you can work on the following options in the Style section to change the style:

Visible: you can decide whether the selected page item is to be visible or not. This option is not available for the Headings, for the Page Text or the various states of links, form fields and buttons which cannot be invisible. Making an item invisible does not mean removing it from the page's code. It simply means that the item will not be visible when the page is published. You may want to make the Page Title  invisible, for example, because you prefer to add it as a picture rather than text, but this does not mean the <title> tag will be deleted from the HTML code.
Element: you can select which Heading level (Heading 1 - Heading 6) or which kind of Link (Active Link / Mouseover Link / Visited Link) you want to define for the style.
Background Color / Text Color: you can choose the color for the background and the text of the selected page item. You cannot choose a background color for the Page Text because this depends on the chosen template (see Template selection) and/or the Object Style that the Text Object has. Likewise, you cannot define the background color of the Scroll-to-top Button because this depends on the chosen style.
Font Type: specifies the font, style and size to use for the text. The drop-down menu includes the list of safe fonts, which are those fonts that are found on every device and work with all browsers, and all the Google fonts and web fonts that have been added in the Web Font window (which is opened by the Other font types command).
Alignment: you can decide how to align the page item: it can be Left, Center or Right. This option is not available for the fields and buttons, or for various link states because hypertext link alignment is defined when the Text Object is created, regardless of the style.
Text Style: this option is only available for the links in their various states (visited, etc) and it can be Normal or Underlined.
Pointer: this option is only available for the Active Link, and it is automatically assumed by the other two link states. You can specify the style on mouseover. Click on to select a .CUR, .ICO or .ANI file to use.
Date Format - Extended: available only for Date, they define respectively the numeric only format and the extended format according to which it should be reported. In both cases you can choose the format from those proposed or type it in directly. A sample text helps to verify that the format set corresponds to the expected result.
Border Color: you can specify the color of the borders that the Page Title, Page Path, Field and Button in forms and the Footer Menu can have.
Thickness: you can specify the thickness of the border of the Field and Button in the forms, as a whole or singularly.
Rounded Corners: you can indicate how rounded the corners of the Field and Button in the forms are to be, and you can specify the value for each corner separately.
Margin: you can set the value (in pixels) of the text margins in the Field and Button of the forms. In this case, instead of <S2_STYLES_PAGEITEM_HEADINGS%>, the upper and lower margins are set.
Drop Shadow: you can apply a shadow inside the Field, specifying its color, position, diffusion and size.
Horizontal Margin: you can specify the horizontal margin for the Page Title, Page Path and Footer Menu.
Style: you can choose a graphic style for the back-to-top button. A mouseover effect is applied automatically to this button, to help users notice it.