Jul 312013
 

Last Updated: October 05, 2014

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 fixed some broken links below.

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.

#wrapper {
max-width: 1200px;
min-width: 600px;
width: 75%;
}

We are going to look at the most common website layouts you will find on the internet. You will also see the px and percentage figure from the different layouts. See images below:

 Layout 1: Header 75% wrapper, left sidebar 150px, content 617px and right sidebar 150px.

Suffusion layouts-1left-1right-sidebar

Layout 2: Header 75%, 2 left sidebars 150px plus 150px and content 617px.

Suffusion layouts-2left-sidebar

Layout 3: Header 75% wrapper and content 960px.

Suffusion layouts-no-sidebar

Layout 4: Header 75%, content 780px and 1 right sidebar 150px.

Suffusion layouts-1right-sidebar

Layout 5:  Header 75% wrapper, content 617px and 2 right sidebars 150px plus 150px.

Suffusion layouts-2right-sidebar

Step 1: Login into your admin account and navigate to Appearance >> Suffusion Options >> Layouts >> Default Sidebar Layout. See image below:

suffusion-default-sidebar-layout-settings

Step 2: Set up your sidebars and the position. You have 3 options; 0 sidebars, 1 or 2 sidebars and set the position for each sidebar. See image below:

default-settings-sidebar-suffusion

Step 3: Widths page layout. Here you will choose between default theme sizes and margin or custom sizes and margin. In custom you have 2 options, fixed size or fluid size. For this tutorial I have chosen custom size and fluid flexible width. See image below:

widths-default-page-suffusion

Step 4: The Fluid width settings for your website is very important especially if you add a header image. If you increase the max width to a size larger than your header image then you will notice an ugly header on your website. So be careful how you manage these settings. See image below:

fluid-width-settings-suffusion

Step 5: The following settings are obvious, it will set the sizes of your sidebar’s. If you have 2 sidebars but you know that one sidebar will have a unique size widgets then this is where you will set up the size  for each sidebar. See image below:

sidebar-width-settings-suffusion

Hint: Reset the theme layout if you are not happy with your settings

There are more options that you might want to check while you are setting up the layout. However this tutorial will give you a head start and provide you with an idea of the layout structure you want for your website or blog.

If you have any questions please leave a comment. Come back for more suffusion tutorials :)

More suffusion tutorials:

Manuel Ballesta RuizManuel Ballesta Ruiz has written 314 posts. He can be followed on Twitter.

  21 Responses to “Suffusion Theme Layout”

  1. Greetings! I know this is somewhat off topic but I
    was wondering if you
    knew where I could find a captcha plugin for my comment form?
    I’m using
    the same blog platform as yours and I’m having difficulty finding one?

    Thanks a lot!

    • Hello and thank you for your question. Can you tell me if you are using WordPress? If you are can you let me know what theme and form are you currently using?

      Kind regards

  2. Nice tips. I have been using Swift basic for sometime now, I have been thinking to change to Suffussion but some how I couldn’t make the the header and navigation bar full width while keeping the content size fixed. Any idea how we can do that ?
    Thanks in advance.

    • Hello Ben, thank you for your comment. In regards to setting the header and top navigation bar.

      Try the following instructions:

      For Header navigate to Appearance >> Suffusion Options >> Other Graphical Elements >> Header and choose your choice. In your case you would choose “Header is outside the main wrapper, its background and contents are as wide as your browser window”

      For the Top Navigation Bar navigate to Appearance >> Suffusion Options >> Other Graphical Elements >> Navigation Bar Above Header >> Navigation Bar Style, in your case you would choose “Navigation bar is as wide as your browser window and contents of the bar begin from the left or right”

      I hope this helps you.

      Kind regards

  3. can we make the header and the navigation bar full width and the content section just 960 px wide ?

    • Hello Ben, yes you can make the content 960px and the header and top menu full width as I pointed out in the previous question.

      If you need more help please let me know.

      Kind regards

  4. that’s the best theme ever…….. but I was wondering if I could make sidebars flexible just like main content so it’s a fully responsive theme! is it possible? I mean I know it is definitely possible for advanced php programmer but there is non of them around. could somebody please help me?

    • Webmaster

      Hi sadegh, thank you for your question. The answer to your question is yes. Suffusion allows you to adjust the sidebars in a very flexible manner. Have a read through my tutorials and see if they help.

      Kind regards

      • Thanks a lot for your valuable attention , I’m gonna see all the tutorials right now.
        Best regards.

        • I guess I didn’t clarify my issue well, I’m using one left sidebar and one right sidebar with the main wrapper which content are there….. I’ve chosen the Fluid/Flexible width under layout–> page width type and it works well but the only problem is the left and right sidebars are fixed under any circumstance ……. I need to know how to make their width flexible….. in other words I want to set minimum and maximum width for left and right sidebar …….. thank you in advance

          • Webmaster

            Hi sadegh have you looked at step 5 in my tutorial? Also remember that you have to make sure that you have selected the correct settings in accordance with your header image or layout. If you can send me a link to your website I will be able to check it further for you.

            Kind regards

  5. Hi and thanks for your tutorial!

    I was wondering if there is any way, with this theme, to have the links to pages just under the header (i.e. “HOME”, “ABOUT”, “CONTACT US” etc).

    Thanks for your help!

  6. Thanks so much for your awesome suffusion tutorials. No matter what I do it doesn’t work, then i do it following your instructions and it works perfectly. So many hours wasted before I decided to google and found you! Now your page is bookmarked! Thanks so much!

  7. I have an issue regarding “Theme selection” in the Skinning section of Suffusion 4.4.7. I’ve been running WordPress on “local host” on my computer and have created my web pages. For my Home page I used “Custom Layout” under Template. I decided to experiment a bit with the Suffusion Options “Theme selection,” and chose one of the themes. Now I want to go back to the look of my original pages, but am unable to “undo” or remove a theme. The only thing I’m able to do is choose among the different themes. I’ve tried all the options under Save/Reset, but the last theme activated does not go away. Is there any way to do this? Thanks for your feedback.

    Best regards, Richard

    • Hi Richard, thank you for your question. If you are running on a local setup, try the following. Uninstall suffusion and reinstall it again. Also make sure that you remove any cache files if you have a cache plugin. This should fix your issue. This might have happened because of a compatibility with either a plugin or your local setup. Are you using Xampp or Mamp?
      Kind regards

      • Thanks for the reply. All I know is that I’m using Instant WordPress on my laptop computer. I do not use a cache plugin. I’m currently using the Suffusion child theme Suffu-scion. Have had no problems except that which I describe above up until now.

        Richard

        • Hi Richard, I had a look at Instant WordPress website. From what I read it is running a very old version of WordPress 3.6. Have you updated WordPress yourself to version 3.9.2? If you haven’t then this will be causing this issue you are experiencing.

          Kind regards

 Leave a Reply

(required)

(required)

twenty + nine =

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>