A Griffith Listing

Real Estate Services by Jon Griffith

You are here: Home / Archives for CSS

How to Adjust the Margins on Disqus Commenting

by

I run a myriad of WordPress blogs.  On most of them, I utilize a commenting system called Disqus.  It’s just cool.  There’s one thing that I was troubled by when I first implemented it.  When enabled, the comment section seemed to be aligned flush with the width of my content, leaving no aesthetic margin to delineate a separation in design.  Thankfully, using Firebug, I was able to inspect the Disqus comment area to find the class identifier so I could modify the design slightly to fit my site.

Notice the following image.  The dark gray background and the Disqus comment area butt up against each other.  Not cool.  The right side of the comment form (not shown) also squished against the right hand side-bar.  Not attractive at all.

Simple Fix

There’s a very easy CSS style that you can apply to your Disqus settings for a given website and you do it from the Disqus website:

  1. Simply login, choose the site profile that you need to address.
  2. Click the settings tab, then click Appearance on the left.
  3. Scroll to the bottom of the page and paste the following into the Custom CSS box:#disqus_thread { margin: 0px 20px 0px 20px; }

Save your settings, and re-load your blog.  The setting above essentially squeezes the entire Disqus comment section by 20 pixels on the left and the right sides.  You can modify this to suit your needs, but it should help you line up your comment box with the other content on your site.

Here’s how it looks now:

Hope that helps.

The Apprentice Theme Part One: Inspiration

by

Approximately 4 weeks ago I threw in the towel on other people’s themes.  While there are hundreds, maybe thousands of fantastic themes in the world, none of them were just what I wanted, which is probably why there are hundreds of themes.  The proliferation of themes for WordPress is a byproduct of that very freedom to create.

So, what to do?  Well, the most obvious choice was to design my own theme.  But what would it look like?  What features would it have?  Would it continually evolve?  Would I get so lost in my own code and design that I wouldn’t know where to go next?  The answer to all of those questions turns out to be..#$@#(*$&!

Building a theme is tough work, especially when you’re migrating from basic knowledge to more advanced knowledge of WordPress.  The hardest part has turned out to be styling the site with CSS, which I am still doing, daily.

I figured I would call it Apprentice.  How fitting, right?  Why not.  I also thought that I should come up with a fairly consistent color scheme.  After all, branding, while not as critical in a slow market (see the article at teamforty.com about social networking) is important.  Especially when it comes to consistency.  The first step I took was to create the name, get the domain, and create the logo you see at the top.  The rest is history.

It’s known that imitation is the best form of flattery, so I set out to imitate one of my most influential blogs by Darren Rowse called problogger.net.  I used his site as a model, but I made certain to force myself to build the layout by trial and error, rather than copying code.  I knew that I would learn more that way, and 4 weeks later, I have learned some very basic lessons about CSS and applying what I see in mind mind quickly to a design style sheet.

During the process I found that I wanted a myriad of features.  I found myself saying, “If only I could have this or that.”  Now, I have this or that, and believe me the list is long and detailed.

Stay tuned for part two of this series where I’ll outline a list of features that I implemented throughout the design of this theme.  If you’d like to be notified automatically, use our subscription box to subscribe to our updates and we’ll send you an e-mail we post the follow up story.