Showing posts with label Design. Show all posts
Showing posts with label Design. Show all posts
Free 3 column wordpress themes
Is your blog too cluttered? Too much information for one sidebar? Then you should try one of these free 3 column WordPress themes. From clean and minimal to graphic and creative templates to use on personal, corporate or magazine style blogs, this selection of 20 of the best 3 column WordPress templates will definitely help you make the right choice.
Please visit their authors’ sites, available at the “Info & Download” link, to learn more about each of these themes.

Elements of SEO

ElegantBlue

Simple Balance 2.0

Pride

Silhouette

Grid Focus

Neoclassical

Fervens

MassivePress

Agneka Simple

Sans-Serif Racer

WP Imagination

Dilectio

DailyPress

Unbound

Woodtastic

Bird

Dark Zen

Lorem Ipsum

Rainbow Circles

[More]
20 Free Corporate WordPress Themes
Your business’ blog doesn’t have to look boring or childish. If you’re going to use your blog as a tool to promote your business, you need it to have a clean, professional, corporate look. Here’s a round up of 20 of the best free corporate WordPress themes available. Preview them and if you find one of your taste, go ahead and download it.
While some of them are free for personal use, others may be subject to a small one time fee for professional use. Please visit their authors’ sites, available at the “Info & Download” link, to learn more about each of these themes.

Several3

Modern

Gluttony

Whitespace

d’sanctuary

Brown Bound

Brown Magic

Yellow 3

PointSpace

Basic

Zoxengen

Timeline Digest

SunRise

Corporate Sandbox

The Morning After

Deadwood Lite

PolarLight

Natural Power

Copyblogger

Evolution

[More]
Free Simple RSS Icons
It’s time for a new freebie release! Here is Feedsessive, a free, simple and elegant RSS icon pack for you to use however you wish, in either personal or professional projects, with no restriction.
These days I’ve been working on a new project and I needed an RSS icon that is simple and elegant, and after designing one to use in my project, I decided to create a few variations and release them as a pack for those who might need it.
Feedsessive features 50 free RSS icons, split into 2 two design styles (basic and outlined), each with 25 color variation.
All the RSS icons are available in 3 formats:
  • EPS (vector) format
  • PDF format
  • Transparent PNG format at 300dpi
Download Feedsessive
* Packed size: 2.22 Mb
Here’s a preview of all the icons in the set:
Download Feedsessive
* Packed size: 2.22 Mb
[More]
By popular demand, I decided to publish a short tutorial on how to add your own logo to the Simple Balance WordPress theme.
So, in order to achieve this we’ll walk through the following steps:
  1. The logo image guidelines and instructions;
  2. Files to update;
  3. Code explanation.

The logo requirements

In order to achieve the best implementation quality of your logo, you should consider saving you logo with a transparent background. A .gif file will work well, and if you’re using a software like Adobe Photoshop to edit your images, when saving the image (File > Save for Web & Devices…), setting the Matte to white would be good. This will ensure that the margins of your transparent background logo will look good on Simple Balance’s light background color.
As you can see on the live demo, I’ve used a .gif image for logo, and basically, this is what you are about to achieve with your own blog too.
Once you’ve saved your image, upload it to the “img” folder inside the Simple Balance theme folder (wp-content/themes/simplebalance/img). From here, we’ll link to it later.

Quick tips

  1. Save your logo with transparent background;
  2. Save it with a white matte;
  3. Keep the width below 200 pixels, as that’s the maximum space reserved for the logo;
  4. Write down the size of the image (width and height), as we’ll use them later.

Adding the logo in your CSS stylesheet

Now that you have uploaded the logo on your FTP, it’s time to add it to the design. There’s only one file you’ll need to update, and that is style.css, which is located in the root folder of the theme.
Open the file with a text editor (a basic Notepad should suffice) and look for this lines of code:
.topLogo h1 a, .topLogo h2 a {
 text-decoration: none;
 color: #d90202;
}
Select the whole block and replace it with the following code:
.topLogo h1 a, .topLogo h2 a {
 text-decoration: none;
 color: #d90202;
 display: block;
 width: 156px;
 height: 42px;
 background: url(img/name-of-your-logo-file.gif) no-repeat;
 text-indent: -9999px;
}

Be careful

