Suffusion
Welcome to Suffusion, my first experiment with a WordPress theme! Suffusion is a free Open Source package distributed through the official WordPress themes site. The theme is licensed under GPL version 3.
Suffusion is updated very regularly and the changes from one release to another might throw you off. I make honest attempts to capture a decent change log, which documents what has changed. So it might be a good idea for you to subscribe to the theme news. It will also preempt posting of any queries on the support forum that might have already been answered through this site.
Suffusion is a multi-featured theme with several customizable options:
- Multiple “skins” out of the box
Suffusion has 17 pre-defined color schemes for you to choose from. Moreover you can pick a skin and customize the colors further based on your likes and dislikes.
United Colors of Suffusion - 16 Canned Skins to Choose from
- Widget areas and widgets
Suffusion provides you with 19 different widget areas to place your widgets. These widget areas let you define a theme with one column, two columns or three columns, and have the added advantage of letting you define widgets above and below your content. Suffusion also comes with bundled widgets for Twitter, Social media, Category Posts etc that you can set up.
Pick your own Twitter icon from the set provided
- A terrific Featured Posts section
The theme leverages the amazing JQuery Cycle plugin to build a featured posts section. What’s more – it lets you pick a transition effect from JQuery’s entire array of effects: fade-in, slide-up, slide-right etc. - Tabbed Sidebars
Suffusion lets you define a static tabbed sidebar, a.k.a. tabbed widgets. The standard WordPress widgets can all be included amongst the tabs, so go ahead and use this feature! In addition you can make some of your sidebars themselves tabbed dynamically. - Exceptional control over most features that you can think of
This is best illustrated through examples:- A multi-level drop-down navigation bar
- Can explicitly select which page and category you want to show.
- Exclusions work perfectly. If you decide to exclude a page or category all its children are excluded too.
- WP 3.0 menus are supported, too.
- Control over which type of page you want excerpts to show up
- Explicit excerpt settings for each kind of page.
- Ability to define a thumbnail for a post that will be shown in the excerpt.
- Automatically fetched thumbnail images for your excerpts if not explicitly defined, etc.
- Fine-grained control over pagination options
- Support for the popular plugin WP-PageNavi.
- Alternative pagination approaches provided if the plugin is not being used.
- Pagination is supported both for posts and for comments.
- Comment control
- You can separate trackbacks and pingbacks from comments or hide them altogether
- In your “separated” mode you will have pagination for each type of comment
- Lots of other such features, including but not restricted to header look and feel, custom footer etc.
- A multi-level drop-down navigation bar
I have tested the theme for the following browsers:
- Internet Explorer:
- 7.0, 8.0 – Works fine, but doesn’t show rounded borders or shadows (CSS3 features).
- 6.0 – Some sidebar layouts are broken, such as the Single left, Single Right sidebar. Otherwise almost everything renders fine. Given Microsoft’s IE6 Countdown program and WordPress’ dropping of support for this browser there are no plans to fix the broken layouts.
- 5.5 – Doesn’t show rounded borders or shadows (CSS3 features) and shows extra space below the navigation bar. I haven’t had much time to debug for a fossilized browser.
- Firefox:
- 3.0, 3.5 – All features work as designed.
- 2.0 and below – Haven’t tested, but I think it should be okay for everything apart from the rounded borders or shadows.
- Safari:
- 4.0+ – All features work as designed on both Windows and Mac
- 3.2 and below – Haven’t tested, but I think it should be okay for everything apart from the rounded borders or shadows.
- Opera:
- 8+ – Works as designed, except for rounded borders and shadows
- Chrome:
- 2.0 – All features work as designed.
The theme is XHTML 1.0 compliant. Please feel free to pitch in with comments and bug reports by posting them on the forum.
Please don’t use the comments here any more for reporting issues or for support queries. Please use the support forum instead. This will help you track and search issues better.
Follow me on Twitter
I was thinking about *.po (*.pot) files.
I saw only few strings there.
Extracting strings using PoEdit gave no results.
How to extract strings in english (i presume?).
Also there is no load_theme_textdomain in functions.php.
So, I was thinking about getting those strings.
Cheers, Max.
p.s.Nice work with new version about excluding in menu, showing in navi. Extremelly useful.
Max,
I constructed my suffusion.po file using POEdit and it lists 50 strings – are you referring to that file? If you look at my overall theme, I only have around 50 places where I have custom strings – the rest is all entered by the user. Note that I haven’t made the options page translation-ready, because of the volume of options that I have. Maybe it is something I will do in the future.
You are right though – I obviously missed the load_theme_textdomain. I will fix it.
Sayontan.
Btw, just a quick question, im having problems with translation of My theme login.Maybe u know about this plugin.
I use qTranslate as well, hard coding with its tags to be able to switch between languages.
The thing is, theme my login (in admin dashboard) shows good translations , qTranslate should have no problem with it…but when I switch langagues on the page – only some are listed correctly, like if qTranslate has problem reseting…
I was trying to hard code it without luck.
Can that have something to do with your theme?
Cheers, Max.
Max,
That shouldn’t be the case – I have specified a domain “suf_theme” for all my translations, so unless the plugin is using that domain, there shouldn’t be any conflict from Suffusion.
Cheers,
Sayontan.
Sayontan
I have done a complete re-install of wordpress and slowly but surely added the widgets.
The Events Calendar seems to be the one in conjunction with your theme that stop the widget’s working, it does however work fine with the standard theme so there is some sort of conflict between the two.
The NextGen Gallery widget is what messes up the footer and again it seems incompatible with your theme. This one is important to me I can live without the Calendar so i will need to see if I can find what is wrong.
Colin,
Seems like the NextGEN gallery issue was resolved – I see the footer in the right place. I believe the problem was with specifying the title – was that the case? I will look at EventCalendar.
Sayontan.
Sayontan
No it wasn’t actually. The widget I am using is a separate plugin for the Nextgen gallery the one that comes with the gallery is still broken.
I wouldn’t bother with the Events Calendar at the moment it has some other bugs in it reading the support forum. There is a new version due later this week so let me check it out before you waste any time on it.
IMHO it would be worth looking at the NextGen issue as it seems to be the most widely used gallery.
When you are doing another build and if you have time could you consider installing favicon code into the index page as part of the core release? Or can I do it in some way so it is not overwritten with each new release of the theme?
BTW I got rid of the Forum Server plugin and went for the wp-forum plugin and that resolved the forum display issue I was having.
Colin,
I will definitely take a look at this, since the problem is not restricted to NextGen alone, but any widget that doesn’t print its title in the traditional sense.
For favicons you don’t really need any support from my side – you can drop the favicon.ico file anywhere in your path – either in vrcc.turnspain.com or in the directory where your blog is installed. It certainly doesn’t have to be in the theme directory. Browsers automatically pick that file up. Note that you might need to restart your browser to see it in effect, and you might not see it right away, but it will get picked.
Cheers,
Sayontan.
Colin,
As it turns out, if you uncheck the “Enable IE8 Web Slices” option, things work fine in the NextGen plugin. I tried it on your site.
Nevertheless I will work on fixing this issue from a broader perspective.
Cheers,
Sayontan.
Sayontan
Thanks for the update I’dd go back to the original widget.
I thought that you needed
in the head section of the page template to get it to display the favicon. I’ll give it a try.
link rel=”shortcut icon” type=”image/x-icon” href=”/favicon.ico”
is what I meant to say
Yup, I understood that. It is not needed. See my personal blog http://mynethome.net/blog to understand what I mean. I don’t have this setting anywhere on it (the same theme is being used).
Sayontan.
You learn something new every day
I see what you mean and it works.
Sayontan
I have just been playing some more with the latest version of your theme. Can I say that it is great. The ability to have widget bars other than in the left or right side bars is excellent. I now have a large photo strip along the bottom of the page which for what I want is great.
A little tweak that would be more visually appealing IMHO would be to change the carat character that you use to minimise widgets. The change I would suggest would be to + and – as this would be more intuitive. This isn’t a biggy just a comment.
Thanks for all the help and support that you give especially considering that the theme is free and you are not making anything from it financially. Finally thanks for a great configurable theme.
Colin.
Colin,
Thanks for the feedback.
Redoing the icons is rather low on my list, assuming it is even on my list. The thing about icons is that they take a lot of time to do and are not of much value if people don’t like them very much. And particularly since I am not much of a Photoshop / GIMP person, I tend to design my icons the slow and old-fashioned way on these fancy tools.
Cheers,
Sayontan.
Sayontan
I use Photoshop a lot so leave that up to me I will knock you some up in the next couple of days. Likewise if you want any others done / updated let me know. It is the least I can do to give something back to you for the excellent theme.
Colin
Colin,
That will be excellent! Thanks for the offer!
Sayontan.
Hi, I love Suffusion, very easy to customize. However, after I change the colors, fonts, etc, and I click on “visit site” I don’t see my changes, still shows the default page (black and green).
How do I see the new page with my changes?
Please let me know,
Thanks
Carmen,
Make sure that you have “Custom styles” selected instead of “Theme styles” for the section where you have done customizations.
Sayontan
I’d like to build a custom header but have a couple questions.
1) Is there a recommended header size?
2) Where should I save the header once built? Does it go in themes/suffusion/images?
3) Does it need to have a particular filename?
4) Does the theme have a default header image already that can be edited, if so where is it? (I’ve looked but haven’t been able to locate one.)
Thank you for such a great theme!!!
Amy,
To answer your questions:
1. The header area is 1000x120px if you are not going to use the drop-down menus (navigation bar) and 1000x95px if you are going to use the navigation bar and don’t want the navigation to overlap the header image.
2. You can save it anywhere you want – preferably NOT in the theme directory. That is because if you upgrade the theme when a new version is released, the entire folder is rewritten.
3. No, you can name the file as you please.
4. There is no default image. The rationale was to provide a lightweight theme by default, fully customizable to add new features.
One question that you haven’t asked, but you probably will, is how to specify that an image is a header image. For that, go to your admin screen, then to Appearance -> Suffusion Theme Options. Click on “Header Customization”, select “Custom Styles” and in the “Header Image” field put in the full URL of the image. Then Save. You will see your header on the page. Note that even if you upgrade this setting stays safe.
I love this theme.
but I have 2 questions.
When I enable widget area with the 2 columns under the header I do not see anywhere to place widgets in the 2nd column. did i miss something?
Also is there any way, within the admin to add a flash header or should i do that in the template file or css?
Looking forward to your reply,
Marc,
Your widgets have to be defined in the Appearance -> Widgets section of your admin screen. You will see a widget area called “sidebar-2″. That is where you add the widgets.
There is a way to do the flash header:
1. Create a text widget and place it in the “Widget Area below header”.
2. Call your flash file in that widget and don’t give a title to the Text Widget.
Sayontan.
I know that you add widgets to sidebars, but when i enabled the 2 widget areas below the header all it allows is 1, on my webpage you will see 2 images there, GHL and Fauna Marin. they are both residing in one widget.
I’d like 2 widgets side by side so I enabled the below header widget area to have 2 columns. should i not see “Widget Area Below Header” AND another one called “Widget Area Below Header- 2″ or something? If you wish to bring this to email feel free to do so.
Responded through email
I like this theme a lot. It’s very clean and elegant. Thanks for posting it! However, there are a couple of features that I’d like to request:
1) The option to add a header logo to the left of the blog title, instead of (or maybe in addition to) the header background image.
2) The option to display the time an item was posted. This might go after the posted-by line, like “Posted by Nate at 8:02 pm” for example.
I will look into implementing these myself, but I’m very new to wordpress, and I’m still feeling my way around. If these sound like good ideas to you, I’m sure you could do it much more effectively than I could.
Let me know what you think.
Nate,
Thanks. Regarding your points:
#1 can be achieved with the theme setup options. You can go to the “Header Customization”, define a header image, then set the tiling option to say “Do not repeat – show background once only”, your header image position as “Center Left” or “Top Left” and your blog title / header alignment as “Right”. This should do it for you.
#2 is on its way. I have had this request from another user too and it is to be included in a patch that I plan to release today.
Cheers,
Sayontan.
Thanks.
I wish there was an icon that allowed the end user to switch between certain color choices. I personally want a dark theme, but many visitors are visually impaired and need more contrast to the theme. Is is possible to include this on future revisions to allow user switching between selected theme colors and making one the default.
Thanks
No plans to do that, because it would make things slower. I spoke to one particular designer who has this feature enabled and he believes it really slows things down on slow connections (Inanis Glass is the theme).
Dear Sayontan,
First I want to thank you for making such an elegant and stylish theme. I absolutely love it. I also appreciate the user friendliness. Had to change from my old theme because it was impossible to work out (I am a novice in the whole wordpress thing).
I just have a quick question. Would it be possible to place the name of the blog and the tagline above the header (as seen here http://foodfanatic.wordpress.com)?
Kind Regards, Nadia
Nadia,
You can do it without changing any code, but it will need a bit of effort:
1. First go to the “Header Customization” and set the “Header Image Position” to “Bottom Left” or “Bottom Center”, whatever works well for you.
2. Now go to the “Custom CSS, JavaScript and RSS” and put in something like this:
#header { height: 100px; }This should move up the title. Try increasing the height of #header if you want the text to move higher.
Cheers,
Sayontan.
Thanks for the quick reply,
I did what you said. Changed the place of the header and in Custom Styles (under the “Custom CSS, JavaScript and RSS) I added the code. Now the blogtitle moved up a bit but it is still in the headerimage. I am trying to have it above the headerimage as seen here http://foodfanatic.wordpress.com
Did I do something wrong?
Nadia
Hi,
I’ve two questions:
1. In the admin panel I can switch post ito get shown in excerpts, which is pretty cool, but It doesn’t shows then any images… as I have in every posts in the top left corner a thumbnail which is linked to the categoriy it would be nice to to show those thumbails too when I choose the excerpts fuction.
2. I lve this theme, because of his many posibilities to optimise it for my own taste. but one thing is left. Like many newer magazine styles for WordPress I would like to have the main body (where the post are) as a two column style, where I can show (together with the excerpts option) two Posts in one line.
Perhaps the newest post above and then in excerpts two older post beside each other under the newest.
Or two rows for two different categories… would have a few Ideas What I can do with such stuff.
Hi,
For #1 I made a release last night (2.4.5, not yet approved) that shows the images. You can either define a thumbnail image or it will pick up an image associated with the post (though I don’t have anything to link to a category).
For your second point, I didn’t design this with magazine styles in mind, but I can explore the option. It will take a few weeks, though, since it is not just a layout change, but it requires an addition of a lot of new features.
Sayontan.
Nadia,
Your header image is quite tall (310 px), which is causing this to happen. Try putting this in the custom CSS:
#header {
height: 100px;
}
#header-container {
background-position: 0px 50px;
}
As I mentioned earlier, I am not familiar with your blog’s settings, so you will have to experiment a bit. If you are still not getting the desired results, change the header height to 120px and background-position to “0px 60px”.
Sayontan.
thx for quick answer
nope sorry have the last update of your theme, and tried. no thumbnail get shown…
You have version 2.4.4. The changes are in 2.4.5. When we release a theme or a new version, it takes 1-3 days to get approved by the WordPress team. I submitted 2.4.5 last night – it might get approved today. You will see it in that version.
Cheers,
Sayontan.
Great theme for a newbie, thanks.
So I had an swf in html and I used it, then I had some bugs due to moving files to a new domain. So I reinstalled and I think the header file changed. Now I am a bit confused as to where to add in the code for a swf/flash header. I had managed it to put it in, but the current line that ran horizontally at the bottom of the header, dropped down about 100px once it hit the sidebar and I want to keep it going all the way across under the header.
In conclusion, I would like to know where I can throw my swf html into the header.php file please.
Thanks
In your “Custom CSS, JavaScript and RSS” section of the options you have some code in the “Custom CSS” section, that sets the header height to 200px. If you remove that then the horizontal line will be at the correct place. A question, though – where did you add the flash file?
Hi, perfect. I believe previously I had header instead of header-container and its there I threw in the code. So …
<img style="visibility
etc
So now I have added it onto header-container and that's gone well. I just need to try and figure out how to reduce the space under the flash. I know setting a header height messes with the line again. Any ideas?
Sorry, this comment of yours got caught in my spam filter (Bad, Bad Akismet!). Hopefully your question is answered now.
Ok, managed to get it sorted, header height impacts one, and header container impacts the other.
thanks for your help