TheBand Freeway Pro Template
17th of March, 2015
There is one master page in this template. It’s made up of:
PageWrapper that contains all the items on each page. This has a repeating background image applied and stretches the full width of the window (width is set to 100%)
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 another 100% width item TopWrapper that has a semi-transparent background that’s been applied using the Graphic Effects section in the Inspector palette. This also contains
A logo item Logo that contains the name of the template. This can be changed for anything else or replaced with a graphic
A navigation menu Menu that is set to show the responsive icon at the Tablet: 768 breakpoint
A 90% wide centered item Header. This doesn’t contain any content in any of the pages, but is being used to grow the HeaderWrapper item so that its background image can be seen, so don’t remove it without giving HeaderWrapper a height
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. They have no background color or image applied so the background image on PageWrapper can be seen
A footer item Footer that has the same structure as the body items (including a wrapper FooterWrapper). The only difference is that the wrapper has a background color applied
SocialIcons contains a selection of social media icons ready to connect to connect your site with the major social networks
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 an unequal two column layout in Body1. This is made up of:
ContentWrapper1 is 30% wide and contains two rows of items Content1 and Content2
Content3 which is 66% wide (61% width + 5% left margin) and contains a video item (this can also be an image, or just be removed)
Content4 stretches the full width of Body2
Content5 through Content9 are five columns at 17% wide, the first four have a right margin of 1.25% to create a bit of space between them
Body1 has a negative top margin which causes the content to overlap the header slightly. This is also the case on the other pages.
All the content items are set to run in a single column at the Tablet: 768 breakpoint.
- Content2 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.
When replacing flexible images, remember that they need to be imported as pass-throughs. Regular graphic items can’t be made flexible.
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.
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 Lato and Righteous. 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 h3 style (the black subheading text you see at the top of text based items) a mid gray. Open the Edit Styles dialog (you can also get to this with [Cmd-Ctrl-E]), select h3 from the list on the left and change the color from Black to Mid Gray (you can choose any color, we’re just using that because it’s already in the list). Once you ok the dialog, all the h3s in the site will be set to that color. To change them back, just repeat the steps and select Black again.