- WordPress Tutorials
- Artisteer Tips
- Add Button Class to Widget
- Add Style to Text Widget
- Add a Sidebar in the Header
- Create Custom Post Header
- Create Unique Page Template
- Create Secondary Menu
- Create Styled Donate Button
- Create Widget Style – Part 1
- Create Widget Style – Part 2
- Hide Category Titles
- Styling Featured Image
- Styling Sheet Borders
- Using Theme Options
- Design Tips and Tricks
- Recent Projects
Sneak Preview of BookRoom Reviews
I’ve been busily working on a site redesign and reorganization for BookRoom Reviews. Here’s a little preview of what it will look like when it’s finished. I still have this new design on a test platform, so if you go to their main site, you’ll see the old and unorganized version.
Tracy wanted to keep the same look and feel, but give it a completely customized and personal design as well as adding to the organization and functionality of the site. Here are just a few things I’ve been working on to help her achieve her goals.
- Homepage Design: While it’s sometimes tempting to get the latest and greatest plugin for your home page display, sometimes simplicity is the best option. Instead of the slider that is currently featured on the site, I’m choosing to use basic graphics and text divisions to clearly show what the site is all about. Keeping the side bar is also nice, because people will be able to see the most recent posts very quickly as well as whatever else Tracy wants their eyeballs on first. When thinking of your site, you have to make sure that your viewers are able to quickly and easily see what you are all about and navigate to interest areas quickly. Design should NEVER get in the way of usability! Question to ask, “Does your beautiful design and layout help or hinder people from understanding your site and finding what they are looking for?”
- Easy Navigation is Essential: The current design for BookRoom Reviews is a little tedious to navigate. A clear menu is not located on the home page, and is also missing from other single column pages forcing the viewer to hit the back arrow in order to find a menu again. It’s vital to have an easy menu on every page so your visitors can quickly get to what they want to see. I also added a “highlight” menu at the top of the page simply rewording some of the category titles to grab attention. This menu is a quick and easy snapshot of what the site is all about both graphically and in text.
Social Icons: Adding the social icons to the header ensures that they are visible to viewers right away. The icons themselves are from Social Grunge, and I created a little pocket image for them and added a hover feature to add some interest. Because the social icons and subscription buttons are really important to Tracy, I also created a customized sidebar widget to highlight these items again in a way that matches the rest of the theme’s design.This is actually fairly simple to accomplish. I first created some little text images that look like handwriting in Photoshop. I then tweaked the FeedBurner code ever so slightly (changed the solid border to a 1px dashed border with the color of my choice and replaced the p tag with a whole sentence to just using the word “Email:” beside the field). I then added all of the images and code into a text widget and titled it.
So, it looks a little like this:
<center><img src="url-to-text-image" /><a href="link-to-twitter" title"Twitter" padding="3px"><img src="url-to-twitpic" /></a> exact code structure here for facebook and flickr</center>
Of, course, you’ll need to replace all url’s with the correct ones, and where the text “exact code structure…” is, just replace that with the previous code and change the link url, img urls and titles to match the other social networks you are adding. Make sure that there are no extra spaces between each set of code.
Next place your FeedBurner code, and you are all set.
So, those are just a few quick tips and a brief peek at a page of the updated BookRoom Reviews! Stay posted for more updates and tips!
© 2010 – 2011, Sarah. All rights reserved.





