The layout for your site in the privateer consists of how the site as a whole is displayed in the users browser.
Currently, you can use the built in options to have a static width layout or a fluid layout with optional minimum and maximum sizes.
For this tutorial, we will start with the default PWS Shades of Grey layout:
As seen in the
Privateer > General Display > Page Framing menu, this layout is using a fluid layout that takes up 99% of the available width inside of the web browser...splitting any remaining pixels to either side.
To make this clearer, I will change the color of the area outside of the site to black. Since this quick set uses the Body Style configuration option to set the background to white, I will need to make two changes:
1. Change the body style to have a black background.- Go to the Privateer > General Display > Text and Links > Body Style option
- Edit background: #ffffff; to be background: #000000;
2. Change the Layout Container Style option to have a white background- Go to the Privateer > General Display > Page Framing > Layout Container Style option
- Add a background: #ffffff; line to this option
When done, the black area outside of the site will be fairly obvious:
Creating a static width siteIf you would rather have a static width site ( perhaps for graphical considerations ), you can do so by setting the Layout Width and Type option in the page framing menu to a pixel value.
- Go to the Privateer > General Display > Page Framing option
- Enter the width as a pixel value into the Layout Width and Type option. We will use 770px.
For our purposes, I'll change the site to use a static 770 pixel width, which leaves 30 pixels for browser edges and scroll bars on an 800 x 600 display.
Once saved, reloading the site will show it as follows:
As you can see, the site will now show in the middle of the browser with a width of 770 pixels and the remaining area is filled in with black and split on either side of the site.
Fluid WidthsIf you would prefer to have a fluid width, you can set a percentage value for the Layout Width and Type option.
- Go to the Privateer > General Display > Page Framing > Layout Width and Type option
- Set the value to 90%
Once set and saved, the site will now look like the following on a 1024x768 browser window:
If you change the browser size to 800 x 600, the site will look like the following:
Of course, a fluid width can be a bit problematic as it can give odd looks at extremely small and large displays. For example, if someone has the site open in a window that is 460 pixels wide the site would look like the following:
To fix this, you can set minimum and maximum widths for fluid width layouts by using the following two options, which are also in the page framing menu:
- Layout Min Width
- Layout Max Width
If we want the smallest width to be 770 pixels and the largest to be 994 pixels, then we can set these two values appropriately:
Saving these settings and then reloading the site in the small 460 pixel width display, we now get the following:
The site now looks right ( if cramped ) and has a scroll bar at the bottom to use when viewing the rest of the site.
The Maximum width is handy when you have a site that would look horribly sparse ( or odd ) at very wide displays such as 2048.
Extra paddingFor some sites, you might want to have a bit of space between your content and the black area that we set up outside of the content.
To do this, you use the Layout Container Padding Left / Right option within the Page Framing Menu.
- Go to the Privateer > General Display > Page Framing > Layout Container Padding Left / Right option
This adds space to the left and right of your content within the actual layout container.
If we want 20 pixels of area to the left and right of our content, we would set this to 20 and save our changes. The result can be seen below:
As you can see, the content of the site is still within the white area, but there is now a 20 pixel area between the content and the black area on either side. This padding can be used on both fluid and fixed widths.
Final WordsYou should now be able to easily tweak your sites to have static and/or fixed widths.
If you have any questions about this tutorial, please feel free to ask!