… and don’t forget to replace the values in this new block of code with the real values of your image, as follows:
width: 156px;
The ’156′ value should be the actual width of your image. ’156′ is only a width I used as an example. Do not delete the ‘px’ text as it defines our measuring unit.
height: 42px;
The ’42′ value should be the actual height of your image. ’42′ is only a width I used as an example. Again, be careful with the ‘px’.
background: url(img/name-of-your-logo-file.gif) no-repeat;
Replace ‘name-of-your-logo-file.gif’ with the actual name of your logo file.
The ‘display’ and ‘text-indent’ properties are meant to ensure the correct display of your logo, so you should not worry about those, but keep them. They are important.
Once you finish the editing, save the file and reupload it to your server. Et voila, the logo should be there the next time you check you blog.

A good idea…

…would be to go to the Simple Balance Control Panel (WP administration > Design > Simple Balance 2.1/2.0 CP) and uncheck the box that displays the blog description. Of course, only if you think it affect the design, or the new logo in a bad way.
If you have any questions, i’ll be happy to answer in the comments section of this post.
[More]


WordPress - Latest posts by categoryOne technique that is most common with WordPress magazine or news style themes is the display of an archive of the latest posts by category, as simple titles or with post excerpts. This is useful for the previously mentioned theme styles, but not only. It can be used to set up custom blog homepages, 404 pages, landing pages or even a special archive page.
This tutorial will help you build a ‘Latest Posts by Category Archive‘ in a very easy way. The widths in the CSS styling presented below have been calculated based on the default WordPress theme, assuming that is the most common theme available to anyone.
If you are looking for a plugin to generate such an archive, please check out: WP Plugin: Latest Posts by Category Archive.

Setting up the page template

Open up you favorite code editor and create a blank document. Save the document as ‘category-archive.php’ (or any other name you’d prefer) in the default WordPress theme directory (wp-content/themes/default).
The first step is to asign our new template a name and a page-like structure, so based on the default theme’s page template, the code you should paste in your new document is:
01.<?php
02./*
03.Template Name: Category Archive
04.*/
05.?>
06. 
07.<?php get_header(); ?>
08. 
09.<div id="content" class="narrowcolumn">
10. 
11.    <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
12.    <div class="post" id="post-<?php the_ID(); ?>">
13.    <h2><?php the_title(); ?></h2>
14.        <div class="entry">
15.            <?php the_content('<p class="serif">Read the rest of this page &raquo;</p>'); ?>
16. 
17.            <?php wp_link_pages(array('before' => '<p><strong>Pages:</strong> ', 'after' => '</p>', 'next_or_number' => 'number')); ?>
18. 
19.        </div>
20.    </div>
21.    <?php endwhile; endif; ?>
22. 
23.    <!-- Category Archive Start -->
24.    <!-- Category Archive End -->
25. 
26.</div>
27. 
28.<?php get_sidebar(); ?>
29. 
30.<?php get_footer(); ?>
The template above will make sure to display the page name you set up, and also, any additional content you might want to add before the archive, from you WordPress page editor. We will be adding our ‘latest posts by category’ code between the ‘Category Archive Start’ and ‘Category Archive End’ comments.

Adding the archive’s PHP code

