May 172012
 
suffusion-theme-layout

Donate for a cup of coffee :)

In this tutorial we are going to look at suffusion layout structure and at the same time check out the most commonly used website layouts.

The layouts you see below are based on a header image of the following size 1000px X 204px.

Hint: Click an image to view a larger image.

We are going to look at the most common layouts. See images below:

 Layout 1: Header, left sidebar, content, right sidebar and footer

suffusion theme layout left sidebar and right sidebar

Layout 2: Header, 2 left sidebar, content and footer

suffusion theme layout 2 left hand sidebar

Layout 3: Header, content and footer

Suffusion theme content layout no sidebar

Layout 4: Header, content, 1 right sidebar and footer

suffusion theme layout 1 right hadn sidebar

Layout 5: Header, content, 2 right sidebar and footer. Notice how one side bar is larger than the other.

Suffusion theme layout sidbar different size

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

suffusion-layouts-settings

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

suffusion theme default settings layout

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:

suffusion theme layout widths

Step 4: Fluid width settings for your website. This part is important because of your header. If you increase the max width to a size larger than your header image then you will notice an ugly header. So be careful in with this setting. See image below:

suffusion theme fluids-settings

Step 5: This one is 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 can set up the size of the sidebar to meet the unique widgets. See image below:

suffusion theme sidebar-settings

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:

  1. Adding a header image.
  2. Create a Suffusion menu above the header.
  3. Suffusion custom style navigation bar.
  4. Add a slide show to suffusion theme.
  5. Create a suffusion child theme in a few steps.
Jan 232012
 
add-a-slideshow-to-suffusion-theme

We are going to add a slideshow to the front page of suffusion theme. The first action to take is to download photonic from WordPress. I am using photonic because it was developed by the same developer of suffusion sayontan.

Install the plugin as you would normally do by following the instructions found on WordPress plugin site. Activate the plugin and you are ready to go.

Before we play around with the plugin, do you have images uploaded? Are these images attached to the page or post you are adding a slideshow too? The image below illustrates that all the images for this post are attached to this post, click on image to see a larger size:

Hint: It is import to make sure that the slideshow images are attached to the post or page!!!

The images are attached to a page for display

If you do have the images then proceed to the page or post and insert media see image below:

 Select the media file you are going to attach

Next you select Photonic, see image below:

select photonic plugin to insert images

 

Next select WP Galleries and change the settings according to your requirements, see image below:

 select photonic and wp galleries

Once you have completed the settings click on Insert into post button, see image below:

click on the insert into post button wordpress 

Now you should have a simple slideshow on your page or post, see image below:

 a slideshow added to suffusion wordpress theme

Before you publish view your page or post and see how it looks ? You might have to adjust some settings, once you are happy then publish your post or page. 

If you have any questions please leave a comment. Next tutorial Create a Suffusion Child Theme.

Come back for more suffusion tutorials :)

More suffusion tutorials:

  1. Adding a header image.
  2. Create a Suffusion menu above the header.
  3. Suffusion custom style navigation bar.
Dec 202011
 
suffusion-theme-displaying-problem

If you have installed the new Suffusion Theme 3.9.5 and are having problems displaying all the pages when you are viewing the website through the browser then follow these simple instructions.

What happened to me was the following, I updated the theme and I was very happy with the results but when I went to view the website it look great on the FrontPage but when I clicked on an earlier post it showed my old theme. I was baffled by this although I had my suspicions that it had to do with the cache :)

The first thing to do is delete the cache from the browser and if you are using many browsers then delete the cache from all the browsers. Install or activate your theme and see if this works.

If the above does not work which is what happened to me then do the following to troubleshoot the problem.

  1. If you have a cache plugin in my case WP Super Cache then disable the plugin. You might have a different cache plugin installed.
  2. Install your theme or if you have already installed the theme then activate it.
  3. Check to see if the problem is resolved and if it is then enable your cache plugin again.

The above steps should fix the problem that you might be experiencing with Suffusion Theme. These steps only apply locally, these steps do not apply to the server’s cache.

If you have any questions just leave a comment here and I will try to help you.