Adding custom themed comments to your website

Custom theme comments

Introduction

Adding comment sections to your website can boost user interaction and help you build a community.

There are many ways to do this, the most popular being Disqus. One key feature that Disqus does not offer is customizability.

Customizing your comment sections can have many benefits. One being that you won’t be locked to ugly themes that other services offer. For example, Disqus’ theme doesn’t fit all mobile devices. What can you do about that? Nothing. You must accept it.

Another key advantage that customizing a comment section theme brings is user perception. If users go to your website and see what looks like a fully custom developed comment section, it will further boost their confidence in your product or blog.

This is very common in other areas outside of comment sections. For example, Wordpress themes are huge. People pay thousands of dollars for a custom theme just to give their website a unique and professional feel.

Getting Started

For this guide, we will be using Commenze.

Commenze allows you to fully customize any part of your comment section. You can fully design your own theme and make it look like you aren’t even using a third-party application.

If you haven’t set up a Commenze comment section on your site already, don’t worry! You can even skip this part and just design your own theme in the Design & Layout Editor before even doing anything.

If you do however want to follow along with a comment section that will be on your website, follow this short guide that shows you how to install Commenze.

The Design & Layout Editor

To customize your comment sections theme, we will be changing some code (specifically CSS). You may be wondering if you need to know how to code. If you want to fully customize a theme from scratch, then yes you will need to know basic HTML & CSS.

For what we will be doing in this guide, no prior coding knowledge is needed. Anyone can follow along.

The Design & Layout Editor can be accessed when you have a (free) Commenze account. So, if you haven’t already, Sign Up for an account.

Once you’re signed in navigate to the Design & Layout Editor page. Then click the “New Theme” button. Next, click the “Edit” button. This will take you to the code editor.

A new page will load with some code already written. This is the default Commenze theme. To keep this guide simple, we will only be making some small changes to this theme.

The top half of the editor screen is the code editor. There are 8 files that you can change. You can learn more about each here.

The bottom half is a preview of the code that we write. Each time you make a change to the code you need to save it. This is done by pressing CTRL + S.

Customizing our comments reply button

As you can see in the preview, each comment has a “Reply” button that is green. Let’s say the site we are installing Commenze on has a different colour pallet with the main colour being purple. We want to change this reply buttons colour to match the look of this site.

Since the thing (Reply button) that we want to change is located on a comment, to edit it we will be working in the Comment.js and Comment.scss files. As a side note: .js is for the structure (HTML) and .scss is for how we want our HTML to look (CSS).

We want to change the colour of the button to purple, so we will be using the Comment.scss file. In this file, we need to find where the button is being given the colour of green.

Scroll down until you see a line that says “.comment_replyButton” – around line 280. Inside of the curly brackets { is the code that changes how our reply button looks.

You will see a line that reads:

background-color: $green;

This is what we want to change. Delete the $green and change this to any colour you want, like so:

background-color: purple;

Once you’ve done this hit CTRL + S and you will see all the reply buttons have changed colour!

Depending on the colour you chose for your button, the text “Reply” may not be very visible. So, let’s change the colour of the text to be white.

In the same section of code that we just changed there is another line that reads:

color: $darkBlue;

Change that line to this:

color: white;

Hit CTRL + S and you will see that the text changes colour!

Learning how to build fully custom designs

Well done, you just made your first design change to your comment section!

You may want to further change the design and build a fully custom theme from scratch. To do this you will need to learn the basics of HTML & CSS.

Below are a few resources that if completed you will be well on your way to creating custom themes.

If you already have coding knowledge and want to get started building custom themes, check out the Documentation that will guide you.