Del

Site Setup with a Web Browser

To get started, visit your website and log into it. Here´s how:

Login Hotspot
There´s a "hot spot" in the lower left corner of all your pages. It is invisible, but your cursor changes to a pointer when you hover over it. Clicking there will open a login dialog.

Login Dialog
Log in with the same User ID and password you have in FCWS. When logged in, you will arrive back on the very same page where you clicked the hotspot, but in authenticated mode.

The Preferences Panel
There will be a big handle on the right edge of your browser window. Click it to open the Preferences Panel for your site.

The Preferences Panel [2]
If you are the owner of the site, it will display three panels where you can configure every aspect of how the site will work and what it will look like [ıf you are not the owner, you will instead get a list of any Project Containers you are subscribed to].

Navigate the Preferences Panel
Navigate between the panels with the arrow buttons on the upper right.



Panel buttons:
        A: Save changes
        B: Refresh the page
        C: Upload images
        D: Go to Previous Panel
        E: Go to Next Panel

Navigator Buttons



PANEL 1: WEBSITE PROPERTIES
Until you name the site, all pages will be titled "My Name Here", which isn´t very useful.

Fill in the name of your organization in the very first field on the default panel. The other fields there are useful, but not essential; they can be filled in at any time.

Properties
Clicking an empty field will fill it with example data showing what a field is for - here´s the list.

        A: Name of the website owner
        B: Street Address
        C: Mail Code
        D: City
        E: Country
        F: Phone
        G: E-mail
        H: Fax
        I: Website Signature

... Fields A through I are used by the Print Layout as well as by various Widgets. They are also indexable by Google, Facebook, etc.


Select a Website Mode [J+K]
Homepage makes your website´s Start Page into one single Homepage. This is a document that can be filled with rich text, images and slideshows. It has three different options:

  • Default: as a normal web page.
  • Login: visitors can log in to a personal Homepage that displays any Project Containers that they are subscribed to.
  • Splash Screen: The Homepage document becomes an introduction to the Portal Container - with a forwarding button. The Portal container will work like a blog.
Blog will skip the Homepage document entirely: the Portal container becomes the Homepage, and will behave like a blog. It has two options: normal and condensed. Condensed means the blog will only display the first paragraph of each posting, plus a "more"-link.

Tiles is a media layout: it will display the Portal container in a grid, with previews of what´s inside each tile. It is similar to the Blog Mode exept that it will display everything - containers, movies, images, text files, etc. [Blog Mode only displays blog posts].

Configuration options
  • L: Default Language - checking this box will give visitors all hard-coded terms in the language of their own operating system. Leaving it unchecked will use terms from an editable terms file instead [shipped in English].
  • M: Published - will add timestamps to all pages. Check the "12" symbol to use American time [AM/PM].
  • N: Breadcrumbs - add breadcrumbs to all pages
  • O: Author - adds the author´s name to all pages
  • P: Mobile interface - checking this box will cause a Mobile UI Switch to appear on the website for visitors that use a tablet or phone.
  • Q: Metadata - activates the Robots Fields for Search Engines: essential for SEO purposes. If these fields are visible to you, they are visible to spiders. Else, the site sends a "noindex" request. One of these also activates Open Graph [Facebook integration]. If you use it, add your Facebook User ID too; it will allow you to moderate any FB commenting functions you choose to make use of.
Note: to the right of the Metadata checkbox, there´s a "Place of Interest" button that opens a window where you can write HTML code directly into the page header and/or body of all pages. This is useful for inserting custom metatags, statistics tags, etc. globally.



PANEL 2: SKINDESIGNER
Defines the visual appearance of your site. By switching SkinDesigner modes you will get live previews on the site.

Note that features that exists on the server will display previews without saving; features that you create [for example. by uploading a new logo] will not display until you save and refresh.

Designer 1
• A: To move the logo around, click on it
• B: To turn the Top Menu on and off, click it
• C: To move the sidebar around, click on it
• D: Select or upload a logo
• E: Enable softer page transitions
• F: Select a Skin or a SkinDesigner Mode

SkinDesigner Modes [F-G]:
• Choose a built-in FirstMagic Skin
• Write a stylesheet manually
• Create a SkinDesigner Skin by point-and-click

The [F] Place of Interest icon to the right of the SkinDesigner Mode selector [F] will open the stylesheet in use for editing directly. If you save it, be aware that it will overwrite any existing custom stylesheet you have previously installed. In other words, do NOT use this function if you have a custom Skin - the original will be deleted.

The [G] Place of Interest Icon opens a CSS box where you can modify a built-in Skin directly without exporting it.

When you save a stylesheet, it is immediately active if the SkinDesigner Mode is CSS. If it is set to a built-in FirstMagic Skin or a SkinDesigner Preset it is still saved, but will not become active until you move the SkinDesigner Mode selector to "CSS", save and refresh.

When the SkinDesigner Mode [F] is set to CSS, you are editing the live stylesheet your site is using.

You do not need to host the stylesheet on your site - the CSS mode has a text field where one can write the path to any stylesheet anywhere on the internet. Note that the Place Of Interest button will disappear on stylesheets hosted elsewhere.

SkinDesigner Presets
SkinDesigner Presets 1, 2 and 3

• A: Select a title font [H1, H2, H3 and Menu]

• B: Select title sizes, styles and colors

• C+D: Select a content font, styles and colors. The left-hand color box is for plain text, the right one for links. Styling buttons [ B i  K ] only applies to links, as styling inline content is done in your text editor.

Note: Clicking in a color box will open a color wheel - click to choose a color, or write a HEX value directly into the box. If you write, do not use the #hash tag.

  • E: Border style
  • F: rounded borders / shadowed borders
  • G: SkinDesigner Preset - the web page layout style.
  • H: Page background color
  • I: Top Menu color
  • J: Sidebar background
  • K: Content background
  • L: Gradient options for the page background
  • M: Gradient options for the Top Menu
  • N: Gradient options for the content area
  • O: Gradient options for the Sidebar area
... As with font colors, the background color areas will bring up a color wheel if clicked. Select colors from it, or write HEX directly into the boxes [without the #hash tag].

Preset 4
SkinDesigner Preset 4

• A: click to select a background image from the Library

• B: click to select a background style [bright, dark, transparent]



PANEL 3: LICENSE THE SITE
If you subscribe to a Hosted Service the site is already licensed, but if you have installed FirstMagic yourself you will need a FirstMagic license to use it beyond the 30-day demo limit.

See the Where to purchase FirstMagic products chapter in this guide to locate your nearest FirstMagic Reseller, or visit this page for a list: http://www.webtrait.com/sales

To get to the License fields, click the E button [right arrow] - to navigate to the third panel.

There are two licensing fields: the upper is for FirstMagic, the lower for FirstMagic Pro. Sites will work without a Pro code but not without the basic license. Should the demo time out before you have time to purchase a license, the Activation Code will reactivate it and remove the "Demo" badge.