Categories

Close

Design Lunatic

Shaken Grid WordPress Theme Review

Today, I’ll be reviewing a wordpress theme called Shaken Grid, from Shaken and Stirred Themes. Here’s a link to their demo: Shaken Grid.

I’d like to start off by saying: For a free theme, this is really nicely made. There could be some improvements, but nonetheless it is a pretty great theme.

The Header

When you first look at the top section of the site, you might think that the navbar is using Bebas Neue. Believe it or not, it is actually using the font “League Gothic”.

The logo text is pure eyecandy. When you hover over it, it has the perfect shade of blue for that spot, and I can’t think of a better way to do it. Very nicely made logo.

Another thing: when you hover over one of the nav items, you will notice the text “jerk” a little. This is because the theme is using css animations, which aren’t perfect yet. There is a simple way to overcome this: just give the non-hovered state a text-shadow the color of the background, so it is invisible. That way, the CSS doesn’t have to apply the text shadow to the text from nothing. All it has to do is just change the color, which is much easier. The post boxes do the same thing.

The Main Content

The homepage uses jQuery Masonry, a popular plugin that “Arranges elements vertically, positioning each element in the next open spot in the grid.” As you might notice, it looks similar to my theme, except that I’m using a slightly different version of jQuery Masonry.

Another great thing about the masonry plugin is that it rearranges the “masoned” elements when the parent container is too small. If you resize your browser, you’ll notice. This does bring with it a drawback; it is difficult to center the container with the “masoned” elements. It is possible, and my theme is an example of this, but it is slightly harder to implement than just a simple “margin: 0 auto”.

When you hover over a post image, you’ll notice that a plus sign in the top right corner appears. This opens a nice-looking modal window that shows the post image in greater detail. A nice touch, but I expected to be redirected to the actual post.

Kind of bad things…

In order to control how much text is shown in each post preview, you have to use WordPress’s “more tag”, which splits the post. The theme stops displaying the preview as soon as it reaches the “more tag”.

I personally don’t use this “more tag”, so I didn’t really like the fact that this theme uses it. In my opinion, it would make more sense for the theme to just take the post excerpt. For the people that do use the “more tag”, I suppose it would be better.

Also, I think that the link styling could seriously use some work. All they did was change the color from the default ugly blue that we are all tired of to a slightly lighter blue. That’s it; they didn’t even give it a hover state!

When you go to a single post page, you will notice an ugly search box in the sidebar. That search box does not look very pleasant. Once again, this could use some serious styling…

Conclusion

Despite all the bad things that I described earlier, this theme is a really good free theme. It could use some work, yes, but if you are really planning to use it, check out the premium version.

Good job, Shaken and Stirred. This is a nice free theme.

  • http://presumptionmarketplace.info Santos Gonder

    How to use mozila firefox seting from an other windows?

  • mark

    Hi there,

    I try to center the shaken grid theme (premium version), but indeed, as you mentioned, a simple margin: 0 auto won’t do. Can you help me out with this?

  • marcin

    I’m also trying to center divs but it’s too hard for me. Anyone?

    • Alexandre Smirnov

      Here’s what you can do:  apply a fixed with to the “#grid” element such as 1000px, etc., whatever you want the width to be.  Then, apply the usual “margin: 0 auto;” to center it.  Same exact thing with the “#header” element: fixed width, and “margin: 0 auto;”.

      • marcin

        Thanks man! It works perfectly!

        • Alexandre Smirnov

          Sure, glad to help.

    • Alexandre Smirnov

      Here’s what you can do:  apply a fixed with to the “#grid” element such as 1000px, etc., whatever you want the width to be.  Then, apply the usual “margin: 0 auto;” to center it.  Same exact thing with the “#header” element: fixed width, and “margin: 0 auto;”.

      • marcin

        Thanks man! It works perfectly!

  • http://twitter.com/phpera phpera.com

    good