Free StackOverflow-like theme: CivicStack

In the next few weeks, we’ll be releasing innovative WordPress themes for free to the public. We want our themes to be unique and provide features not found anywhere else.

So we’re very proud to release a beta version of our new CivicStack theme. This theme allows you to create a WordPress site that will allow your visitor to quickly and easily engage in conversations through two types of voting processes without the need to create a user account.

The first type of voting is based on a five-star system for the posts. The second type of voting allows you to vote on comments made by users. Visitors can vote up or down comments similar to the StackOverflow site. There’s also a user leaderboard page that shows you the top commenters based on votes that they have received.

The system defaults to a home page listing all the categories similar to a message board format. This home page is dynamically generated as you add new posts and categories. The stacking order of the categories can be set through the theme options panel.

Civicstack theme home

You can upload also thumbnail for each category through the theme panel. The theme lists the posts with the most votes as “popular topics.”

When a visitor drills down to a post page from the home page, they’ll see something similar to this:

Civicstack theme voting

Visitors can only vote up or down a comment once. The gravatars are shown from once a user has registered for an account. We also suggest using the Mingle Plugin that will allow other users to look at other user’s profiles.

You can also activate a widget that allows visitors to suggest a post by dragging over the widget called “Suggest an Idea” to the left sidebar. This will visitors to suggest an idea. Currently it saves the “idea” as a post in draft mode. So it’s up to you to edit, categorize, and publish each suggested post as needed.

To create a user leaderboard page, create a new page called “leaderboard” and then go under page templates to select “user leaderboard.” On the public side, it will display a page like this:

Civicstack theme leaderboard

Home page options
You can also specify a blog type home page in the theme panel that will show a list of blog entries. The option exists in the theme panel. See a demo of the blog home page version…

To create an “inner” category listing page, simply create a new page and choose the “Category List” under page attributes/templates module. Then link up that page on the navigation menu to show the category list.

Extending functionality with plugins
So far we’ve successfully used our theme with the following plugins: NextGen gallery (photo gallery), Smooth Gallery for NextGen, Sharedaddy (social media sharing), Google Analyticator (track visitors), and Mingle (social user profiles).

Download Stable: CivicStack 1.4b
Download Beta: civicstack-1.5a

7 Replies to “Free StackOverflow-like theme: CivicStack”

    1. hey there, yep forgot to mention it’s called “Login with Ajax” and it’s in the repository.

  1. Nice theme but really doesn’t look that similar to Stackoverflow
    It will be a great idea if you create a theme like
    I am searching for it a lot but didn’t find it anywhere

    1. hi Praveen, you’re right it doesn’t look exactly like Stackoverflow. I was shooting for more the voting functionality of it both on the “answers” and also the user “rating” as well.

  2. I am thinking of using this theme in my site, but the voting up and down icons do not look right and the boxes around the thumbnails do not fill in the thumbnails or Topics of Votes. Do you know what is causing this? Thanks.

    1. Hey there, what web browser version (ex: Firefox 12, Chrome 13, IE 8 or 9, etc.) are you using to look at the site and what version of WP are you using?

      1. Hey Noel,

        thanks for the reply.

        I tried in Chrome and Firefox 3.6.22. I am using the latest wordpress.

        I am not a web programmer, but from looking at the code, I find that in the style.css file you have:

        .count p, .count a {
        position: absolute;
        left: 15px;
        width: 30px;

        and in scripts.js you have:

        if (me.children(“a”).size() > 0) {
        me.find(“.count-up”).css(“top”, t – 15);
        me.find(“.count-down”).css(“top”, t + 20);

        This somehow is not being called. I even tried removing the if statement, but nothing happens.

        I changed the code a little so at least the number would be centered, but I cannot get to separate both up and down arrows. Please look at the site:

        Thank you again for all your help. Great theme!

Leave a Reply

Your email address will not be published. Required fields are marked *