Free HTML 4.01/HTML5 WordPress Theme: Spectacular

Advertisement

Today we release Spectacular, a free WordPress theme that aims to provide a warm and pleasurable atmosphere for personal musings and ramblings. The theme comes in two flavors: HTML 4.01 and HTML5. Also, both German and English versions of the theme are included in the download package. The theme is cross-browser compatible and supports Opera, Safari, Chrome, IE7+, and FF. Support for IE6 is not available, though the theme works in IE6, too.

The theme was commissioned by Smashing Magazine and designed by Maleika Esther Attawel1 exclusively for Smashing Magazine. As usual, the theme is absolutely free to use in private and commerical projects.

2

Download the theme for free!

The theme is released under GPL. You can use it for all your projects for free and without any restrictions. Please link to this article if you want to spread the word. You may modify the theme as you wish.

Screenshot3

Screenshots

spectacular_37
Front page area (large preview)8

spectacular_39
Table and content (large preview)10

spectacular_311
Archives page (large preview)12

spectacular_313
Post page (large preview)14

spectacular_315
Comment area (large preview)16

spectacular_317
Front page area (large preview)18

spectacular_319
Comments view (large preview)20

spectacular_521
Blog post (large preview)22

Thank you, Maleika. We appreciate your work and your good intentions.

Feel free to suggest your ideas for the freebies you’d like to see on Smashing Magazine in the comments area below.

Footnotes

  1. 1 http://rockatee.com/
  2. 2 http://dev.rockatee.com/wp/
  3. 3 http://dev.rockatee.com/wp/
  4. 4 http://dev.rockatee.com/wp/
  5. 5 http://www.smashingmagazine.com/wp-content/uploads/2011/01/large-version.jpg
  6. 6 http://www.smashingmagazine.com/wp-content/uploads/uploader/images/spectacular/spectacular.zip
  7. 7 http://www.smashingmagazine.com/wp-content/uploads/2010/12/spec10-small.jpg
  8. 8 http://www.smashingmagazine.com/wp-content/uploads/2010/12/spec10.jpg
  9. 9 http://www.smashingmagazine.com/wp-content/uploads/2010/12/spec2.jpg
  10. 10 http://www.smashingmagazine.com/wp-content/uploads/2010/12/spec2.jpg
  11. 11 http://www.smashingmagazine.com/wp-content/uploads/2010/12/spec5.jpg
  12. 12 http://www.smashingmagazine.com/wp-content/uploads/2010/12/spec5.jpg
  13. 13 http://www.smashingmagazine.com/wp-content/uploads/2010/12/spec7.jpg
  14. 14 http://www.smashingmagazine.com/wp-content/uploads/2010/12/spec7.jpg
  15. 15 http://www.smashingmagazine.com/wp-content/uploads/2010/12/spec8.jpg
  16. 16 http://www.smashingmagazine.com/wp-content/uploads/2010/12/spec8.jpg
  17. 17 http://www.smashingmagazine.com/wp-content/uploads/2010/12/spec9-main.jpg
  18. 18 http://www.smashingmagazine.com/wp-content/uploads/2010/12/spec9-main.jpg
  19. 19 http://www.smashingmagazine.com/wp-content/uploads/2010/12/spec-comments.jpg
  20. 20 http://www.smashingmagazine.com/wp-content/uploads/2010/12/spec-comments.jpg
  21. 21 http://www.smashingmagazine.com/wp-content/uploads/2011/01/working1.jpg
  22. 22 http://www.smashingmagazine.com/wp-content/uploads/2011/01/working1.jpg

↑ Back to top Tweet itShare on Facebook

The Smashing team loves high-quality content and cares about the little details. Through our online articles, Smashing Books, eBooks as well as Smashing Conferences, we are committed to stimulating creativity and strengthening the web design community’s creative forces.

