Column Width Options
| Graphene Theme version: | ≥ 1.6 |
This options group allows you to configure the widths of the individual columns in the Graphene theme layout, as well as the overall container width. It allows you to "break free" from the theme's default 960px container width.
Note that the theme utilises the 960 Grid System, and this feature is built on top of that grid system.
With the advent of this feature, it is highly not recommended to change the width of the columns manually using Custom CSS or a child theme. This is because there's a lot of other properties that need to be changed when the column width is modified, e.g. the value for the $content_width variable, thumbnail sizes, etc. Therefore, if you have previously modified the column width manually, it is best to undo that modification and use the options here instead.
Contents
Options List
Refrain from entering width values directly, and use the width sliders instead. This is because the sliders are designed to calculate the necessary column widths, taking into account the gutters around and in between columns. It also ensures that the total column widths (including the gutters) always add up to the total container width.
It is best to use whole numbers for each of the width values, as some browsers may not be able to display fractional widths properly.
- Container width
- This is the width of your entire page content. The width of this area is split, depending on your column mode, into separate columns.
- Widths may range anywhere from 800px to 1400px.
- Column width - (two-column mode)
- These widths are associated with your main content area, and one sidebar. They will adjust in size ratio as you slide the "Container Width" option above.
- You can always use the slider here to adjust the width of the content area and sidebar to a custom setting.
- Your total width will always be the setting you use in the "Container Width" option above.
- Column width - (three-column mode)
- These widths correspond to three column template layouts. There is the main content area, and there is a left and a right sidebar area. Not only can you adjust the width of the content area and the sidebar areas independently but you can also control the width of each sidebar area independently.
- The "recommended" settings will adjust automatically as you adjust the "Container Width" option. However, you can "fine-tune" the individual widths using the sliders here.
- Your total width will always be the setting you use in the "Container Width" option above.
Some considerations
Before you adjust the column widths, it is best to consider the effects the custom column widths might have on your website.
Readability
Text that spans across the screen will suffer from decreased readability as the width that the text spans increases. This is because it keeps getting progressively more difficult to pick up the next line after the end of the previous line as the width of the text block increases. This is the reason why newspapers and magazines split their text content into multiple, thin columns.
Screen resolutions
A lot of other computers don't share the same screen size that you are using. For example, about 15% of the global web users still use a monitor with a screen resolution of 1024x768 pixels (from W3C Global Web Stats). This means that setting a total container width of greater than about 1000 pixels may cause a portion of your site's visitors to have to scroll horizontally when viewing your site, which is a big no-no.
However, your site may not share the same statistics in relation to the visitor's screen resolution as that displayed by the global web users statistics. For example, your site may be primarily aimed at graphics designers, who tend to have very big monitors, so the baseline screen resolution might be much greater than 1024x768 pixels.
You can use web analytics tools like Google Analytics or the web server's statistics to figure out what the numbers are like for your site. In the end, you have to make a choice as to what is considered a reasonable number for your site. As a general rule, avoid upsetting anything more than 5% - 10% of your site's visitors.
Thumbnail sizes
Changing the column widths may also cause the sizes of image thumbnails that the theme uses to change. For example, the size of the slider's background image and the homepage pane's thumbnails may change after the column widths have been adjusted.
Therefore, it is recommended to rebuild the thumbnails for all the images everytime after the column widths have been adjusted. This can be achieved using the AJAX Thumbnail Rebuild plugin.
