Fixing the Twitter Field for CommentLuv Blogs

Its been bugging me a lot lately. I see a lot of blogs out there that use CommentLuv. Its an awesome premium commenting plugin that does a lot in one package. The issue? People add the Twitter field above where the Name/Website/Email fields are and then just leave it there. Sitting all out of whack with the rest of the form. And it drives me nuts. So I decided to do a short tutorial on how you can easily fix it so it matches virtually any WordPress theme you use today. So lets fix the twitter field for all CommentLuv Blog!

The Problem?

You go to a blog and you see that they spent a lot of time to get everything to look right. Then when you scroll down to the comment section there it is sitting off kilter. The Twitter comment field. It’s just hanging out doing its own thing. Its not styled with the theme. Sort of like this:

Nope – no style at all.

This is only for those who decided to add the Twitter field up above. If you have it down below (its an option in CommentLuv) then this tutorial will not do you any good. Speaking of tutorials – if you use Contact Form 7? You should get that fixed up too while your add it. Read the article below to show you how:

Read More: How to Add CSS Style Contact Form 7

The Fix

Its really quite simple to fix it actually. Especially if you are using Genesis and one of the Child Themes. Plus Andy Bailey the creator of Comment Luv was even nice enough to have an id already set so you can easily find it.  All that is needed is one little change and the Twitter field is now styled along with the rest of the Comment Form.

Warning: Before making any changes to your site. Please make sure to backup your Theme’s Stylesheet (styles.css for Genesis users). Although this is a fairly easy tutorial its always a good idea to back it up just in case.

Find the Correct Field ID

First I needed the ID that the Twitter field was using. So I used Chrome (or Firefox) and right clicked on the field and selected “Inspect Element” It showed that the ID for the field was #atf_twitter_id in the source code. Now that I had that I just needed to modify the CSS Stylesheet to add it there in the theme I am using.

Step 1. Belows shows the input field you want to right click and select “Inspect Element” on:

Inspect Element

Step 2. Look down on the bottom of the screen that pops up. You will see something similiar to the code below:

Locate the Twitter ID Field

Step 3. Look to the bottom right corner and you will see the CSS code being used for formatting the forms. You’ll use this to help you find the necessary bits to change in the Theme Editor (note: Yours will not show the twitter id like mine, the example already shows it being displayed sorry!)

Locate the CSS Code

Add the #atf_twitter_id ID to the Comment Section of your CSS Style Sheet

To do this you just need to go to your WP Editor and make a small addition to your Theme’s Comment section.

You’ll need to open up your Theme Editor from within WordPress. Click on Appearances then Editor. Or hover over Appearances and then select Editor.

Appearance -> Editor

Then you will need to find the CSS Code to make the change to. You will see the completed addition in the code example below. All it takes is a comma ‘,’ and the new #atf_twitter_id. Then just click on Update File for it to take effect.

Note: If you use any type of web cache plugins you might have to clear them out to see the changes.

If you did everything correctly then you should see the changes to your Comment form to looking something like the example below:

All FIxed!

It is actually quite simple to do, and it cleans up one area of your site that people notice.  And it only takes about a minute or two to add it.  So please go do it! My OCD is begging you LOL! Seriously though if you run into any problems please let me know.

If you found this tutorial helpful please share it with those who haven’t done this yet. With your help we can clean up the Comment forms on all the sites everywhere!