Share This

Quick’n’Easy CommentLuv Style Enhancement | Kestrel's Aerie

Quick’n’Easy CommentLuv Style Enhancement | Kestrel's Aerie

Quick’n’Easy CommentLuv Style Enhancement

If you’ve been visiting the site much over the past week or so, you’ve probably noticed a lot of changes. Some have been fairly subtle; others (such as the contrasting sidebar background and widgetized 3-column footer), not so much.

One of the smaller changes I’ve made was prompted by this article at MattFlies.com. Matt showed how to style the CommentLuv box (see last week’s Friday Five to see what I’m talking about) to make it a bit more attractive. Although I didn’t quite follow how Matt said to apply his code, I was able to add it to the CommentLuv .css file in /wp-content/plugins/commentluv/style/cl_style.css.

If the thought of modifying a plugin file frightens you, it shouldn’t. First, get FileZilla, a multi-platform (Linux, OS X, Windows), open-source file transfer program.1 When you set it up, identify a text editor to call from FZ. For OS X, I use the free Text Wrangler; for Windows, I recommend the open source Notepad++.

NOTE: Before you change anything, copy the file to be modified to your computer in case something blows up and you need to revert!

With cl_style.css open in your editor, find the following:

.cluv {
border:1px solid #fff;
padding: 5px;
display: block;
font-size: 100% !important;
text-transform: none !important;
}

Replace2 the five lines between {curly braces} with the following:3

display: block;
padding: 8px;
border: 1px solid #E1E1E0;
background: #CFE9FF;   //This can be any color you want for the background of the CommentLuv citation
text-transform: none;
font-style: normal;
letter-spacing: 0;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
margin-top: 8px;

The result will give you something that looks like this: Modified CommentLuv output

Note the nicely rounded corners. If you look at the post I linked above, you’ll see the background color fits in nicely with the overall theme, whether it’s in an original or nested comment.

The text output has been modified from the WordPress Settings > CommentLuv page. (The default is "Kestrel’s last blog..Recommended Reading"; if anything, I prefer a true ellipsis (…), and my last blog is my current blog!) You could also change it to something like "Kestrel last blogged about Recommended Reading" but that might make for some strange reading, depending on article titles.

I hope you enjoyed this little diversion into how you can make your blog just a little cooler, but if you have any questions on anything I’ve covered here, please ask! And look for similar articles in the future.

__________
Notes:
  1. Obviously, if you have another FTP program you use, by all means, keep on keepin’ on!
  2. Actually, I just commented out the old code with "//" because I wasn’t sure if I was changing the right lines. :P
  3. Please…don’t ask me what all this code does! I couldn’t code anything more complex than a FORTRAN print loop from scratch; I just know this works. :D
 
13 Responses to Quick’n’Easy CommentLuv Style Enhancement
  1. Tami
    August 3, 2009 | 09:19

    Beautiful tweak, Kes. Thanks so much for sharing!

    In addition to the background note you’ve got there, users can also change the color on the following line from #E1E1E0 to whatever color they like:

    border: 1px solid #E1E1E0;

    (Cheat sheet for color codes : http://html-color-codes.com/)

    And you can also add a new line to your text for

    text-align : center;

    which will center the comment in the lovely commentluv box.
    Tami´s latest blog post is Sounds Gross, Is Awesome – Prunes My ComLuv Profile

    • Kestrel
      August 3, 2009 | 09:34

      *grin* I forgot that some of my readers (like you) are more knowledgeable than I with a lot of this stuff! Around 10:30 last night, as a huge headache was coming (way too much staring at code!), I thought, “This would be nice if it were centered…” ;)

      Thanks for sharing the additional tips, Tami! <3

      • Tami
        August 3, 2009 | 09:36

        I’m a master tweaker, but I never would have taken the time to make the corners all rounded the way you did. Looks absolutely lovely, and well worth the time to make the change. <3
        Tami´s latest blog post is Sounds Gross, Is Awesome – Prunes My ComLuv Profile

        • Kestrel
          August 3, 2009 | 09:42

          Copy/paste is what it’s all about! Fortunately, I do know enough to be able to figure out (usually) which file needs tweaking. I really do owe a lot of it to first, that FORTRAN class I took in college; and second, to years playing with my first computer, an Atari 800. Finally, there was the DOS command line… *snicker*

          And if you refresh, you’ll see I added your centering tag. I also increased the margin above the CLuv box from 8px to 15px to give it a bit more separation.

          • Tami
            August 3, 2009 | 09:44

            See, and I could keep going. I could add a linebreak tag to the .php file between “latest blog post is” and the post name, for abnormally long post titles, like my prune one.

            The tweaking, it never ends! *grin*
            Tami´s latest blog post is Sounds Gross, Is Awesome – Prunes My ComLuv Profile

  2. Kestrel
    August 3, 2009 | 09:46

    ut oh…Houston, I think we have a problem. I used the same background color for CLuv as I used for child replies (in the nested comments). Ahem…standby for a quick fix!

    [Edit: Fixed!]

  3. Badger
    August 4, 2009 | 09:59

    Just wanted to throw another word of support out there for FileZilla. I use this Open Source client to manage all of my stuff on both ends of the network connection, and it works wonders. Really easy to use.
    Badger´s latest blog post is The Role of Roles in RPGs My ComLuv Profile

  4. Matt Langford
    August 4, 2009 | 13:26

    Good job with the customization! And even better job finding where to put the code that’s on my site. That particular tutorial is a little outdated since CommentLuv upgraded to a new system. Great job!
    Matt Langford´s latest blog post is A Call for the Death of Facebook Quizzes My ComLuv Profile

    • Kestrel
      August 4, 2009 | 15:15

      Thanks for stopping by, Matt! Hah…so I’m not as obtuse as I thought I was…and the fact I did figure out where to slap the code made me inordinately proud of myself. ;)

      And just so you know, I’m making considerable use out of all the great tutorials linked (and inked!) on your site. GREAT RESOURCE!

  5. Andy Bailey
    August 5, 2009 | 06:43

    That looks really nice!
    I’ll be adding the option of editing the style from within the settings page on the next update so this type of style edit will be even easier to do.
    great job!
    Andy Bailey´s latest blog post is New premium CMS theme added – Dixie My ComLuv Profile

    • Kestrel
      August 5, 2009 | 09:44

      Hey Andy! Thanks for stopping by, and for the compliment! Hopefully I’ve pushed a few more converts the CommentLuv way. Looking back, I think I’ve written about CommentLuv more than any of the (way too many) addons I use!

  6. Pedro
    September 6, 2009 | 20:46

    The way you match the blues in your blog is very nice… it makes it deep you know… looks like something sublime!!! Nice taste
    Pedro´s latest blog post is Michael Jackson Costume My ComLuv Profile