Simply put, the code below will cycle through the first-level categories of your blog (parent categories), check for the ones that are not empty and if this condition is met, return an unordered list of the latest 5 post from each category. Empty categories will not be displayed.
01.<?php
02./*
03.Template Name: Category Archive
04.*/
05.?>
06. 
07.<?php get_header(); ?>
08. 
09.<div id="content" class="narrowcolumn">
10. 
11.    <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
12.    <div class="post" id="post-<?php the_ID(); ?>">
13.    <h2><?php the_title(); ?></h2>
14.        <div class="entry">
15.            <?php the_content('<p class="serif">Read the rest of this page &raquo;</p>'); ?>
16. 
17.            <?php wp_link_pages(array('before' => '<p><strong>Pages:</strong> ', 'after' => '</p>', 'next_or_number' => 'number')); ?>
18. 
19.        </div>
20.    </div>
21.    <?php endwhile; endif; ?>
22. 
23.    <!-- Category Archive Start -->
24.    <ul class="catArchive">
25.    <?php
26.    $catQuery = $wpdb->get_results("SELECT * FROM $wpdb->terms AS wterms INNER JOIN $wpdb->term_taxonomy AS wtaxonomy ON ( wterms.term_id = wtaxonomy.term_id ) WHERE wtaxonomy.taxonomy = 'category' AND wtaxonomy.parent = 0 AND wtaxonomy.count > 0");
27. 
28.    $catCounter = 0;
29. 
30.    foreach ($catQuery as $category) {
31. 
32.        $catCounter++;
33. 
34.        $catStyle = '';
35.        if (is_int($catCounter / 2)) $catStyle = ' class="catAlt"';
36. 
37.        $catLink = get_category_link($category->term_id);
38. 
39.        echo '<li'.$catStyle.'><h3><a href="'.$catLink.'" title="'.$category->name.'">'.$category->name.'</a></h3>';
40.            echo '<ul>';
41. 
42.            query_posts('cat='.$category->term_id.'&showposts=5');?>
43. 
44.            <?php while (have_posts()) : the_post(); ?>
45.                <li><a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title(); ?>"><?php the_title(); ?></a></li>
46.            <?php endwhile; ?>
47. 
48.                <li><a href="<?php echo $catLink; ?>" title="<?php echo $category->name; ?>">More <strong><?php echo $category->name; ?></strong></a></li>
49.            </ul>
50.        </li>
51.        <?php }  ?>
52.    </ul>
53.    <!-- Category Archive End -->
54. 
55.</div>
56. 
57.<?php get_sidebar(); ?>
58. 
59.<?php get_footer(); ?>
You should now save your file, because we’re done editing it. As you can see, the archive code has been added between the ‘Start’ and ‘End’ comments. Now let’s go through the code and dissect it.

The PHP code explained

The first thing we do is to set up a database query to cycle through the non-empty parent categories:
1.$catQuery = $wpdb->get_results("SELECT * FROM $wpdb->terms AS wterms INNER JOIN $wpdb->term_taxonomy AS wtaxonomy ON ( wterms.term_id = wtaxonomy.term_id ) WHERE wtaxonomy.taxonomy = 'category' AND wtaxonomy.parent = 0 AND wtaxonomy.count > 0");
You can further tweak this query to exclude categories or specify categories to be listed based on their ID, with the use of the MySQL comparison functions NOT IN or IN.
Let’s say that you’d like the archive to exclude the categories with IDs 2, 5 and 6. Your query would become:
1.$catQuery = $wpdb->get_results("SELECT * FROM $wpdb->terms AS wterms INNER JOIN $wpdb->term_taxonomy AS wtaxonomy ON ( wterms.term_id = wtaxonomy.term_id ) WHERE wtaxonomy.taxonomy = 'category' AND wtaxonomy.parent = 0 AND wtaxonomy.count > 0 AND wterms.term_id NOT IN (2,5,6)");
Similarly, if you want to display only the categories with IDs 2,5 and 6, you’d have:
1.$catQuery = $wpdb->get_results("SELECT * FROM $wpdb->terms AS wterms INNER JOIN $wpdb->term_taxonomy AS wtaxonomy ON ( wterms.term_id = wtaxonomy.term_id ) WHERE wtaxonomy.taxonomy = 'category' AND wtaxonomy.parent = 0 AND wtaxonomy.count > 0 AND wterms.term_id IN (2,5,6)");
For further help with comparison operators and functions, you can check out the MySQL manual.
Next, we set up a category counter which will be incremented each time a category will be displayed. Based on this counter, the code adds a ‘catAlt‘ class that you can use to style differently consecutive categories. In our case, we’ll use it to shift the categories into two columns. This is were the alternate classes are assigned:
1.$catCounter++;
2. 
3.$catStyle = '';
4.if (is_int($catCounter / 2)) $catStyle = ' class="catAlt"';
The category list is built by the use of foreach and it helps retrieve vital information about the categories, such as name and permalink:
1.foreach ($catQuery as $category) {
2.    /* Code used to retrieve and display the latest posts */
3.}
After we display the category title and link through this line of code
1.echo '<li'.$catStyle.'><h3><a href="'.get_category_link($category->term_id).'" title="'.$category->name.'">'.$category->name.'</a></h3>';
we continue by using a custom query to retrieve the latest 5 posts from the current category in the cycle, followed by a link to the complete category archive:
1.query_posts('cat='.$category->term_id.'&showposts=5');?>
2. 
3.<?php while (have_posts()) : the_post(); ?>
4.    <li><a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title(); ?>"><?php the_title(); ?></a></li>
5.<?php endwhile; ?>
6.    <li><a href="<?php echo $catLink; ?>" title="<?php echo $category->name; ?>">More <strong><?php echo $category->name; ?></strong></a></li>
And that’s about everything in terms of coding! Now, onto the CSS styling.

