Serenity Freeway Pro Template
17th of March, 2015
There is only one master page in this template. It’s made up of:
An item HeaderWrapper that stretches the full width of the browser window. This item has a background image applied in the inspector palette. It’s being scaled to the size of the item by the .fbg style applied to it
HeaderWrapper contains a 90% wide centered item Header. This contains:
Logo1 and Logo2, which each contain some HTML text with a shadow applied. They also have a semi-transparent background that’s been applied using the Graphic Effects section in the Inspector palette
A navigation menu CSSMenu that is wrapped inside a 100% wide item CSSMenuWrapper. The contents are center aligned, as is the menu itself (the menu settings can be seen in the Actions palette [Cmd-Opt-A] when you have the menu selected)
Two empty body items Body1 and Body2. These are centered in the window and have a flexible width of 90%. The heights are variable so they will grow to fit their content.
The body items are each contained inside a BodyWrapper items that stretch the full width of the window. These have a gray color applied and are used to set the background color of the site’s content
A footer item Footer that has the same structure as the body items. The only difference is that the wrapper has a different color applied
SocialIcons contains a selection of social media icons ready to connect to connect your site with the major social networks
FooterText contains some standard copyright text that you should update for your needs
The page itself makes use of the Auto Clearfix Action, which is used to fix up some of the CSS styling on output. It shouldn’t need to be changed or removed
Aside from the master content, the home page contains:
A flexible image that has a 3 pixel border applied. This is center aligned (using the .CenterAlign style) and has a maximum width of 80%
An item Content1 that contains text
- Body2 contains a set of form items that can be used to receive messages from your visitors. These are all flexible items (using percentages) and have been styled using the .FormItem style
The remaining pages contain items and content that’s largely the same as the items described above.
Editing the template
To add new menu items to the navigation menu that appear on all the pages in the site, go to the Master page, double click the Menu item. Add the text you want to appear in the list of existing links. The position of the text in the list corresponds to the position of the menu item in the menu.
After adding menu items, preview the site in a browser to make sure it doesn’t break when reducing the width of the window. The example below shows what happens when two new menu items are added and the page is resized.
If it does, you should make a note of the width of the window that causes it to break, make a new breakpoint at that width (in the Media Types dialog from the Edit menu), and select it from the Show Icon at Breakpoint option in the Actions palette.
The form on the contact page is controlled by the Send Form Action. To make them work you’ll need to enter the email address you want completed forms to be delivered to in the Recipient Address field of the Actions palette (with the page selected).
The appearance of the form items can be changed by editing the .FormField style.
When replacing flexible images, remember that they need to be imported as pass-throughs. Regular graphic items can’t be made flexible.
To edit the links in the social icons in the footer, open the Edit menu and select URLs. In the dialog that appears you can double click an existing URL to replace it with your personal one.
To remove any unwanted icons, select the icon you want to remove by clicking on it, then go to the View menu and select Select Parent (or press [Cmd-Ctrl-Up]) and hit the Backspace key. The other icons will automatically fill the new space.
The fonts used in the site are Google Fonts Oswald and Open Sans. If you’d like to edit or add to these fonts, go to the Master page, open the HTML Markup dialog from the Page menu and select Before </head>. Change the Google fonts line (<link href=‘http://fonts.googleapis.com…) to the new value and update your font sets in the Font Sets dialog from the Edit menu. Find out more about using web fonts in our Google Web Fonts article.
The text throughout the site uses the same text styles. Headings are set using the h1—h3 tags and regular text uses the .PageContent style. There are other styles used, but these are the main ones. You can change any aspect of the styling by opening the Edit Styles dialog from the Edit menu, selecting the style and then making changes.
As an example, let’s make the h1 style (the dark grey header text you see at the top of text based items) blue. Open the Edit Styles dialog (you can also get to this with [Cmd-Ctrl-E]), select h1 from the list on the left and change the color from Black to Template Color 1 (you can choose any color, we’re just using that because it’s already in the list). Once you ok the dialog, all the h1s in the site will be set to that color. To change them back, just repeat the steps and select Black again.