Retro’d Freeway Pro Template
17th of March, 2015
The master page in this template consist of:
A fixed header item header that is set to always be positioned at the top of the page in a fixed/pinned position, regardless of page scrolling. It stretches the full width of the page and has a faint drop shadow on it. It should always be the last item on the page (this can be done using Bring to Front [Cmd-+] from the Item menu) so that it appears on top of other items on the page when scrolling. It contains:
A navigation menu nav that has been set to get smaller at the Navigation: 865 breakpoint
A logo item title that contains the name of the template. The text can be changed to anything else or be replaced with a graphic
A feature item hero that contains the site title and a row of four images. As the window gets narrower the images change to two rows of two, and then four rows of one. The item is centered in the window with a maximum width of 940 pixels.
hero-wrap, the parent of hero, stretches the full width of the browser window is just used to create the band of color behind the hero item
The rest of the site is split into five items, artwork, photography, movies, projects, and contact that each present their content slightly differently. They are very similar to the hero and hero-wrap items in construction
The contact item contains an item form that has two further items form-left and form-right. The form items are displayed in two columns at larger screen sizes, then one column on smaller screens
A footer item footer that can be used for any copyright information you need
This is a single page template so the home page is no different to the master.
Editing the template
To add new menu items to the navigation menu go to the Master page, double click the Menu item and 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.
When replacing flexible images, remember that they need to be imported as pass-throughs. Regular graphic items can’t be made flexible.
The Macbook image has a negative left margin [Cmd-Opt-.] to get it to overlap the iMac image. If you want to replace these images, the easiest thing to do may be to replace them with a single imag.
The form on the Contact page is controlled by the Send Form Action. To make it 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 fonts used in the site are Google Fonts Montserrat. 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 .body style. Text is white by default — when used with lighter background colors it can be made darker by applying the .darken 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 h2 style tan. Open the Edit Styles dialog (you can also get to this with [Cmd-Ctrl-E]), select h2 from the list on the left and change the color from White to Tan (you can choose any color, we’re just using that because it’s already in the list). Once you ok the dialog, all the h2s in the site will be set to that color. To change them back, just repeat the steps and select White again.