Styling the archive

Find the style.css file in your default theme’s directory, open it and scroll down to the end of the file. Now copy the code below and paste it in your file.
01./* Latest posts by category styles */
02. 
03..catArchive {
04.    width: 450px;
05.    overflow: hidden;
06.    margin: 20px 0 0 0;
07.    padding: 0;
08.    list-style-type: none;
09.}
10. 
11..catArchive h3 {
12.    font: normal bold 18px sans-serif;
13.    border-bottom: 1px solid #666;
14.    margin: 0;
15.    padding: 0 0 3px 0;
16.    display: block;
17.}
18. 
19..catArchive li {
20.    display: block;
21.    float: left;
22.    width: 210px;
23.    margin: 0 30px 30px 0;
24.}
25. 
26..catArchive ul {
27.    margin: 0;
28.    padding: 0;
29.}
30. 
31..catArchive li li {
32.    border-bottom: 1px solid #ddd;
33.    margin: 0;
34.    padding: 4px 0;
35.}
36. 
37..catAlt {
38.    margin-right: 0 !important;
39.}
Now, save the file. We’re done!
Note: Keep in mind that column sizes have been calculated based on the available space (450 pixels) in the default theme’s content area. So, our columns should each be 210 pixels wide, with a 30 pixels spacing between them.
Since the column shifting is done with the help of float, I’ve set the overflow to hidden to stretch the list full height. This can only work with a fixed given container width, which in our case is 450px set on .catArchive.
If your new to “floating”, Sarah has posted a fairly easy to understand article about the float property on BloggingTips.com.
You can download an archive containing both source files: Download.
[More]
By now, you should know that I’m a WordPress fan. While most people regard it as a simple blogging platform, some see beyond that and realize that WordPress is a very capable CMS.
While working with it as a website CMS will not allow too many customizations for entry-level developers or users, in the hands of a pro WordPress is ready to perform miracles.

The advantages of WordPress powered websites

There are quite a bunch of advantages when developing websites using WordPress as CMS, but the most important are:
  • Productivity – A lot less time spent on development, which guarantees a lower cost and still high quality;
  • Ease of use – Both client-side and developer-side. The amount of tutorials, plugins and support groups available out there is a divine gift;
  • Updates – The WordPress community is very involved in keeping the project up to date and bug free and the updates are so easy to apply.
It’s enough to run a search on Google and you’ll see how many people praise the power of WordPress but instead of using words, this time I’ll use results.

The real deal

If in the past weeks you’ve seen less activity on Blogsessive is mostly because my design studio, QBKL Media has been working on delivering top notch quality for one of its clients that chose WordPress as the platform for their website redesign.
The client is one of Romania’s oldest post-revolutionary hotel – Caro Hotel – and today we’re pleased to announce the official launch of their website.
So, instead of going on and on about the power of WordPress, I invite you to see for yourself what can be achieved. And believe me that this is only a small part of the real deal!
[More]
Today I’ve received an email that made me think about this subject. Somebody asked me to confirm that a design agency that I’ve never heard of before, has done the design you see on Blogsessive. Obviously, I replied and told him that Blogsessive is a custom design done by yours truly, and any agency (with one exception) that would proud themselves with Blogsessive’s theme would be a fraud.
After hearing the price for which that agency was going to create something similar, the following thoughts started taking shape:
  • Why would you proud yourself with the work of someone else?
  • Why think these things would not surface?
  • Why roll out a low-ball quote for something that’s worth much more, or that you cannot deliver, but still state you can.
Before getting a custom design for you blog, here are some things you should consider.

Do you really need it?

You know my view on this one. I personally like having a unique looking blog, but than again, I’m a happy case. I can do my own designs.
Those who cannot have to relay on the skills of people like me and many others. In this case, there are some things you should base your decision on:
  1. Can your budget afford a custom design?
  2. Will this design generate profit? (Profit can be either traffic, awareness, money…)
