' _PSO - Template - Billboard - Style Guide

Style Guide

Please also see the Providing Assets page for more information.

Banner Images

This template makes use of large, high resolution banner images as a major focal point. The menu is almost secondary to the image upon page load. Take a look through the site and see which types of images work best with the white navigation before scroll. You are responsible for providing your own images for this design, or you can use any of the images on this example site, which are copyright free for use on commercial sites.

You may upload any size landscape-oriented (horizontal) banner image you wish, but for best results it should be at least 2000px wide. In desktop view, on internal pages, the image will take up 55% the page height regardless of window size, and on the home page, it will take up 85% (or up to 780px, whichever comes first) of the height. On all pages, the banner image will be postioned dead center of the banner area. This means as the window size gets larger, the top and bottom of the image will be cropped as the image fills the width of the window. Contrariwise, as the window gets smaller, more of the top and bottom of the banner image will be displayed. Play with the window size of this site to see how the images change, and plan accordingly. It is best if you are not trying to get a particular part of an image to display at any particular time, as this cannot be adjusted.

You may designate a default banner image that will appear on every page unless you upload a new one via the admin panel, or you may choose to have no image display unless you have uploaded one for that page. Here is an example of that type of page: Privacy Policy.

Fonts

Body text looks like this (font: Quattrocento Sans) by default, but can be bolded, italicized, colorized, and even be made larger or smaller using the tools in the site editor. Aditionally, the headings below (font: Reem Kufi) are already set up and accessible for use via the site editor (click here for more information about the Site Editor). These can also be manipulated in similar ways as the body font in most cases.

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6