A New Look for the Suffusion Theme Page

How To

The nagging voice at the back of my head always told me that the theme page for Suffusion was too plain. At various points of time I thought of revisiting the layout of the page, but somehow it didn’t make any sense to redesign it with a ton of PHP in a child theme. So one of the things I constantly thought of while building version 4.0.0 was that the theme should be able to support product pages.

And that led to the birth of the Custom Layouts. I built the new theme page of Suffusion solely with widgets. Here are the basic steps:

  1. I first went to Suffusion Options → Templates → Custom Layout Template, then set the first widget area to have 2 columns and the second to have 3 columns.
  2. Next I created a dummy page and saved it as a draft, assigning the “Custom Layout” to it and setting it to follow the “0 sidebars” page layout. The reason I created a new page is because I was going to work on it during this process and I didn’t want the landing page of Suffusion to look wonky. I saved it as a draft because I didn’t want it published.
  3. I then went to Appearance → Widgets:
    1. I added a Featured Content widget and a text widget to the Custom Layout Widget Area 1.
    2. I added a handful of text widgets to the Custom Layout Widget Area 2.
  4. Now, I wanted to make a few changes to the defaults:
    1. I wanted the Featured Content to be about 650px wide and the text widget beside it had to be about 330px to allow some gap in between them. So I put this in the Custom Includes:
      #suf-featured-posts-3 { width: 650px; }
    2. I also wanted a patterned background for the text widget in Widget Area 1, and I wanted a nice “Call to Action” button. So I added this:
      #text-9 { width: 330px; 
      	background: url(https://aquoid.com/news/wp-content/uploads/2012/02/tan-1.png); 
      }
      a.call-to-action {
      	font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
      	text-transform: uppercase;
      	font-size: 16px;
      	color: #fff;
      	text-decoration: none;
      	background: #a90707;
      	padding: 0.5em 2em;
      	margin-top: 2em;
      	display: inline-block;
      	border-radius: 7px;
      	font-weight: bold;
      }
    3. I didn’t want the text widgets in the Widget Area 2 to have Arial bold headers. So I went to Suffusion Options → Typography → Content Headers, and picked “Quattrocento” for the H6 font. I also left the overall selection to use the theme defaults: this ensured that Quattrocento was loaded, but that it didn’t affect the H6 fonts. The next step was to apply this font to the widget headers and set appropriate margins:
      .cl-widget h3 {
      	font-family: Quattrocento, serif; 
      	font-weight: normal; 
      	font-size: 20px; 
      	margin-bottom: 20px; 
      } 
    4. Most text widgets in Widget Area 2 were to have a widget icon. Here is where I optimized and built a sprite with a bunch of images. Then I defined a “widget-icon” class:
      .widget-icon { 
      	float: left; 
      	margin-right: 1em; 
      	width: 64px; 
      	height: 64px; 
      	background: url(https://aquoid.com/news/wp-content/uploads/2012/02/Suffusion-sprite.png) no-repeat; 
      	text-decoration: none; 
      }
      .widget-icon:hover { 
      	text-decoration: none; 
      }
    5. The last piece of style setting again applied to the featured content. I wanted to get small boxes with Quattrocento headings, slightly separated from the edges:
      .sliderImage div { 
      	background-color: rgba(0, 0, 0, 0.75) !important; 
      	color: #ddd !important; 
      	width: 250px !important; 
      } 
      .sliderImage ins a { 
      	font-family: Quattrocento, serif; 
      	font-weight: normal !important; 
      	font-size: 16px; 
      }
      .sliderImage .right { 
      	right: 10px; 
      	bottom: 10px; 
      	border-radius: 5px; 
      }
  5. I then put the text that I wanted to in each widget, and linked up the appropriate icons, and that was it.
  6. When I was satisfied with how my page looked, I went to the page editor and pulled up the page for Suffusion. I assigned the “Custom Layout” template to it, and set it to follow 0 sidebars. I also toggled the breadcrumb display for the page and saved it. Since I have only one page using the Custom Layout template I didn’t have to do much in terms of putting conditions around widgets etc.

The end result is there for you to see. Hopefully you will be able to use this approach to make your own custom layouts.

Now, back to waiting for 4.0.0 to go live!

14 Responses to “A New Look for the Suffusion Theme Page”

  1. Thank you! Just this week I had been wondering how to do something like that.

  2. Awesome layout! 🙂

  3. Very cool layout! I’m curious – which Featured Content widget did you use? It looks very sharp. 🙂

    • Sorry, I missed seeing this comment. I use Suffusion’s inbuilt Featured Content widget.

  4. This is most excellent…but unfortunately I may not be smart enough to understand how to set the widget to different pixel sizes. I understand the custom includes, but how does it know what widget to resize?

    • Each widget has an id. In the code above, the featured content widget has an id suf-featured-posts-3 and the text widget has an id text-9. You can determine the widget ids using Firebug.

  5. Hi Sayontan, Nice job with the theme. and thanks for it.

    I was trying to do the above custom layout – but when I add

    #suf-featured-posts-3 { width: 650px; }  

    I get no change in the size of the widgets. actually with Custom Layout Widget Area 1. no change is happening, with Custom Layout Widget Area 2 – all is fine.

    with warm regards.

  6. When I checked out with firebug, i saw its ‘suf-featured-posts-2’ so i changed the code accordingly, but now, the right text widget, is not resizing automatically, so the outcome is, that, the feature box is going under the right text widget box.

    • You will also need to add an explicit width setting for the adjoining widget. Also ensure that you add the !important directive like this:

      #suf-featured-posts-2 { width: 650px !important; }
  7. Hello Sayontan,

    Thank you for your Soffusion theme. I’d like very much to use it because it has more features and options than any other WP theme I have ever seen. Unfortunately however, when I used it temporarirly in place of twentyeleven ( which I’m now using for a friend’s site), it displays the same problem I’m having now. That is, my friend copies news items as HTML text and pastes it into apost of twentyeleven. In spite of the HTML formatted text, the site looks good in IE, but in firefox all the text extends beyond its column and above the sidebar on the right side of the page. Soffusion behaves the same way, it looks great when the content is displaying in IE, but in firefox the pasted-in HTML text content also extends beyond the column and above the right sidebar.

    If you would you please tell me how I can get that text to stay within its column in Soffusion, as it does stay in IE, I would love to switch to Soffusion yesterday.

    Thanks

  8. I forgot to mention…

    With most WP themes, the HTML pre-formatted text extends beyond the column and above the right sidebar when viewed with IE as well as firefox. twentyeleven and Soffusion are the only two themes with which the text displays entirely within the column when viewed in IE. Therefore, with these two themes the problem only exists when viewed with firefox. The enclosed url is to the site in question.

    Thank you

  9. Thanks Sayontan. Will post the question in the proper place.

  10. I’m trying to use a custom layout page for my home page and I like having the featured post such as you have shown. However, I cannot get the size of the widget in section 1 to change. I’ve even gone so far as to copy the above code (minus the numbers) to my custom includes to see if that would work but nadda. What am I doing wrong?