Last Updated: June 02, 2015
Suffusion Theme Layout tutorial illustrates the different layout structure and at the same time check out the most commonly used website layouts.
Latest News: I have added a menu.
Suffusion Theme Layout Tutorials:
- Layout Sidebar Settings
Information: The layouts below and measurements are based on the following settings.
Remember, if you increase the percentage width to 85% it will always stay below the maximum width of 1200px even if the computer or laptop monitor resolution is set to 1280 x 800 or higher.
In the following code the wrapper is only 75% of the maximum of 1200px. When you view the website on a browser you will notice spaces on the left and right hand side.
min-width: 0px; <===== I changed this to 0px which is better for responsive layout.
Suffusion Theme Layout Settings
The following images shows you the most common layouts used today for websites. You will also see the px and percentage figure from the different layouts.
Note: Most of these settings with a px will need to change to a percentage for responsiveness.
Layout 1: Header 75% wrapper, left sidebar 150px, content 617px and right sidebar 150px.
Layout 2: Header 75%, 2 left sidebars 150px plus 150px and content 617px.
Layout 3: Header 75% wrapper and content 960px.
Layout 4: Header 75%, content 780px and 1 right sidebar 150px.
Layout 5: Header 75% wrapper, content 617px and 2 right sidebars 150px plus 150px.
Hint: Reset the theme layout if you are not happy with your settings
Click on the following URL to continue with the set up.
If you have any questions please let me know. I will be updating this post from time to time so keep coming back to check the latest.
More suffusion tutorials: