<img height="1" width="1" style="display:none" src="https://q.quora.com/_/ad/10b616b60fad4a51aa023ade12476783/pixel?tag=ViewContent&amp;noscript=1">

[Product Post] Theme Tip: Modifying Vanilla Comments

Posted by Adrian Speyer on Oct 24, 2014 2:38:34 PM
Find me on:

2 minute read

If you are using Vanilla Comments on your WordPress install, or any website for that matter, you may want to customize the look and feel of your embedded comments. Maybe you wish to modify the height, or maybe the colors.

By default, here is how Vanilla Comments will look, with a default theme, like Bootstrap:

vanilla_comments

In order to modify the look and feel of your comments, some of the modifications can be made in WordPress or in your website template. For example, if your WordPress blog has a black color scheme, and you want your Vanilla Comments to match, you would make sure the CSS for "post content" in WordPress uses this same color. The result would give you something like this:

black_comments

[Protip: #000000 is the color for black. You can use this handy website to always get the color codes you need]

We are not done yet! If you notice, "leave a comment" might be missing. The issue is that Vanilla Comments are sent via an iframe, so further customization should be made in your Vanilla Forums theme. We need to make the H2 element use the color white (#ffffff). To make those changes, you would go to the "Customize Theme" section of your Vanilla Forums Dashboard, on the CSS tab.

Customize_Theme_CSStab

Once on the right tab, add the following:

#vanilla_discussion_embed h2 {
color:#ffffff;
}

The result:

black_comments_final

The "Leave a comment" text is now visible, because the H2 color element was black, by default. Also notice how any changes we have made are added to the DIV named #vanilla_discussion_embed. So, for example, if you wanted to make the comment box bigger, you could add something like the following to your custom CSS tab:

#vanilla_discussion_embed.EditCommentForm textarea.TextBox, .CommentForm textarea.TextBox{
min-height: 100px !important;
}

And the end result would be:

black_comments_final_bigger

Even if you are not using WordPress or a simple theme, the concepts are similar. Some elements can be changed in your website or platform theme, but most will need to be made in your Vanilla Forums dashboard. Hopefully this post helps you customize your Vanilla Comments even more.

We hope you found these tips helpful. Check under the product category for more product tips.

Vanilla Forums offers a cloud based solution which can easily be themed to match your brand. Try Vanilla Forums Cloud Solution free for 30-days.

Topics: News, Product

Related posts

Subscribe to the Community Corner Newsletter and get expert insight and analysis on how to get the most out of your online community every Friday.

Search this blog

Recent Posts

Gaming Launch Guide

Have an Article for Vanilla's Blog?

Send us an email to pr@vanillaforums.com with your topic idea and we'll circle back with our publishing guidelines.