Jul 312013

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:

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.

#wrapper {
max-width: 1200px;
min-width: 0px; <===== I changed this to 0px which is better for responsive layout.
width: 75%;

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.

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

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:

facebooktwittergoogle_pluspinterestlinkedinmailby feather
Manuel Ballesta RuizManuel Ballesta Ruiz is a web developer, Blogger and WordPress Enthusiast.

  25 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.


        • 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

  8. hello webmaster, I’m new in wordpress. I am using suffusion theme. I want to remove the margin from the theme. please help me.

    • Hi Ahsan, thank you for your question. Please reply back through my contact form here in my website and include the URL to your website. Can you also let me know which margins are you referring too?

      Thank you

  9. Thanks to reply me. Currently I’m working in localhost at my pc. I want to remove sidebar margin, post margin.

    I want to add 2 sidebar only for home page and only one sidebar for other pages. Please help me.

    thanks again for help.

    • Hi Ahsan, are you referring to other pages and not post? If you are referring to pages then carry out the following steps. Everytime you create a new page, on the right hand side you will see the following heading Page Attributes. Under Teamplate you will have a few templates to choose from in your case you will probably choose 1 left sidebar (Depricated) or 1 right sidebar (Depricated).

      Let me know if that helps you.

 Leave a Reply



four × two =

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=""> <s> <strike> <strong>