Fusion
A free CSS template with 2 or 3 columns (right sidebar), and fixed or fluid width. Currently the Wordpress and Pligg themes are available, but I’m also planning to port this to Drupal when I find the time.
Support this project
A free CSS template with 2 or 3 columns (right sidebar), and fixed or fluid width. Currently the Wordpress and Pligg themes are available, but I’m also planning to port this to Drupal when I find the time.
Support this project
First off, I love your theme. I am using it on a feminist game blogging site, and having some difficulty with the threaded comments.
If you look at a post with a lot of comments, you can see that they start getting so nested that the columns are really narrow. It doesn’t look so bad at full-variable-width, but when people make the page narrow it looks horrible =(
You can see this thread for an example of that. I made the font size smaller to make up for this, but its not the optimal situation, especially since the site is read by people who have vision impairment.
Does anyone have any tips for maybe reducing just how nested the comments can get? I don’t want to switch to non-threaded if I can help it.
Thanks!
try:
li.comment.with-avatars{ background-position: 26px bottom; } li.comment.with-avatars .wrap{ background-position: 26px top; } li.comment.with-avatars .details{ margin-left: 38px; } ol#comments li.comment.with-avatars.depth-2, ol#comments li.comment.with-avatars.depth-3, ol#comments li.comment.with-avatars.depth-4, ol#comments li.comment.with-avatars.depth-5, ol#comments li.comment.with-avatars.depth-6, ol#comments li.comment.with-avatars.depth-7, ol#comments li.comment.with-avatars.depth-8, ol#comments li.comment.with-avatars.depth-9{ margin-left: 26px; } li.comment .avatar{ position:absolute; left:16px; top:4px; background-color: #fff; } li.comment .details .head, li.comment .details .text{ padding-left: 86px; }(paste in fusion settings/ user css)
the threaded comment layout looks indeed crappy, so I’ll probably update the theme with these changes as well.
People using Fusion should update to 3.1.2 since it fixes XSS vulnerability described here
I’m sorry but I posted this comment in the wrong discussion thread before.
I really love this theme as it’s clean and it loads a lot faster than my old one!
I have a wee question though. I’d like the default page display to be the wider version that is activated when you click on the “Aa” button. At the moment the default display is the narrow version, and that breaks my title and sidebar content. I’m using the 2nd sidebar and displaying the default sidebar to the left.
I’ve searched through the stylesheet CSS and played around with a few values but
nothing seems to work.
Any help would be greatly appreciated!
Some of us work for a corporation that doesn’t allow us to use a modern browser. Some of us are forced to use IE6.
We know it sucks, but bullying people to upgrade when they have no choice is lame.
Leaving aside that Fusion has IE6 support, nobody here is bullying you to upgrade your browser, just like nobody forces you to use a free theme.
Good answer!
It looks like the template melting is incompatible with version 1.0.3 of Pligg. (comments are not displayed) You plan to upgrade soon? If yes, I have patience quietly before update. If not, I’ll do it myself.
Thank you for all your templates, they are beautiful!
Hey Milenko, i was wondering if you could help me fix the width of my page. Is it me or does my webpage looks like its zoomed in. My header and logo and almost everything that i add onto the layout are bigger then its suppose to be. Well if it looks normal to you then it might just be my computer. check it out Thanks again and very nice theme
Hi.
First: Thaks for the great theme.
I’m using it on the above identified colective blog.
One small question: in IE the text title in the article individual page apears in small size (just like the text font size). Is there a way to fix it?
Your theme for Wordpress is amazing.
I recently ran “Google Page Speed” through FireFox Firebug. It returned the following recommendations about the CSS file. You may consider making changes for the future versions.
Thanks for your great product and support.
/wp-content/themes/fusion/style.css has 128 very inefficient rules, 65 inefficient rules, and 16 potentially inefficient uses of :hover out of 304 total rules.
Very inefficient rules (good to fix on any page):
* #tabs li.current_page_item a Tag key with 2 descendant selectors and Class overly qualified with tag
* #tabs li.current_page_item a:hover Tag key with 2 descendant selectors and Class overly qualified with tag
* #tabs li.current_page_ancestor a Tag key with 2 descendant selectors and Class overly qualified with tag
* #tabs li.current_page_ancestor a:hover Tag key with 2 descendant selectors and Class overly qualified with tag
* #tabs li.current-cat a Tag key with 2 descendant selectors and Class overly qualified with tag
* #tabs li.current-cat a:hover Tag key with 2 descendant selectors and Class overly qualified with tag
* #tabs li.current-cat-parent a Tag key with 2 descendant selectors and Class overly qualified with tag
* #tabs li.current-cat-parent a:hover Tag key with 2 descendant selectors and Class overly qualified with tag
* #tabs a.active span Tag key with 2 descendant selectors and Class overly qualified with tag
* #tabs a.active:hover span Tag key with 2 descendant selectors and Class overly qualified with tag
* #tabs li.current_page_item a span Tag key with 3 descendant selectors and Class overly qualified with tag
* #tabs li.current_page_item a:hover span Tag key with 3 descendant selectors and Class overly qualified with tag
* #tabs li.current_page_ancestor a span Tag key with 3 descendant selectors and Class overly qualified with tag
* #tabs li.current_page_ancestor a:hover span Tag key with 3 descendant selectors and Class overly qualified with tag
* #tabs li.current-cat a span Tag key with 3 descendant selectors and Class overly qualified with tag
* #tabs li.current-cat a:hover span Tag key with 3 descendant selectors and Class overly qualified with tag
* #tabs li.current-cat-parent a span Tag key with 3 descendant selectors and Class overly qualified with tag
* #tabs li.current-cat-parent a:hover span Tag key with 3 descendant selectors and Class overly qualified with tag
* #tabs ul a.active ul Tag key with 3 descendant selectors and Class overly qualified with tag
* #tabs ul li.current_page_item ul Tag key with 3 descendant selectors and Class overly qualified with tag
* #tabs ul li.current_page_ancestor ul Tag key with 3 descendant selectors and Class overly qualified with tag
* #tabs ul li.current-cat ul Tag key with 3 descendant selectors and Class overly qualified with tag
* #tabs ul li.current-cat-parent ul Tag key with 3 descendant selectors and Class overly qualified with tag
* #tabs ul.active ul ul Tag key with 3 descendant selectors and Class overly qualified with tag
* #tabs ul li.current_page_item ul ul Tag key with 4 descendant selectors and Class overly qualified with tag
* #tabs ul li.current_page_ancestor ul ul Tag key with 4 descendant selectors and Class overly qualified with tag
* #tabs ul li.current-cat ul ul Tag key with 4 descendant selectors and Class overly qualified with tag
* #tabs ul li.current-cat-parent ul ul Tag key with 4 descendant selectors and Class overly qualified with tag
* #tabs ul li ul a Tag key with 4 descendant selectors
* #tabs ul a.active ul a Tag key with 4 descendant selectors and Class overly qualified with tag
* #tabs ul li.current_page_item ul a Tag key with 4 descendant selectors and Class overly qualified with tag
* #tabs ul li.current_page_ancestor ul a Tag key with 4 descendant selectors and Class overly qualified with tag
* #tabs ul li.current-cat ul a Tag key with 4 descendant selectors and Class overly qualified with tag
* #tabs ul li.current-cat-parent ul a Tag key with 4 descendant selectors and Class overly qualified with tag
* #tabs li:hover ul a span Tag key with 4 descendant selectors
* #tabs ul a.active ul a span Tag key with 5 descendant selectors and Class overly qualified with tag
* #tabs ul li.current_page_item ul a span Tag key with 5 descendant selectors and Class overly qualified with tag
* #tabs ul li.current_page_ancestor ul a span Tag key with 5 descendant selectors and Class overly qualified with tag
* #tabs ul li.current-cat ul a span Tag key with 5 descendant selectors and Class overly qualified with tag
* #tabs ul li.current-cat-parent ul a span Tag key with 5 descendant selectors and Class overly qualified with tag
* #tabs ul li ul a span Tag key with 5 descendant selectors
* #tabs ul li ul a span span Tag key with 6 descendant selectors
* #tabs ul a.active ul a:hover Tag key with 4 descendant selectors and Class overly qualified with tag
* #tabs ul li.current_page_item ul a:hover Tag key with 4 descendant selectors and Class overly qualified with tag
* #tabs ul li.current_page_ancestor ul a:hover Tag key with 4 descendant selectors and Class overly qualified with tag
* #tabs ul li.current-cat ul a:hover Tag key with 4 descendant selectors and Class overly qualified with tag
* #tabs ul li.current-cat-parent ul a:hover Tag key with 4 descendant selectors and Class overly qualified with tag
* #tabs ul ul a:hover span Tag key with 4 descendant selectors
* #tabs ul a.active ul a:hover span Tag key with 5 descendant selectors and Class overly qualified with tag
* #tabs ul li.current_page_item ul a:hover span Tag key with 5 descendant selectors and Class overly qualified with tag
* #tabs ul li.current_page_ancestor ul a:hover span Tag key with 5 descendant selectors and Class overly qualified with tag
* #tabs ul ul li.current_page_parent a:hover span Tag key with 5 descendant selectors and Class overly qualified with tag
* #tabs ul ul li.current_page_item a:hover span Tag key with 5 descendant selectors and Class overly qualified with tag
* #tabs ul ul li.current_page_parent li.current_page_item a:hover span Tag key with 6 descendant selectors and Class overly qualified with tag and Class overly qualified with tag
* #tabs ul ul li.current-cat a:hover span Tag key with 5 descendant selectors and Class overly qualified with tag
* #tabs ul ul li.current-cat-parent li.current_page_item a:hover span Tag key with 6 descendant selectors and Class overly qualified with tag and Class overly qualified with tag
* #tabs ul li ul a span Tag key with 5 descendant selectors
* #tabs ul li ul a span Tag key with 5 descendant selectors
* #tabs ul li ul ul Tag key with 4 descendant selectors
* #tabs ul li:hover ul ul Tag key with 4 descendant selectors
* #tabs ul li:hover ul ul ul Tag key with 5 descendant selectors
* #tabs ul li:hover ul ul ul ul Tag key with 6 descendant selectors
* #tabs ul li li:hover ul Tag key with 4 descendant selectors
* #tabs ul li li li:hover ul Tag key with 5 descendant selectors
* #tabs ul li li li li:hover ul Tag key with 6 descendant selectors
* #tabs ul ul li.current_page_parent a span Tag key with 5 descendant selectors and Class overly qualified with tag
* #tabs ul ul li.current_page_item a span Tag key with 5 descendant selectors and Class overly qualified with tag
* #tabs ul ul li.current_page_parent li.current_page_item a span Tag key with 6 descendant selectors and Class overly qualified with tag and Class overly qualified with tag
* #tabs ul ul li.current-cat a span Tag key with 5 descendant selectors and Class overly qualified with tag
* #tabs ul ul li.current-cat-parent li.current_page_item a span Tag key with 6 descendant selectors and Class overly qualified with tag and Class overly qualified with tag
* #tabs ul ul li.current_page_item li a span Tag key with 6 descendant selectors and Class overly qualified with tag
* #tabs ul ul li.current_page_parent li a span Tag key with 6 descendant selectors and Class overly qualified with tag
* #tabs ul ul li.current-cat li a span Tag key with 6 descendant selectors and Class overly qualified with tag
* #tabs ul ul li.current-cat-parent li a span Tag key with 6 descendant selectors and Class overly qualified with tag
* ul.secondary-tabs a span Tag key with 2 descendant selectors and Class overly qualified with tag
* ul.secondary-tabs a span span Tag key with 3 descendant selectors and Class overly qualified with tag
* ul.secondary-tabs a span Tag key with 2 descendant selectors and Class overly qualified with tag
* ul.secondary-tabs a:hover span Tag key with 2 descendant selectors and Class overly qualified with tag
* ul.secondary-tabs a:hover span Tag key with 2 descendant selectors and Class overly qualified with tag
* ul.secondary-tabs a.active span Tag key with 2 descendant selectors and Class overly qualified with tag and Class overly qualified with tag
* ul.secondary-tabs a.current span Tag key with 2 descendant selectors and Class overly qualified with tag and Class overly qualified with tag
* .post h2.title a Tag key with 2 descendant selectors and Class overly qualified with tag
* .post h2.title a:hover Tag key with 2 descendant selectors and Class overly qualified with tag
* .post h3.title a Tag key with 2 descendant selectors and Class overly qualified with tag
* .post h3.title a:hover Tag key with 2 descendant selectors and Class overly qualified with tag
* .post p.postcontrols a Tag key with 2 descendant selectors and Class overly qualified with tag
* .post p.postcategory a Tag key with 2 descendant selectors and Class overly qualified with tag
* .attachment p.postcontrols a Tag key with 2 descendant selectors and Class overly qualified with tag
* .attachment p.postcategory a Tag key with 2 descendant selectors and Class overly qualified with tag
* li.comment .avatar img Tag key with 2 descendant selectors and Class overly qualified with tag
* li.comment .details.admincomment .head a Tag key with 3 descendant selectors and Class overly qualified with tag
* li.comment .details.admincomment .head a:hover Tag key with 3 descendant selectors and Class overly qualified with tag
* span.button a span Tag key with 2 descendant selectors and Class overly qualified with tag
* span.quote a span Tag key with 2 descendant selectors and Class overly qualified with tag
* span.reply a span Tag key with 2 descendant selectors and Class overly qualified with tag
* span.submit a span Tag key with 2 descendant selectors and Class overly qualified with tag
* span.button a span span Tag key with 3 descendant selectors and Class overly qualified with tag
* span.button a:hover span Tag key with 2 descendant selectors and Class overly qualified with tag
* #sidebar ul.nav li Tag key with 2 descendant selectors and Class overly qualified with tag
* #sidebar ul.nav ul Tag key with 2 descendant selectors and Class overly qualified with tag
* #sidebar ul.nav ul ul Tag key with 3 descendant selectors and Class overly qualified with tag
* #sidebar ul.nav li li Tag key with 3 descendant selectors and Class overly qualified with tag
* #sidebar ul.nav li li li Tag key with 4 descendant selectors and Class overly qualified with tag
* #sidebar ul.nav li a Tag key with 3 descendant selectors and Class overly qualified with tag
* #sidebar ul.nav li a:hover Tag key with 3 descendant selectors and Class overly qualified with tag
* #sidebar ul.nav li a span Tag key with 4 descendant selectors and Class overly qualified with tag
* #sidebar ul.nav li a span em Tag key with 5 descendant selectors and Class overly qualified with tag
* #sidebar ul.nav li a:hover span Tag key with 4 descendant selectors and Class overly qualified with tag
* #sidebar ul.nav li li a Tag key with 4 descendant selectors and Class overly qualified with tag
* #sidebar ul.nav li li a:hover Tag key with 4 descendant selectors and Class overly qualified with tag
* #sidebar ul.nav li li a span Tag key with 5 descendant selectors and Class overly qualified with tag
* #sidebar li.linkcat li Tag key with 2 descendant selectors and Class overly qualified with tag
* #sidebar2 li.linkcat li Tag key with 2 descendant selectors and Class overly qualified with tag
* #sidebar li.linkcat a Tag key with 2 descendant selectors and Class overly qualified with tag
* #sidebar2 li.linkcat a Tag key with 2 descendant selectors and Class overly qualified with tag
* #sidebar li.linkcat a:hover Tag key with 2 descendant selectors and Class overly qualified with tag
* #sidebar2 li.linkcat a:hover Tag key with 2 descendant selectors and Class overly qualified with tag
* .widget ul#recentcomments li Tag key with 2 descendant selectors and ID overly qualified with tag
* .widget_calendar table#wp-calendar th Tag key with 2 descendant selectors and ID overly qualified with tag
* .widget_calendar table#wp-calendar td Tag key with 2 descendant selectors and ID overly qualified with tag
* .widget_calendar table#wp-calendar thead th Tag key with 3 descendant selectors and ID overly qualified with tag
* .widget_calendar table#wp-calendar tbody td Tag key with 3 descendant selectors and ID overly qualified with tag
* .widget_calendar table#wp-calendar tfoot td Tag key with 3 descendant selectors and ID overly qualified with tag
* .widget_calendar table#wp-calendar caption Tag key with 2 descendant selectors and ID overly qualified with tag
* ul#footer-widgets h4.title a Tag key with 2 descendant selectors and ID overly qualified with tag and Class overly qualified with tag
* ul#footer-widgets li.widget ul Tag key with 2 descendant selectors and ID overly qualified with tag and Class overly qualified with tag
* ul#footer-widgets li.widget li Tag key with 2 descendant selectors and ID overly qualified with tag and Class overly qualified with tag
* ul#footer-widgets li.widget li li Tag key with 3 descendant selectors and ID overly qualified with tag and Class overly qualified with tag
Inefficient rules (good to fix on interactive pages):
* #header h1 a Tag key with 2 descendant selectors
* #header h1 a:hover Tag key with 2 descendant selectors
* #tabs a span Tag key with 2 descendant selectors
* #tabs a span span Tag key with 3 descendant selectors
* #tabs a span Tag key with 2 descendant selectors
* #tabs a:hover span Tag key with 2 descendant selectors
* #tabs li:hover a Tag key with 2 descendant selectors
* #tabs a:hover span Tag key with 2 descendant selectors
* #tabs li:hover a span Tag key with 3 descendant selectors
* #tabs ul ul Tag key with 2 descendant selectors
* #tabs ul ul ul Tag key with 3 descendant selectors
* #tabs ul ul a:hover Tag key with 3 descendant selectors
* #tabs ul ul a:hover Tag key with 3 descendant selectors
* #tabs ul ul a:hover Tag key with 3 descendant selectors
* #tabs ul ul ul Tag key with 3 descendant selectors
* #tabs ul li:hover ul Tag key with 3 descendant selectors
* #tabs ul li:hover Tag key with 2 descendant selectors
* #tabs ul * li:hover Tag key with 3 descendant selectors
* ul.secondary-tabs li Tag key with descendant selector and Class overly qualified with tag
* ul.secondary-tabs a Tag key with descendant selector and Class overly qualified with tag
* ul.secondary-tabs a:hover Tag key with descendant selector and Class overly qualified with tag
* .post .postinfo p Tag key with 2 descendant selectors
* .attachment .postinfo p Tag key with 2 descendant selectors
* ol#comments li Tag key with descendant selector and ID overly qualified with tag
* span.button a Tag key with descendant selector and Class overly qualified with tag
* span.button a:hover Tag key with descendant selector and Class overly qualified with tag
* #sidebar ul li Tag key with 2 descendant selectors
* #sidebar2 ul li Tag key with 2 descendant selectors
* #sidebar .box ul Tag key with 2 descendant selectors
* #sidebar2 .box ul Tag key with 2 descendant selectors
* #sidebar .box ul ul Tag key with 3 descendant selectors
* #sidebar2 .box ul ul Tag key with 3 descendant selectors
* #sidebar .box ul li Tag key with 3 descendant selectors
* #sidebar2 .box ul li Tag key with 3 descendant selectors
* #sidebar .box caption Tag key with 2 descendant selectors
* #sidebar2 .box caption Tag key with 2 descendant selectors
* #layoutcontrol a span Tag key with 2 descendant selectors
* .widget ul ul Tag key with 2 descendant selectors
* .widget.widget_links ul li Tag key with 2 descendant selectors
* .widget.widget_meta ul li Tag key with 2 descendant selectors
* .widget.widget_categories ul li Tag key with 2 descendant selectors
* .widget.widget_archive ul li Tag key with 2 descendant selectors
* .widget.widget_pages ul li Tag key with 2 descendant selectors
* .widget.widget_recent_entries ul li Tag key with 2 descendant selectors
* .widget.widget_links ul li a Tag key with 3 descendant selectors
* .widget.widget_meta ul li a Tag key with 3 descendant selectors
* .widget.widget_categories ul li a Tag key with 3 descendant selectors
* .widget.widget_archive ul li a Tag key with 3 descendant selectors
* .widget.widget_pages ul li a Tag key with 3 descendant selectors
* .widget.widget_recent_entries ul li a Tag key with 3 descendant selectors
* .widget.widget_links ul li a:hover Tag key with 3 descendant selectors
* .widget.widget_meta ul li a:hover Tag key with 3 descendant selectors
* .widget.widget_categories ul li a:hover Tag key with 3 descendant selectors
* .widget.widget_archive ul li a:hover Tag key with 3 descendant selectors
* .widget.widget_pages ul li a:hover Tag key with 3 descendant selectors
* .widget.widget_recent_entries ul li a:hover Tag key with 3 descendant selectors
* #tag_cloud.widget a Tag key with descendant selector and class overly qualified with ID
* .navigation .alignleft img Tag key with 2 descendant selectors
* .navigation .alignright img Tag key with 2 descendant selectors
* .entry .wp-caption img Tag key with 2 descendant selectors
* .attachment .wp-caption img Tag key with 2 descendant selectors
* #commentform #commentdata label Tag key with 2 descendant selectors
* p.postpages a Tag key with descendant selector and Class overly qualified with tag
* p.postpages a:hover Tag key with descendant selector and Class overly qualified with tag
* .profile .avatar img Tag key with 2 descendant selectors
Rules that use the :hover pseudo-selector on non-anchor elements. This can cause performance problems in Internet Explorer versions 7 and 8 when a strict doctype is used.
* table tr:hover
* #tabs li:hover a
* #tabs li:hover a span
* #tabs li:hover ul a span
* #tabs ul li:hover ul ul
* #tabs ul li:hover ul ul ul
* #tabs ul li:hover ul ul ul ul
* #tabs ul li:hover ul
* #tabs ul li li:hover ul
* #tabs ul li li li:hover ul
* #tabs ul li li li li:hover ul
* #tabs ul li:hover
* #tabs ul * li:hover
* #searchtab input.searchbutton:hover
* ul#twitterupdates li.entry:hover
* #fusion-flickr-gallery .thumb:hover
Hi Folks,
I’m trying to set up an alternative printed version for the Fusion theme.
I have set the sidebar display to “none” and have added this:
#page #main-wrap #mid-wrap { right:100%; }
#page #main-wrap #side-wrap { right:0; }
#page #main-wrap #mid {
width:100%; /* main column width */
left:100%; /* same */
}
but am still getting a “mystery sidebar” on the right of the print preview.
Can anyone help?
Cheers,
Ed
P.S. I have zero knowledge of CSS :=)
thankful.
I Just love this template. there is a great improvement from the last one. Great job.
dude, i need to do the exact same things as you can you email me/ reply when you have the correct info thanks
I am using Fusion and really like it. I have a question though. How do I make a menu item at the top a http link to an external location rather than to an internal page? For example I want “Photogrphy” to link to my smugmug site.
Zie: http://txfx.net/wordpress-plugins/page-links-to/
HI! I love your theme.
Is there an easy way to EXCLUDE some top level pages from being displayed as a tab ?
Also… any chance we get a Bulgarian translation any time soon ?
Thanks!
Hello Milenko
I found a small error in your Twitter-Widget: Look at the quotes in the image (the facebook status and the tweet should be the same). Image
Wish you a happy new year!
Best regards
Eloy