Many of us know and read Smashing Magazine. Last week SM had their First Anniversary celebration and Vitaly ask me to do a wordpress theme for this occasion. This was an honor for me and say thanks in a special way to this magazine for the content they provide. I haven’t got so much time (around 4 days) but i came with an idea and did the theme. Vitaly asked me also to detail the creation process of this colorful theme. You will find that information on the release post on Smashing Magazine.

The Smashing theme has a plug-in integrated into the functions.php, so modifying this file you should have some basic knowledge about PHP. The theme is Widget Ready.




120 Responses to “Smashing Theme”
prof kienstra
September 16th, 2007 at 10:43 pm
Permalink this comment
1
I’ve downloaded your theme when it came up on smashing magazines and am using it right now on my blog. I love the design and the layout.. The colors are something i might want to change sometime in the future, but the design is super! Thanks for sharing.
Paulo Sacramento
September 17th, 2007 at 10:11 am
Permalink this comment
2
You guys are getting each time better… no words… this theme is amazing!
Dem
September 17th, 2007 at 4:11 pm
Permalink this comment
3
i love the colors and the design, everything…
the only thing that i’ll probably add, is that every time i add a widget it doesn´t take new colors… i don’t know if i’am beign clear… sorry about my english
keep on with your designs that are very nice
Raj
September 17th, 2007 at 7:46 pm
Permalink this comment
4
Hey Kindly let me know how to change the color of second Sidebar ( Right One). I want the single color there.
Plz help me,
FAS
September 17th, 2007 at 8:10 pm
Permalink this comment
5
Wonderful theme! As others have mentiond, however, I too am having some problems with the sidebar colors. Any suggestions?
Thank you!
prof kienstra
September 17th, 2007 at 11:14 pm
Permalink this comment
6
In wordpress you can change the CSS of the Side bar -> Presentation -> Theme Editor
If you look at the sidebar.php you can see the following
This means you that the design for the sidebar with the Meta information is given in the stylesheet as #SR.
Select the stylesheet.css
Find the following:
.SR { background: url(images/SR.gif) no-repeat right top; width: 400px; float: right; }
Here you can see that the grey sidebar is made by using the SR.gif images as a background. You can change this in the stylesheet.
For example: if you want a white sidebar: use #FFFFFF instead of url(images/SR.gif)
This will probably change some of it, so make a backup of the orignal css file before starting.
Hope this helps out..
Note: this will not only change the sidebar with the information, you’ll still have to change the css code for the sidebar as it goes past the tekst..
diyetler
September 18th, 2007 at 6:03 am
Permalink this comment
7
great theme , fantastic colors :)
thanks…
FAS
September 18th, 2007 at 8:25 pm
Permalink this comment
8
I’m sorry — I’m new at CSS and having some problems. Can you provide more information? :)
fizik
September 26th, 2007 at 7:09 am
Permalink this comment
9
fantastic colors :)
thanks…
Bilal
September 28th, 2007 at 6:20 am
Permalink this comment
10
Good, thanks
david
September 30th, 2007 at 1:49 pm
Permalink this comment
11
I am having problems with the search feature. On the search results, lets say you search and there are 3 pages of results, when you click page 2 it doesn’t pass the s= variable and thus you get the 2nd page of ALL your posts ?
Any ideas ?
david
September 30th, 2007 at 3:40 pm
Permalink this comment
12
fixed
in header change “post” to “Get” :)
all working now.
Elena
September 30th, 2007 at 3:44 pm
Permalink this comment
13
yay… happy that you fix the issue.
david
September 30th, 2007 at 11:50 pm
Permalink this comment
14
It is a great theme it really is - love it !
Mr Happy
October 2nd, 2007 at 8:42 am
Permalink this comment
15
I just put this design on my blog - it rocks. cheers
francisco
October 5th, 2007 at 7:00 am
Permalink this comment
16
grate design! thanks.
I need some help. I have the comments very close to the next post, so its look like they were of the next one. I think the dot line look like the finish of each post. how can I get it better?
Elena
October 5th, 2007 at 7:29 am
Permalink this comment
17
@david
No Idea sorry!.
@francisco
Try explain better, I didn’t understand.
francisco
October 5th, 2007 at 7:39 am
Permalink this comment
18
I would like to enlarge the space between the comments of a post and the title of the next one. if you see mi blog, you will see they are very close and they look like if they were of the same post. sory because of mi english… thanks
Elena
October 5th, 2007 at 7:52 am
Permalink this comment
19
Edit this css line from:
.post {
padding: 0px; position: relative; clear: left;
}
to
.post {
padding: 20px 0px; position: relative; clear: left;
}
francisco
October 5th, 2007 at 8:17 am
Permalink this comment
20
PERFECT !!!! THANKS!!!
david
October 5th, 2007 at 11:04 am
Permalink this comment
21
how do you make your comments standout like that ? it looks amazing!
Tracey
October 5th, 2007 at 5:27 pm
Permalink this comment
22
hey thanks, i love colors for this themes.i am using it on my new book site.check it out.
http://bookdirt.blogspot.com/
Johnson
October 8th, 2007 at 9:30 pm
Permalink this comment
23
Just saw your theme on hoovaloo.com. they made their own custom logo for the top that looks really good.
Silvio
October 9th, 2007 at 1:56 am
Permalink this comment
24
Hi,
i have adapted the theme for dblog, an opensource platform in .asp
Thanks Elena and Smashing!
MB
October 9th, 2007 at 5:19 am
Permalink this comment
25
Hey I love your great script. Can you tell me how I can add a border to any images dispayed, thanks !
Liski
October 10th, 2007 at 2:32 am
Permalink this comment
26
I’m using the theme at http://www.tastitunes.com but when looking at it at work on IE6 the sidebar contents is all the way on the bottom.
Liski
October 10th, 2007 at 4:39 am
Permalink this comment
27
How can I make the far right sidebar wider?
Elena
October 10th, 2007 at 5:09 am
Permalink this comment
28
@david
There is a plugin called Official Comments.
@Silvio
Good to hear that.
@MB
Isn’t a script…The border is in the image.
@Lisky
You can not…the sidebar is fixed. You made some changes in the css or what you placed in the sidebar is larger.
Sachin
October 10th, 2007 at 5:19 am
Permalink this comment
29
Hi, I’ve been using this theme and its really great. I’ve just updated WP and it seems to have header sending problems on this theme. Maybe I’m wrong about this also. Cheers.
Liski
October 10th, 2007 at 4:28 pm
Permalink this comment
30
I haven’t changed anything in the CSS - I’ve tried to slowly remove all the stuff in sidebar but still dropping all the way to the bottom on IE6
Liski
October 12th, 2007 at 5:05 pm
Permalink this comment
31
It’s all working!!
I might have this get this fab Elena to do a special Tasti theme for me!!
tom
October 14th, 2007 at 8:21 am
Permalink this comment
32
Hi
i have problem
After activating and viewing the smashing theme on a brand new wordpress installation, each post and page only displays the first character of that post or page. For example, on the default HELLO WORLD post on a fresh Wordpress install, I only see the “W” in the actual “Welcome to Wordpress” post.
Emrahca
October 15th, 2007 at 11:42 am
Permalink this comment
33
Thank you very much..
Mahmood Al-Yousif
October 15th, 2007 at 11:46 pm
Permalink this comment
34
This is a wonderful theme! Thank you very much.
Elaine, could you assist me a little please? I can’t seem to get it to display the coloured boxes on the left sidebar. I checked and the permissions of all files are okay (664) directories are (775) and ownership is good.
I wonder if it is a plugin that is causing this problem? Have you come across this before?
I’ve installed your excellent them on http://mahmoodsgarden.com
Thanks!
Mahmood Al-Yousif
October 15th, 2007 at 11:50 pm
Permalink this comment
35
Sorry, tried it with the latest versions of Safari and Firefox but problem exists in both. (Mac OSX)
Elena
October 16th, 2007 at 12:57 am
Permalink this comment
36
@tom
Try to upgrade wordpress and make sure you haven’t made any change on the theme.
@Mahmood Al-Yousif
Try to use the original theme boxes. Insert your content into this div.
<div class="Panel PBlue"> …your text here… </div>
Mahmood Al-Yousif
October 16th, 2007 at 2:13 am
Permalink this comment
37
Thanks Elena, I didn’t realise that there are “original theme boxes”! Can you please explain? Are those standard widgets? As I do not see them in the widgets control panel.
Mahmood Al-Yousif
October 16th, 2007 at 2:23 am
Permalink this comment
38
Ah, they’re hard coded.. I just looked into the sidebar.php…
Liski
October 16th, 2007 at 9:18 pm
Permalink this comment
39
How can I put an ad after each post on the main page?
Ginn Wei
October 16th, 2007 at 11:39 pm
Permalink this comment
40
Liski, I think you need to use ad management plugin to do that. Anyway, this is a great theme. Seriously considering it for my blog.
Ginn Wei
October 17th, 2007 at 3:19 am
Permalink this comment
41
I’m also having the same problem as Mahmood Al-Yousif where the coloured boxes in the sidebar disappear when I’m using widget. However, they will reappear once I stop using widget for the side right left bar. Hope you can help.
Ronald Lewis
October 20th, 2007 at 3:18 pm
Permalink this comment
42
Just wanted to send my appreciation to Elena, DD and Smashing for this great theme. I’ve just refreshed my site (http://ronaldlewis.com) with this theme.
Many thanks.
Liski
October 22nd, 2007 at 12:32 am
Permalink this comment
43
Elena,
I’ve emailed you a few times for a qoute!
Grace
November 1st, 2007 at 4:13 am
Permalink this comment
44
Nice theme.. using it in my blog now….
keep up the good work!
Luis
November 3rd, 2007 at 8:22 pm
Permalink this comment
45
Hi Elena, thanks for sharing this awesome theme. It’s really pretty!
I’m having the same problem reported by Liski: the whole sidebar goes to the bottom on IE6. It looks great in Firefox but most of my readers are still using MSFT’s sorry excuse for a web browser so I need to fix the sidebar… any idea?
thanks
LR
John
November 3rd, 2007 at 11:10 pm
Permalink this comment
46
I’m having the same problem Tom mentioned… i looked at the smashingmagazine comments and 2 other people had it too… i’m talking about the “only the first character of the post showing up” issue… i have a clean wordpress (latest version) install and didn’t make changes to the theme…
Luis
November 4th, 2007 at 10:29 am
Permalink this comment
47
Just to add something I discovered as follow up of my previous comment (54). I checked the code in the two latests posts published. The second one had a tag on it. It was only the opening tag so I deleted that and problem solved. Maybe it was just about a misplaced tag??
Melanie
November 5th, 2007 at 10:30 am
Permalink this comment
48
Amazing theme! The color combination is fantastic. Thanks for sharing it!
Elena
November 5th, 2007 at 12:33 pm
Permalink this comment
49
@Ginn Wei
I am working on the improved version of Smashing Theme and there the widget sidebar will work and look ok.
If you have IE6 errors on the sidebar, please make sure the content doesn’t exceed the column size.
Elena
November 5th, 2007 at 12:34 pm
Permalink this comment
50
@John
Please send me an email with this error. I don’t know what it is.
bob
November 5th, 2007 at 9:34 pm
Permalink this comment
51
Hello, is there a way to limit the homepage to show post_excerpt instead of the whole post?
I can’t find it anywhere and the whole posts are shown. :(
Thanks for the great work
Felicia
November 7th, 2007 at 10:48 am
Permalink this comment
52
I love this theme, I’m trying to get it to work on my blog, but unfortunately I’m running into the colored boxes disappearing on the left sidebar again. I haven’t touched the source code. Is there a widget/plugin interfering?
Felicia
November 7th, 2007 at 2:43 pm
Permalink this comment
53
Gah, well I installed the theme with the same untouched files on another blog of mine and the left sidebar works fine. I deactivated all plugins, but the sidebar colors still aren’t showing up. I can’t understand it. Any suggestions would be appreciated, I really would love to use this theme on my blog!
wmwebtr ödüllü seo yarışması
November 11th, 2007 at 11:17 am
Permalink this comment
54
Any suggestions would be appreciated, I really would love to use this theme on my blog!
Ange
November 12th, 2007 at 4:28 am
Permalink this comment
55
I love this theme… have installed it and playing around!!
Thanks :)
Adem
November 12th, 2007 at 10:32 pm
Permalink this comment
56
Having problems with getting whole posts to appear on the main blog - only titles of my posts are showing up! How do I fix this?
Adem
November 12th, 2007 at 10:41 pm
Permalink this comment
57
Actually, even when I click the single link for a blog post no posts actually show up, just the comments :(
Silver
November 13th, 2007 at 4:30 am
Permalink this comment
58
Hi, I’ve got the same problem as John (comment 55) & tom (comment 40), only the first character of any post is showing up. If an image was inserted, then the HTML character “
Silver
November 13th, 2007 at 4:36 am
Permalink this comment
59
Oops sorry, I typed the HTML open bracket & that caused the rest of my comment to disappear.
Basically this problem only happened with WP 2.3.1, I had no problems with WP 2.3 before the upgrade. This was with a clean install of WP 2.3.1 and latest download of Smashing, with no files or settings changed at all.
Any fix would be appreciated as this is a lovely theme & I would really love to use it!
libretto
November 13th, 2007 at 6:49 am
Permalink this comment
60
Hello, traduction en français ici : http://wordpress-tuto.fr/theme-wordpress-smashing-magazine-250
wmwebtr ödüllü seo yarışması
November 14th, 2007 at 1:52 pm
Permalink this comment
61
wmwebtr ödüllü seo yarışması
Anton
November 14th, 2007 at 7:17 pm
Permalink this comment
62
I’ve used it for my new idol site. Like it. Thanks Elena.
wmwebtr ödüllü seo yarışması
November 26th, 2007 at 4:41 pm
Permalink this comment
63
Thank you for the link! It definitely is an interesting paper, and I hope more researchers look into how such a system came about now that we have more details on how it works.
Marie
November 28th, 2007 at 7:17 pm
Permalink this comment
64
Love the theme!
I have created a custom header and I would like to apply it to the Smashing theme, but I am not sure how to edit the theme within WP. (I’ve been w/ Movable type for several years and just recently made the transition).
I tried editing the header.php file and ftp’ing it to the site, but was not successful.
Any suggestions?
Thank you:)
danny
December 15th, 2007 at 10:39 pm
Permalink this comment
65
so i recently adopted this amazing theme for my blog and the only problem i have with it so far is that i want the default category listing to be alphabetical, not by category ID. I’ve tried a number of plugin’s but none seem to fix the problem. If I import my own sidebar widget of categories it screws everything up. Is there something easy I can change that will sort the categories alphabetically?
Thiru
December 18th, 2007 at 12:08 pm
Permalink this comment
66
COOL THEME I LIKE I AM TRYING TO USE BUT CAN YOU TELL ME HOW TO ADD MY OWN LOGO UNDER THE STRIP AT THE TOP HEADERBFG.GIF???
PLZ HELP
james
December 31st, 2007 at 9:17 am
Permalink this comment
67
Any news on a widget ready version? I love the theme and I’m trying to adapt it for use on my site but I need a widget-able version.
Thanks!
Cristian Ventura
January 17th, 2008 at 10:33 am
Permalink this comment
68
I also have the problem of the “first character”/”first letter” in this theme; but i solved it.
The solution is very simple:
This is the original code of “menu.php”
” href=”/”>Home
]+)>%U’,’‘, $pages);
$pages = str_replace(’‘,’‘, $pages);
echo $pages; ?>
if you remplase “menu.php” for this code:
” href=”/”>Home
]+)>%U’,’‘, $pages);
$pages = str_replace(’‘,’‘, $pages);
echo $pages;
unset($pages); ?>
the bug is solved.
Maybe is a Wordpress or even PHP bug… im new in PHP, but this works for me… ;-)
Cristian Ventura
January 17th, 2008 at 10:37 am
Permalink this comment
69
oh, well… i cant post “code blocks” here… but… telling the solution in “easy mode”, put the line: unset($pages); in the first php code block, and remove the second php code block in menu.php, and the problem is solved…
And i forget it… :-)
This is a really good theme. ;-)
M. Yasin ERDOĞAN
January 17th, 2008 at 2:10 pm
Permalink this comment
70
I translated it to Turkish.
http://www.myerdogan.com/wordpress-temasi-smashing-theme
Serdar
January 17th, 2008 at 3:05 pm
Permalink this comment
71
Very beatiful, thank you.
John
January 25th, 2008 at 8:42 pm
Permalink this comment
72
I just noticed something with the theme, I use tags heavily on my site, and for some reason when you view a tag, it doesn’t paginate any posts? It only shows the top ten posts for that tag. Anyone else having this issue?
darran Low
February 4th, 2008 at 3:48 pm
Permalink this comment
73
i am having an issue with the page issue, i don’t know why it is not recognizing the pagingate function, elena, do you have a solution?
Qmega
February 5th, 2008 at 11:03 am
Permalink this comment
74
Great theme. I changed a bit this theme using Photoshop … take a look http://www.aaaod.com
chazzuka
February 6th, 2008 at 9:27 am
Permalink this comment
75
I am experienced a blank content when using this theme
dada
February 18th, 2008 at 3:02 am
Permalink this comment
76
hello elena,
as with everyone, i fell in love with your design. i just want to know how can i put a custom logo in the header, just like in the gossip city theme.
thanks and more power.
Manu
March 6th, 2008 at 12:49 am
Permalink this comment
77
Elena,
How can I put a custom logo in the header…like the way it is in gossip city?
One more thing is that the first sidebar doesn’t have the colors that I saw in the demo……..it’s all in grey……please check out http://www.pointlesslycool.org and help me out with this! I need colors like it is in your smashing theme demo.
Thanks in advance. And by the way, the theme is fantastic! :)
Manu.
Manu
March 6th, 2008 at 1:03 am
Permalink this comment
78
Hi Elena,
I just found that when i keep the left sidebar to default, it is doing fine. But when I drag and drop something to it, the whole sidebar changes to grey……..what do I do now?
Manu.
backlink almak
April 3rd, 2008 at 1:59 pm
Permalink this comment
79
great theme , nice colors thanks…
benny
April 12th, 2008 at 4:50 am
Permalink this comment
80
It’s very nice theme, which I used now,
But I really do not know how to make the avatar works in wp 2.5.
Mohamad Abbara
April 14th, 2008 at 9:40 am
Permalink this comment
81
Hi i just want to say nice theme Elena, right now i am using it on my blog. Thank you for your creation
Niels
May 2nd, 2008 at 9:30 am
Permalink this comment
82
Hi, thanks for the beautiful template.
One question though, I get two errors when I try to validate the page with the w3c validator, could you check this?
Beena
May 14th, 2008 at 3:59 am
Permalink this comment
83
It would be really nice if this is widget-ready…
amer
May 18th, 2008 at 11:30 pm
Permalink this comment
84
hi,
i love it soo much thx :)
i adore how its done. its simple & clean. i use it for my coming 1st website. MonstersCube.com.
charmian
May 24th, 2008 at 5:04 pm
Permalink this comment
85
Hey, I really love this theme! It’s very beautiful.
However, it seems to have a conflict with the WP Thread Comments plugin. When you try to reply to a comment in Ajax, the “submit post” button disappears. I think it may be something with the CSS.
erme2
July 19th, 2008 at 7:25 am
Permalink this comment
86
Hi! I translated it in italian
http://www.rmsoft.net/?p=62
Fong
July 23rd, 2008 at 8:40 am
Permalink this comment
87
Hi there. Is there any way to make the colour boxes on the left sidebar show? I saw them working at http://www.pointlesslycool.org but there’s only one colour. Thanks for the beautiful theme and we would really appreciate your help.
Fernando Souza
July 29th, 2008 at 9:49 am
Permalink this comment
88
Beautiful :)
prakash
October 13th, 2008 at 1:54 pm
Permalink this comment
89
it’s doesn’t seems to work for IMAGE CAPTION on wordpress 2.6.2
is there any solution for it?
[caption id="" align="alignleft" width="158" caption="Test 1"]
[/caption]
Prakash Thapa
October 21st, 2008 at 9:33 am
Permalink this comment
90
gravator icon doesn’t displays on comments ??
what is the problem do I need to use another plugins for the same.
Trackbacks/Pings
Leave a reply