How to customize the width of your site
All layouts in Morph use the (Yahoo) YUI CSS grid framework, which has 4 default layouts (doc widths): 750px, 950px, 974px and 100%. These are easily set using Configurator (General tab). However, if you want to set you own custom site width, this tutorial will teach you how.
Before we start, download the YUI CSS cheat sheet here.
The widths in Morph are based on em's and not pixels so you start with calculating the width you need to apply and then you can add more specific (important) css, to override the width.
Step 1: Calculate the width
To calculate a width in em's you just divide the width you want by 13px (which is the base font size), as that is how em's work. This means that for 900px you set an em width of: 69.2308em (900 divided by 13)
Step 2: Add the css
Each themelet has a suffix, which is an ID with the name of the themelet appended to the body of the code. You can use this to target the layout and modify the width.
Each YUI layout has a specific class set in various places in the code. This class depends on the layout you have set. For example, if you have Configurator set to use the width of 974px, in the code you will see a class of "doc4" which is the default YUI class used for this page width. This is the class you want to override and this is the css that is setting the width when set to this layout:
Notice that this width is the equivalent of 974/13, based on the same calculation to get to 900px.
Now you can add a more specific selector (using the themelet suffix) into the custom.css file:
The above is an example of using #vanilla as the prefix, but you change this depending on the themelet that is active. If you add this CSS to the custom.css, you may not even need the themelet prefix.
You can not just change this information where the doc4 css is referenced because it is in Morph's core. If you change css in there, you won't be able to upgrade without loosing your changes.
In summary, all you need to do is adding the above css to your custom.css file and make sure the width in Configurator (general tab) is set to 974px.
Do you think this help article can be improved?
Our goal is to make Morph's documentation as easy and simple to use as possible and if you feel there is anything we can do to improve, whether updates / refinements to the content or how everything is structured, please let us know! We really do value all of the feedback we get and will do everything possible to ensure that the documentation is relevant and useful to you getting up and running with Morph!