New WordPress Theme: Sans–serif Racer

Logo: Sans-serif Racer WordPress theme

Update (August 26, 2013): This theme is no longer being updated and it is not compatible with latest version of WordPress.

Update (October 15, 2008): Sans-serif Racer has been updated with improved CSS (and fixed IE7-only bug), enhanced design and support for the default image alignment classes. Get it here. If you are updating, be sure to back-up the old theme files.

While tweaking the Times Racer theme which is currently used in this blog, I was fascinated by how the sans-serif typeface and the aligned positioning of different elements made it look really harmonic and solid.

After hours of PHP, HTML and CSS trickery, the new theme was named Sans-serif Racer and ready for the release. It features unique border elements, light background shading and, similarly to Agneka Simple, one base color which can be easily adjusted.

43 Comments

  1. Andrew says:

    This theme is really great, its simple but I like it alot because it is that way i use it as a music blog, come andsee how it works for me. Thanks alot =]

  2. Andrew says:

    Hello again, I have a small problem hope you can help me. In firefox the sidebar looks fine but in Internet explorer my sidebar is at the bottom of the page on my blog. Can you help me please.

    And please email me the reply if you dont mind cheers.

  3. Kaspars D. says:

    Hello, Andrew. I just sent you an email.

    Problem seems to be the invalid HTML source code where the title tag is at the very beginning of the HTML output.

  4. TaeWoo says:

    Wow, that’s the best theme I’ve seen in ages!

    Thanks a lot!

    Does it support gravatars?

  5. Kaspars says:

    Hello, TaeWoo. Great to hear that you like it.

    This theme does support gravatars. I suggest you take a look at Easy Gravatar plugin, and place the gravatars in the content of comment (set it under the Easy Gravatar options in your WordPress dashboard).

  6. guru says:

    this theme is GREAT and minimal for designers. clean and clear, great way to move around all of the sidebar widgets!!

  7. Joan says:

    I dont see the sidebar on the main index or single pages..i have WP 2.3

  8. Kaspars says:

    Hi, Joan. Could you please post a link to the blog, where you are trying out the theme?

    One of the possible reasons (of which I can think right now) is the widgets placement. Did you place them like I suggested in this screenshot? Please let me know, and I will try to help.

  9. Joan says:

    jajaja, you were right, after i put this comment i found out about the widgets. The reason is i’ve never used widgets before… thanx

  10. Kaspars says:

    Great that it worked. You are welcome!

  11. Joan says:

    Sorry to ask you again…i wanna increase the size of the post (article) space. something like http://www.smashingmagazine.com/

    Or at least make the content part wider than the standard size

  12. Kaspars says:

    Joan, there are several ways to do it: (a) change width of the whole content (#soul identifier) in the style.css file under Presentation > Theme Editor. (b) change the width of content-main column and content-sub only. Detailed instructions are available at this Sans-serif Racer customization tutorial.

  13. Kaspars says:

    In style.css you have to find the line (near the top) where it says #soul { width:86%; max-width:78.2em; margin:0 auto; position:relative; left:-3%; } and change 86% to 96% or any other value you desire.

  14. Joan says:

    Hi Kaspars, thanx for the help!!

    For example you can check what i am doing here http://ccexportaciones.com/joan/

    I want to know how to put the the list_pages under the main logo and get the sidebar up to be right next to the logo?
    If you want let’s talk about it by email…i am going to use your theme on a make money online blog so i really need help

  15. Kaspars says:

    Joan, the changes you require involve altering both HTML and CSS of the theme, which is a lot of work. I sent you an e-mail, which suggests the alterations that would be needed.

  16. portlak says:

    hi
    i have a problem with your theme. please read something on internet explorer 5 or higher. there isn’t any problem with index page but in singe i think something is wrong in style. thanks for your help.

  17. Kaspars says:

    Portlak, I have tested themes in IE 6 and above, but unfortunately have decided not to add additional tweaks for IE 5 or similar browsers that do not comply with the web standards.

    The problem seems to be with comment floating and clearing. I will try to look and find a possible solution.

  18. Hi Kaspars,
    Thank you for the great themes, I really appreciate them all! However, I am unfortunately experiencing some problems in Safari, with image floating.
    The following links will help me explain the problem better.

    Firefox: http://img118.imageshack.us/img118/8329/bild3wc3.png
    Safari: http://img339.imageshack.us/img339/8476/bild4cx5.png

    So as you can also see in the screenshot, the attached image cannot be left-floated if they are too big. I hope there will be a solution for this.
    Thank you again!

  19. Kaspars says:

    Muhammet, this seems not to be the bug of the theme. In a situation when the image is way too wide, safari behaves differently than firefox. If you would place a smaller image, you would see that both safari and firefox float it in exactly the same way.

    If you really want to place such wide images in your posts, I suggest you use the available CSS classes described at the Sans-serif theme wiki page.

    This is what I would use:

    <div class="image wide"><img src="" ... /><p>Caption of your image</p></div>

    Update: Please see the article above for a demonstration of an extra wide image inside a post. To have the same auto “cropping” effect you will have to update a single line in your style.php CSS file (Add overflow:hidden; to div.wide). See the theme’s changelog for details.

  20. Kaspars, the second solution you’ve provided ist really great! Thank you very much for your reply, and keep up the good work!

  21. kM says:

    Hi Kaspars,

    thanks the great, great unique wp-theme.

    we are a hungarian youth and cultural civil organism in kecskemét.

    chek our site in: http://vakum.hu

  22. Eiso says:

    Dear Kaspar,

    Your theme does no longer seem to work in IE7 on the single post page. Is there a posibility you could provide a fix, it would be greatly appreciated.

    Best regards,

    Eiso

  23. iRedactor says:

    Great theme, but, in IE 7 — comments is bad (sorry for my english).

  24. tchauradar says:

    Great theme!

    one quick question:

    how can i get rid of one specific page, not all?

    any help would be appreciated.

    Thanks

    Ovande

  25. jens says:

    Hi there,

    great theme, but I got a problem some readers of the blog mentioned to me, because they use IE7!? The commentcs are laying on the text.. especially when they sent a comment.

    any ideas ? Thanks for the great work!!

  26. Kaspars says:

    jens, I just sent you an email.

    Sans-serif Racer theme has been updated with an improved look, support for WordPress image alignment options, dedicated attachment page and other minor tweaks. I’ll update this post to include the new .zip file.

  27. Karla says:

    I’m having problems with my side widgets.

    This is my blog: http://lissamonet.com/blog/

    It was working perfectly fine a second ago and they were lined up to the side. Now u have to scroll all the way at the bottom to get them. Do you have a fix for this ? Thanks.

    P.S. I didn’t touch any of the index files and the widgets are all under “sidebar-default”.

    Thanks.

  28. Karla says:

    Also, for some odd reason, it shows up in all my posts except for http://lissamonet.com/blog/?p=220

  29. Karla says:

    Nevermind, i fixed it! lol

  30. Tom says:

    Love the theme.

    But, my blog has a lot of image placements in it, and has been running for a while now.

    The way your theme handles all images seem to be to wrap the text around them.

    This makes the content with images look awful. (Not your fault of course). But I am aware I could go through all my posts and edit each image to center etc. But this would take a good long while.

    Is there a simple way to disable the blog automatically handling the alignment and wrapping of the images?

    I have tried to strip out the css that deals with it but with no effect.

    Best, Tom

    • Kaspars says:

      Tom, what is the URL of your blog?

      The reason I made all images float right by default was because I tend to use image thumbnails more often than full size images.

      Try adding something like .post img { float:none; margin:1em 0; } at the beginning of style.css.

  31. Tom says:

    You Sir are a star!

    I can be found at http://www.tjhole.com/blog

  32. FameGadget says:

    this theme not compatible with WP 2.7

  33. Kaspars says:

    What exactly is not working, FameGadget? Have you tried the latest version of the theme?

  34. Kelsey says:

    When I try to go to the page with the updated theme, I get a “page not found”. Where can I get the new version?

  35. Kelsey says:

    I tend to align images in my blog in many different ways – centered, right, left, etc. I use the visual editor, and it has worked fine on all my previous themes, but on yours, the CSS seems to override it, only allowing right-aligned images. Is there a way to remove the image styling so that post ends up looking like the html that the visual editor generates? I tried stripping all the div-image code, but it did nothing, and when I tried the .post img { float:none; margin:1em 0; } code, it just made everything have no alignment. Help?

  36. Denis says:

    Hi,

    First of all, as many have mentioned, this is a great theme. Really like it want to use this for a new site.

    One question I have: Are there any plans to update this theme to use the new comment features such as threading and paging?

    Maybe I’m wrong but as far as I can see this is not included currently, is it?

    I have looked at this here:
    http://codex.wordpress.org/Migrating_Plugins_and_Themes_to_2.7/Enhanced_Comment_Display

    but couldn’t figure out yet what exactly to change.

  37. Denis says:

    uuups, forgot one thing: “threading, paging and also gravatars”. Those 3 things I wonder if they will come.

  38. Eltoro says:

    I’m a little confused by the cc license. It says “noncommercial”. I plan to use the theme for a logo design website where I would be offering logos for money. Can I do that using this theme?

Leave a Reply to Denis Cancel reply