Advertisement
  1. 1

    It’s amazing theme, but i can’t load file after 93% (opera, ie, download master)… :(

    0
    • 52

      Maleika Esther Attawel

      January 14, 2011 7:04 am

      Hello Malmut,

      I don’t think I understand what you mean with load? Do you have problems downloading the theme or uploading it?

      0
  2. 103

    Thank you, Maleika… when upload theme something else… please comment this… :(

    0
  3. 154

    What beautiful colors and texture. Very nice job!

    0
  4. 205

    Wow, very nice theme! Very nice work. Thanks so much for sharing.
    Only thing that jumps out, the font and readability is not good. I’d change the font and increase it’s size.

    0
  5. 256

    hella sexy!

    0
  6. 307

    Leandro Caracciolo

    January 13, 2011 9:58 am

    Very nice job! Beautiful design!

    0
  7. 358

    I’m having some challenges getting the featured post excerpt to render correctly on the front page. It seems to be floating off and above the title of the post. I’ve combed the code, and can’t quite figure it out. Any ideas?

    http://www.bradpilcher.com/

    P.S. I’ve stripped out the content while I work on the implementation and design, so it’s all just dummy stuff, but that shouldn’t effect the template.

    0
  8. 511

    Nevermind. I sorted out the issue. Now on to tweaking the source graphics and overall look/aesthetics. Fantastic work, however. Really solid all around template. And if I could take a moment, may I also complement you on the installation and setup instructions that came with it. Much more detailed and useful than the normal instructions that come with most templates.

    0
    • 562

      Maleika Esther Attawel

      January 14, 2011 4:38 am

      Duh, I just read it after responding to your first comment.

      Thanks, Brad! :)

      0
  9. 613

    Have I totally lost my mind or are the .psd files in both the Windows and Mac folders not actually .psd files?

    BTW: As many have said just a flat out stunning theme all around!

    0
    • 664

      Maleika Esther Attawel

      January 14, 2011 4:37 am

      Tommy, that is a normal layered .psd file. Let me know what issues you have opening the file and I’ll try to help.

      0
      • 715

        Never seen this before Maleika. Even downloaded the installer multiple times. On a Windows machine and the file shows up as a Windows Theme File. A screen cap is here:

        http://webranding.org/images/theme_file.png

        Any chance you could give me a direct link to the .psd file so I could try that. I just love this theme and would like to make some tweaks and use it :). Also, thanks for your help.

        0
  10. 817

    Mind blowing ….. :)

    0
  11. 868

    This is cool. Must take ages to get you head around stuff like this. Well written!
    mojowebdesign.com.au

    0
  12. 919

    I must be crazy – there is a “Windows Theme File” in the PSD folder and no PSD to be found.

    Also, where is the “Feature Image” panel for the homepage post thumbnails? Is it somewhere in the Appearance panel?

    Thanks, I really hope I can get this to work!

    0
    • 970

      Maleika Esther Attawel

      January 14, 2011 1:51 pm

      Hi Mandy,

      the .psd file is included. I’m not sure why it doesn’t work. :/ I’ll have to look into that.

      The featured image panel is located on the right side (below the “Post Tags” panel) in your Edit Posts screen.

      Let me know if that helps,

      Maleika

      0
    • 1021

      Maleika Esther Attawel

      January 15, 2011 10:08 am

      Mandy, please download the PSD file from here:

      http://rockatee.com/temp/spectacular_theme.psd.zip

      There seems to be a conflict with my filename and Windows. The issue will be resolved in the next update.

      Thanks,
      Maleika

      0
  13. 1123

    @Maleika: Just wanted to say that this is a beautiful theme! :)

    p/s: Also – I know Firefox 2.0.x series is out of date, but just to let you know that the League Gothic font doesn’t seem to display in this browser for some reaso, so the default font type is used (which is quite large). This means that e.g. the title text stretches across the header, rather than just occupying the left space and the navigation menu at the top is also larger than in the demo.

    0
    • 1174

      Maleika Esther Attawel

      January 31, 2011 11:07 am

      Yes, it isn’t taken FF2 into account. Will think of supporting FF2 in the next update.

      Thanks,

      Maleika

      0
  14. 1225

    This is an AMAZING theme. Thank you.

    1
  15. 1276

    Oh man, gorgeous work guys! I’m definitely about to try this one on my blog, thank you!!!

    0
  16. 1327

    that reddish color looks very annoying.. it’s better if it would be grey or white…

    0
    • 1378

      Maleika Esther Attawel

      February 2, 2011 12:16 am

      The PSD file is included (download from comments), so you can change the colors to your heart’s content. :)

      0
  17. 1429

    People behind this awesome template must be so generous. Thanks for being so helpful and kind guys. This serves as an inspiration for beginners to design even better. Got to grab this one and experiment it.

    Again, thanks!!

    0
  18. 1480

    This is a super sweet theme — nice work. I really like the bones and the design is so retro. Beautiful. I started noodling with it to fit it with a drop-down menu. Using the Menu widget I created a sub menu and couldn’t get it to work.

    Just a brief description of what I did. Created a new menu. I added all the appropriate pages and organized them. Added the menu to the primary location. Nada. It did however produce a gap between the parent page and the next link in the menu. Weird right? Did I break it or is there a drop-down menu cooked into the theme?

    Thankx!

    0
    • 1531

      Maleika Esther Attawel

      January 31, 2011 11:08 am

      Hi Joem,

      there’s no pre-configured dropdown menu installed. But you should be able to do that manually. The theme won’t break, if you adjust the CSS accordingly, though I don’t know what CSS you’re using for the dropdown, but the CSS issues should be easily rectified. :)

      Maleika

      0
  19. 1582

    @Maleika – this theme is lovely all over. Thankyou many times over. I’ve installed it on a site, but made one judicious change to the top image to make it more relevant to the content, but I hope it doesn’t mess with the whole aesthetic… Hope you approve..
    I’ve also lightened the background gifs to make it more readable.

    One problem I’ve come up against is that the category pages previous/next navigation don’t link to older indexed pages within the category – just specific posts. I’m going to try to be less of an idiot and work it out myself, but just thought I’d highlight it…

    Again, thanks to you, and to Smashing, for this fantastic theme.

    0
  20. 1684

    Maleika,

    Another beautiful design! Again I’m floored by your work!

    It looks great in Firefox and Opera using Linux and also FF, Opera and Safari in Win 7…IE8 is a bit problematic (when ISN’T it?) in that the blue shaded area in the featured image doesn’t show nor the graphic behind the category names in the footer. But since I rarely use either IE or Windows, it’s not a big deal to me. And I haven’t seen any problems with the readability either.

    0
    • 1735

      Maleika Esther Attawel

      January 31, 2011 11:14 am

      Hi Mina,

      hmm…shows for me in IE8. I have to investigate this further as it’s meant to support IE8. Thanks!

      0
  21. 1786

    Theme is awesome but typography is not so good and take more than enough time to load.

    0
  22. 1837

    Amazing, retro theme. Love it. Using it without a hitch so far…

    Question for Maleika: Where is the one-column page template?? (no sidebar) – I saw this in the description on the Appearance Page for this lovely piece of work but it isn’t showing up in my page options….

    Ever so grateful –

    Pamela

    0
    • 1888

      Maleika Esther Attawel

      January 31, 2011 11:15 am

      Hi Tari,

      the theme currently doesn’t have a one-page-column. But great thinking. I might add one in the next update, so that it is closer to the options you have in the twentyten theme.

      Maleika

      0
    • 1939

      Maleika Esther Attawel

      February 2, 2011 12:18 am

      Pamela, I meant to address you rather than Tari below. Sorry about that!

      0
  23. 1990

    I’m having the same trouble with the initial appearance of the index page being incomplete. I uploaded the spectacular PSD separately from the HTML4 install files, but not sure I copied it in the right folder, since I’m a WP beginner.

    Can you help?

    0
    • 2041

      Maleika Esther Attawel

      January 31, 2011 11:17 am

      Hi Tari,

      don’t upload the psd file. It’s just there for reference. If you follow the instructions in the readme file, add some basic content (posts, pages, featured post, images, etc.) it should all come together. The naked theme without content will always look broken because many widths and heights aren’t fixed but extend with content.

      0
  24. 2092

    @Maleika: Thx for this swift wordpress theme!

    One thing I spotted though is that the background of the introduction section (#introduction) is slightly too deep. The margin-top should be set to 1px to fit it. Maybe you could include this fix also in the next update.. ;)

    Thx again for this beautiful theme!

    0
    • 2143

      Maleika Esther Attawel

      February 1, 2011 6:22 pm

      Sebsemilla, thanks for spotting that! Yes, fix will be added. The updated theme will follow very shortly!

      Best,
      Maleika

      0
  25. 2194

    I can’t download the theme..

    0
  26. 2245

    May be the download’s link is broken … the download process can’t be completed ….

    2
  27. 2296

    Very nice theme. Great work :)

    0
  28. 2347

    it’s looks nice!

    0
  29. 2398

    Beautiful theme..would love to check it out but I can’t open the zip archive, unzip error says ‘End-of-central-directory signature not found.’ :(

    0
  30. 2449

    Beautiful theme..I like it..
    but, no picture alignment (post – html5)

    0
  31. 2500

    would love to check this out – download stops after about 4mb. any ideas why?

    0
  32. 2551

    It’s an amazing theme, i love it :)

    But there seems to be a problem with adding a button more in excerpt body of posts. On the index page there are shown all posts in their actual posts lenght where it should be only 30 characters with … & more button, any ideas why is that happening?!

    0
  33. 2602

    I’m always impressed by the quality of work I see at SM.
    Thanks!

    0
  34. 2653

    Great theme! One question, and I would love to hear others’ thoughts on this: If a magazine were to develop a new website in HTML5, would this language be compatible (and readable) on mobile devices such as smartphones and tablets?

    I work at a small magazine where we are trying to get involved with the tablet, and we can’t decide what to do with our existing (read: obsolete) website. It seems to me that if we found the right programming language for the website, we wouldn’t need to do a tablet app. We could offer a pleasant reading experience on almost any platform simply by having an HTML5 website that’s mobile-optimized or has a mobile plugin. This theme sure looks like a solution!

    Just wondering. What do you think?

    0
  35. 2704

    This might be a crazy question but can anyone tell me what the pattern on the Layer 25 in the psd is? I’ve seen it before and thought that’s nice and never known how to describe it or re-create it.

    Awesome Theme as well!

    0
  36. 2755

    Hmmm… The header text widget does not work (html 5). I does not display.

    Does anyone have a fix?

    Thanks! :)

    0
  37. 2806

    Using html5 theme, if there is a space in the name of the blog, it will not display the blog name (only the first word) and will not display the blog tagline.

    Please can someone post a fix? (I’ve been trying with no luck).

    :(

    1
  38. 2857

    Oh my goodness… and the top navigation menu therefore will also not appear.

    The theme (html5) looks nice, but fails to work properly when using WordPress 3.1

    (I’ve not tried the html 4 version yet)

    1
  39. 2908

    Sorry peoples, I really like this theme, it well… Smashingly good.

    Unfortunately it’s a disaster zone when using WordPress 3.1x

    html5 version has a couple problems (1 is major) and the html4 version is a complete mess (in WP3.1x).

    I wish this theme would work properly with the latest WordPress. :(

    1
  40. 2959

    Nice theme idea, too bad it does not work.

    But this theme is severely broken. Maybe the developer should check code, functionality before releasing it. The demo works, I’ve tried this theme installed on 3 different physical servers (using WP 3.1) and there seems to be div issues as well as others. I’ll bet that the code used in the demo and the one available for download are different. (At least I can surmise as much from the source code of displayed pages).

    Bottom line? Nice looking idea, but it’s not well implemented. Maybe the dev can revisit issues and clean up the code (who develops for IE6 for example? – Not many since Microsoft actively retired it). Just an opinion, (and yes I expect to get some fire for it) but looking at the code, it seems very much that the dev is not a professional, rather a hobbyist?

    This theme is not cross-browser or cross-platform friendly.

    1
  41. 3010

    I like this theme.

    Looking at the comments above , I tested this theme in different versions of WordPress. Both HTML4 and HTML5 versions work in WordPress 3.0.5.

    After version 3.0.5 the themes break (WordPress 3.1 and higher).

    I’ve not taken the time yet to explore why, but suspect that there might be a conflict between the admin bar (introduced in WP3.1) CSS and the style.css? Maybe an issue with post formats (also introduced in WP3.1), I don’t know.

    Just my 2 cents worth…

    1
  42. 3061

    Very nice looking theme and I’ve used it on a client site, but could not get Adsense to display anywhere until I took out the script line in the header: <script type="text/javascript" src="/scripts/plugins.js?v=1″>
    Now adsense displays fine, and I’m really having a hard time finding what removing that script has affected.

    0
  43. 3112

    Amazing theme, thank you so much :)

    0
  44. 3163

    Great looking theme, but Roger and Riger99 are speaking the truth. Serious issues with WP3.1…too bad the dev disappeared from here after Feb. 1st.

    0
  45. 3214

    Amazing theme, thank you so much.

    I have a problem with the menu. Not in the top, appears behind the logo (http://www.conmasarte.es/verdes2/). Do you know what could be the problem?
    Thank you very much.

    0
  46. 3265

    Great theme, I’m new to WordPress 1.3.2 and as many of you, I noticed the HTML5 version wasn’t looking right (menu doesn’t appear and the title of the page doesn’t show fully).

    This is how I fixed it, before I get flamed I’m not saying this is the best way. To fix it you must edit the style.css file in a text editor such as NotePad.

    1) Open the style.css file located at /wp-content/themes/spectacular/style.css
    2) In the ‘header section’ inside the curly braces, add ‘position:relative;’
    3) In the ‘#site-name’ inside the curly braces, change ‘width:460px;’ to ‘width:860px;’ and change ‘position:relative;’ to ‘position:absolute;’

    I also noticed that the width of the top menu buttons are as wide as their children (even though the children are not displayed). If your main pages have no children pages than you don’t need to worry about this.

    So to fix this you can do:
    1) Open the header.php file located at /wp-content/themes/spectacular/header.php
    2) Go to line 70 and change ‘wp_list_pages(‘title_li=’)’ to this ‘wp_list_pages(‘title_li=&depth=1′)’

    I have tested it works in IE7, IE8, Firefox 4, Chrome, Safari.

    0
  47. 3316

    @Jose
    I’m having the same problem, the header navigation menu (built with wp_list_pages) it is displaying in the middle of the header.
    How did you solve it?

    0
  48. 3367

    @anairamzap
    I only used four-page menu.

    0
  49. 3418

    It’s very beautiful theme,but doesn’t work…i change everything.permissions…but the same:”spectacular_theme_en Stylesheet is missing.”

    0
  50. 3469

    It’s broken in WP 3.1.2 :( It’s a new installation. Firefox 4 and Safari aren’t happy with it. I tried the fix Sinbad suggested but unfortunately it had no effect on my installation.

    0

↑ Back to top