If your answer is ‘yes’ to both questions, than you should go ahead with the design. If you answer with ‘yes’ to the first question only, then it’s only a matter of personal choice and willingness to invest in a hobby. The choice is obviously yours.

Looking for quotes

If you’ve decided to go ahead with the design, make sure you write down all the things you need. Otherwise, the quotes you’ll receive won’t reflect the reality.
Ask around for quotes on site like Elance, Get a Freelancer or Rent a Coder or simply contact the owners of the blog’s that you like and ask them to recommend you their designer.

Choosing the designer/agency

You’ll probably receive quite a bunch of quotes. Some will be very low, some will be too high. The ones that are too high will be pretty easy to identify, but the lower ones can be pretty attractive, considering the restrictive budgets these days.
The best advice I can give you is: Don’t be fooled!
From my whole experience I can guarantee you that there’s no such thing as a bargain when it comes to a job well done.
We all know that – for example – Darren Rowse’s blog, Problogger.net is an excellent design incorporating so many custom areas, like the Job Board, custom archives, best of zone and so on.
If Darren’s blog is such a hit, then you’d probably want something similar in terms of structure and accessibility (bare in mind the design is not everything and Darren is a great blogger, theme aside). Would you expect to get such a well done job for $300, or $400, or $500? Ask a real pro and the answer will be ‘no’. But then again, there are those people quoting these amounts, claiming they can get the job done.
The good: It fits your current budget.
The bad: Lack of professionalism in communication. Delays in delivery. Lack of attention to details. Bugs, and the list can go on and on.
Some of you would probably say I’m wrong, but consider this. A really well done premium theme sells for $49 to $99. Multiply this with the total sales and see the real price of that really well done design.

Fitting the project into your budget

Forget the bargain, start the negotiation. At this point you probably don’t even need all the features that Darren (Problogger.net), or Brian (Copyblogger.com), or I have on our blogs.
Does your traffic and exposure justify a job board? Do you really need so many custom page templates?
Instead of trying to fit everything into a tight budget and probably getting low-quality works, why not fit the custom concept along with the most important features into it. Negotiate.
Let’s say your budget is indeed $500, but a good agency will ask you for $800. Instead of picking the lowest quote, rather extend the deadline. Taking pressure off the agency could result in a lower quote.
Cut down on the features. Will also reduce costs.
I assure you that you blog will grow naturally even without that job board, and when the time is right and the blogging income will allow it, add that too. Take it step by step and don’t cut on the overall quality.
Rather put a smaller budget at work to get real results and build on that, than throwing your money out the window on something that will require constant fixing and attention and in the end, a whole lot of extra money to get done.
This is not the view of a designer. This is what I’ve concluded based on previous experiences, folks coming to me to fix work they previously had done as bargains. It’s not worth it.
[More]
Loving WordPress is SO easy! You got thousands of great looking blogs, custom themes, free themes, premium themes and designers go beyond that by using WordPress as CMS for their non-blog projects. A while back I showed you 10 non-blog websites powered by WordPress, and now it’s time to take a look at 10 more!

1. ProBar

1-ProBar-theprobar.com
Visit ProBar

2. Krispy Krush

2-Krispy-Krush­www.krispykrush.com
Visit Krispy Krush

3. The Salon

3-The-Salon-www.thesalonhair.com
Visit The Salon

4. Imaginaria Creative

4-Imaginaria-Creative-imaginariacreative.com
Visit Imaginaria Creative

5. Lyndsey Hamilton Events

5-Lyndsey-Hamilton-Events-www.lyndseyhamiltonevents.com
Visit Lyndsey Hamilton Events

6. IOKON Media

6-IOKON-Media-www.iokonmedia.com
Visit IOKON Media

7. Loja Birds

7-Loja-Birds-www.lojabirds.com.br
Visit Loja Birds

8. Bug Interactive

8-Bug-Interactive-www.buginteractive.com
Visit Bug Interactive

9. Ville de Falaise

9-Ville-de-Falaise-www.falaise.fr
Visit Ville de Falaise

10. Cow Says Moo

10-Cow-Says-Moo-cowsaysmoomedia.com
Visit Cow Says Moo
Yes! WordPress is fun. And easy!
[More]