Super Ginormous

Category: Wordpress

  • WordPress 2.7 Comments – Style Starter #1

    WordPress 2.7 Comment Style Starters:

    wp-comment-style-1In case you missed the first post related to WordPress 2.7 comments, please check it out.

    As promised here’s some starter CSS for stylizing comments in your WordPress 2.7-compatible theme. I hope to release a few more over the coming days that can be added to existing themes pretty easily. You can see this in action here on the site. This “style starter” will give parent comments and their children rounded corners. (Browsers that don’t support border-radius (or -moz-border-radius or -webkit-border-radius) won’t see rounded corners.) This has been tested in Firefox 3.0.4, Internet Explorer 7, Opera 9.6 and Safari 3.1. It may require some tweaking to get it to fit properly into your theme.

    [sourcecode language=’css’]
    ol.commentlist { list-style:none; margin:0; padding:0; text-indent:0; }
    ol.commentlist li { border:1px solid #d5d5d5; border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px; height:1%; margin:0 0 10px; padding:5px 7px 5px 57px; position:relative; }
    ol.commentlist li.alt { }
    ol.commentlist li.bypostauthor {}
    ol.commentlist li.byuser {}
    ol.commentlist li.comment-author-admin {}
    ol.commentlist li.comment { }
    ol.commentlist li div.comment-author { padding:0 170px 0 0; }
    ol.commentlist li div.vcard { font:bold 14px/1.4 helvetica,arial,sans-serif; }
    ol.commentlist li div.vcard cite.fn { font-style:normal; }
    ol.commentlist li div.vcard cite.fn a.url { color:#c00; text-decoration:none; }
    ol.commentlist li div.vcard cite.fn a.url:hover { color:#000; }
    ol.commentlist li div.vcard img.avatar { border:5px solid #d5d5d5; left:7px; position:absolute; top:7px; }
    ol.commentlist li div.vcard img.avatar-32 {}
    ol.commentlist li div.vcard img.photo {}
    ol.commentlist li div.vcard span.says {}
    ol.commentlist li div.commentmetadata {}
    ol.commentlist li div.comment-meta { font:bold 10px/1.4 helvetica,arial,sans-serif; position:absolute; right:10px; text-align:right; top:5px; }
    ol.commentlist li div.comment-meta a { color:#333; text-decoration:none; }
    ol.commentlist li div.comment-meta a:hover { color:#000; }
    ol.commentlist li p { font:normal 12px/1.4 helvetica,arial,sans-serif; margin:0 0 1em; }
    ol.commentlist li ul { font:normal 12px/1.4 helvetica,arial,sans-serif; list-style:square; margin:0 0 1em; padding:0; text-indent:0; }
    ol.commentlist li div.reply { background:#999; border:1px solid #666; border-radius:2px; -moz-border-radius:2px; -webkit-border-radius:2px; color:#fff; font:bold 9px/1 helvetica,arial,sans-serif; padding:5px 10px;  text-align:center; width:36px; }
    ol.commentlist li div.reply:hover { background:#c30; border:1px solid #c00; }
    ol.commentlist li div.reply a { color:#fff; text-decoration:none; text-transform:uppercase; }
    ol.commentlist li ul.children { list-style:none; margin:1em 0 0; text-indent:0; }
    ol.commentlist li ul.children li { }
    ol.commentlist li ul.children li.alt {}
    ol.commentlist li ul.children li.bypostauthor {}
    ol.commentlist li ul.children li.byuser {}
    ol.commentlist li ul.children li.comment {}
    ol.commentlist li ul.children li.comment-author-admin {}
    ol.commentlist li ul.children li.depth-2 { margin:0 0 .25em; }
    ol.commentlist li ul.children li.depth-3 { margin:0 0 .25em; }
    ol.commentlist li ul.children li.depth-4 { margin:0 0 .25em; }
    ol.commentlist li ul.children li.depth-5 {}
    ol.commentlist li ul.children li.odd {}
    ol.commentlist li.even { background:#fff; }
    ol.commentlist li.odd { background:#f6f6f6; }
    ol.commentlist li.parent { }
    ol.commentlist li.pingback { }
    ol.commentlist li.pingback.parent { }
    ol.commentlist li.pingback div.vcard { padding:0 170px 0 0; }
    ol.commentlist li.thread-alt { }
    ol.commentlist li.thread-even {}
    ol.commentlist li.thread-odd {}
    [/sourcecode]

    WordPress 2.7 Comment Style Starters:

  • Stylizing Threaded/Nested Comments in WordPress 2.7

    WordPress 2.7 Comment Style Starters:

    Wordpress Stacked Logo

    One of the features I love in WordPress 2.7 is the ability to have threaded (nested) comments up to 10 levels deep. While viewing comments on this – or any WordPress 2.7-powered – site, you’ll notice a Reply button (assuming nested discussions are enabled). Clicking that will enable you to reply directly to that comment, keeping discussions in context.

    This is probably not all inclusive, but here is the basic structure for ol.commentlist as it exists in the Default theme’s comments.php. To take advantage of the new discussion features, I copied this file over to my own theme. (You’re more than welcome to roll your own.) For many of the elements, more than one class is used with it. Where applicable, I’ve chosen the most descriptive class (e.g. li.comment instead of li.alt) as the parent for child formatting.

    [css]
    ol.commentlist {}
    ol.commentlist li {}
    ol.commentlist li.alt {}
    ol.commentlist li.bypostauthor {}
    ol.commentlist li.byuser {}
    ol.commentlist li.comment-author-admin {}
    ol.commentlist li.comment {}
    ol.commentlist li.comment div.comment-author {}
    ol.commentlist li.comment div.vcard {}
    ol.commentlist li.comment div.vcard cite.fn {}
    ol.commentlist li.comment div.vcard cite.fn a.url {}
    ol.commentlist li.comment div.vcard img.avatar {}
    ol.commentlist li.comment div.vcard img.avatar-32 {}
    ol.commentlist li.comment div.vcard img.photo {}
    ol.commentlist li.comment div.vcard span.says {}
    ol.commentlist li.comment div.commentmetadata {}
    ol.commentlist li.comment div.comment-meta {}
    ol.commentlist li.comment div.comment-meta a {}
    ol.commentlist li.comment * {} – (p, em, strong, blockquote, ul, ol, etc.)
    ol.commentlist li.comment div.reply {}
    ol.commentlist li.comment div.reply a {}
    ol.commentlist li.comment ul.children {}
    ol.commentlist li.comment ul.children li {}
    ol.commentlist li.comment ul.children li.alt {}
    ol.commentlist li.comment ul.children li.bypostauthor {}
    ol.commentlist li.comment ul.children li.byuser {}
    ol.commentlist li.comment ul.children li.comment {}
    ol.commentlist li.comment ul.children li.comment-author-admin {}
    ol.commentlist li.comment ul.children li.depth-2 {}
    ol.commentlist li.comment ul.children li.depth-3 {}
    ol.commentlist li.comment ul.children li.depth-4 {}
    ol.commentlist li.comment ul.children li.depth-5 {}
    ol.commentlist li.comment ul.children li.odd {}
    ol.commentlist li.even {}
    ol.commentlist li.odd {}
    ol.commentlist li.parent {}
    ol.commentlist li.pingback {}
    ol.commentlist li.pingback div.comment-author {}
    ol.commentlist li.pingback div.vcard {}
    ol.commentlist li.pingback div.vcard cite.fn {}
    ol.commentlist li.pingback div.vcard cite.fn a.url {}
    ol.commentlist li.pingback div.vcard span.says {}
    ol.commentlist li.pingback div.commentmetadata {}
    ol.commentlist li.pingback div.comment-meta {}
    ol.commentlist li.pingback div.comment-meta a {}
    ol.commentlist li.pingback * {} – (p, em, strong, blockquote, ul, ol, etc.)
    ol.commentlist li.pingback div.reply {}
    ol.commentlist li.pingback div.reply a {}
    ol.commentlist li.pingback ul.children {}
    ol.commentlist li.pingback ul.children li {}
    ol.commentlist li.pingback ul.children li.alt {}
    ol.commentlist li.pingback ul.children li.bypostauthor {}
    ol.commentlist li.pingback ul.children li.byuser {}
    ol.commentlist li.pingback ul.children li.comment {}
    ol.commentlist li.pingback ul.children li.comment-author-admin {}
    ol.commentlist li.pingback ul.children li.depth-2 {}
    ol.commentlist li.pingback ul.children li.depth-3 {}
    ol.commentlist li.pingback ul.children li.depth-4 {}
    ol.commentlist li.pingback ul.children li.depth-5 {}
    ol.commentlist li.pingback ul.children li.odd {}
    ol.commentlist li.thread-alt {}
    ol.commentlist li.thread-even {}
    ol.commentlist li.thread-odd {}
    [/css]

    Here is the CSS I’m using to stylize my comments below. (You can see an example of the nesting here.) Even though a number of the selectors are currently unused, I am keeping them in place in the event I decide to do something with them in the future.

    I updated the following code to account for the presence of pingbacks in a comment thread. For my site, I used the more generic selector of ol.commentlist li instead of specifying a class (such as comment or pingback). This will allow pingbacks to be styled in much the same way as comments. The CSS above lets you target the types individually. (Which, if you wanted pingbacks to look different, you’d obviously would want to do.)

    [sourcecode language=”css”]
    ol.commentlist { list-style:none; margin:0 0 1em; padding:0; text-indent:0; }
    ol.commentlist li { }
    ol.commentlist li.alt { }
    ol.commentlist li.bypostauthor {}
    ol.commentlist li.byuser {}
    ol.commentlist li.comment-author-admin {}
    ol.commentlist li.comment { border-bottom:1px dotted #666; padding:1em; }
    ol.commentlist li div.comment-author {}
    ol.commentlist li div.vcard { font:normal 16px georgia,times,serif; }
    ol.commentlist li div.vcard cite.fn { font-style:normal; }
    ol.commentlist li div.vcard cite.fn a.url {}
    ol.commentlist li div.vcard img.avatar { border:5px solid #ccc; float:right; margin:0 0 1em 1em; }
    ol.commentlist li div.vcard img.avatar-32 {}
    ol.commentlist li div.vcard img.photo {}
    ol.commentlist li div.vcard span.says {}
    ol.commentlist li div.commentmetadata {}
    ol.commentlist li div.comment-meta { font-size:9px; }
    ol.commentlist li div.comment-meta a { color:#ccc; }
    ol.commentlist li p { font-size:11px; margin:0 0 1em; }
    ol.commentlist li ul { font-size:11px; list-style:square; margin:0 0 1em 2em; }
    ol.commentlist li div.reply { font-size:11px; }
    ol.commentlist li div.reply a { font-weight:bold; }
    ol.commentlist li ul.children { list-style:none; margin:1em 0 0; text-indent:0; }
    ol.commentlist li ul.children li {}
    ol.commentlist li ul.children li.alt {}
    ol.commentlist li ul.children li.bypostauthor {}
    ol.commentlist li ul.children li.byuser {}
    ol.commentlist li ul.children li.comment {}
    ol.commentlist li ul.children li.comment-author-admin {}
    ol.commentlist li ul.children li.depth-2 { border-left:5px solid #555; margin:0 0 .25em .25em; }
    ol.commentlist li ul.children li.depth-3 { border-left:5px solid #999; margin:0 0 .25em .25em; }
    ol.commentlist li ul.children li.depth-4 { border-left:5px solid #bbb; margin:0 0 .25em .25em; }
    ol.commentlist li ul.children li.depth-5 {}
    ol.commentlist li ul.children li.odd {}
    ol.commentlist li.even { background:#fff; }
    ol.commentlist li.odd { background:#f6f6f6; }
    ol.commentlist li.parent { border-left:5px solid #111; }
    ol.commentlist li.pingback { border-bottom:1px dotted #666; padding:1em; }
    ol.commentlist li.thread-alt { }
    ol.commentlist li.thread-even {}
    ol.commentlist li.thread-odd {}
    [/sourcecode]

    If you would like to learn more about the enhancements made in comments, here are a couple of sites you should check out for further information:

    WordPress 2.7 Comment Style Starters:

  • Theme Updates

    The WordPress community gives much of itself to users who don’t always give back. I created Effercio Blue and Nanideska last year, but as of today both they are being released under GPL. If you downloaded them prior to today, the old Creative Commons license still applies.

    • Effercio Blue – A two-column theme for WordPress. Support WordPress tags, dynamic sidebar and widgets, and includes custom link and archive page styles. Future plans for this theme include adding additional color variations. This theme and its accompanying elements are released under GPL. Download Theme | View Demo)
    • Nanideska – A simple two-column theme based on an earlier iteration of cdharrison.com. This theme and its accompanying elements are released under GPL. Download Nanideska | View Demo

  • Disqus

    I disabled Disqus commenting on my site. As it stands now, it just doesn’t integrate fully enough into WordPress for me to be happy with it. I’ll see if I can migrate the handful of comments over to be on my site within the next day or so. I think Disqus has a lot of potential, but I just can’t get used to having it here.

    Update: I’ve re-enabled Disqus for the time being. Having trackbacks is a welcome addition.

  • 50000+ Spam Messages Killed and Counting

    Since installing Aksimet, it’s blocked 50,222 spam messages from appearing on my site. That’s a lot of crap I didn’t have to deal with. Thank you Akismet. (I wish I could determine exactly when I started using the plugin… but I am not sure where to find that information…)

    If you’re blogging with WordPress, enable the Akismet plugin right now.

  • Nanideska Now Available

    Screenshot of Nanideska themeAfter a bit of a delay, Nanideska is now available.

    I’m calling this a 1.0 release, simply because it works as is… but future development and improvements are planned. Your feedback will help drive future plans for this theme!

    I’ve purposefully tried to limit the color palette to shades of gray, cyan and lime green. (I know this isn’t going to work for everyone.) The top navigation area is where top-level pages are displayed. Support for sub-pages is not currently included. The main content area on the homepage features a lead-in article, followed by several of the most recent posts. (I borrowed the idea from Bryan Veloso‘s Chaotic Soul theme for WordPress.) A sidebar is included to the right of the content area, and can be switched to a dynamic sidebar with WordPress Widgets, but no work has been done (yet) to stylize any of the default Widgets.

    This theme works best with WordPress 2.3 or higher.

    Nanideska is released under the Creative Commons Attribution-Share Alike 3.0 United States license. If you have any questions as to what rights are granted to you under this license, don’t hesitate to contact me.

    Download Nanideska | View Demo

  • Making WordPress work for me

    WordpressThe wide variety of plugins available for WordPress is what sold me on the application. If WordPress doesn’t do something you’d expect it to do, there’s probably a plugin available to fill the void. On my site, I use several plugins to keep things running smoothly or to add functionality not present in a core-install of WordPress.

    (I’m hoping that all of the links below work. If you happen to come across one that doesn’t resolve, please let me know!)

    • Akismet 2.0.2 – This plugin checks comments against the Akismet web service to see whether it’s spam or not. This plugin alone has stopped over 24,000 spam comments from appearing on my site. It’s worth it’s weight in gold. If not for Akismet, I probably would have turned comments off a long time ago.
    • Bannage 0.2 – This plugin lets me ban commenters by IP address, username, email address or by the URI they use in comments. I don’t use it often, but it’s come in handy a couple of times.
    • Download Counter 1.2 – I recently added this plugin to keep track of how many folks were downloading the WordPress theme I posted. You can use it to keep track of any file on your site that you’re offering for download.
    • Google Sitemaps 2.7.1 – This plugin automatically generates a Google-compliant sitemap of your site. You can even specify pages that exist outside of your WordPress install. (The sitemap.xml file it generates is also compatible with MSN Search and Yahoo, but doesn’t currently notify either of those services when the sitemap file is updated.)
    • Gravatar 1.1 – If commenters have a Gravatar account, their globally-recognized avatar is displayed next to comments they make here on my site (and on others that support gravatar).
    • HP Blog Printing 1.0.8 – This plugin gives users the option to print multiple posts into a convenient, easy-to-read PDF. (To be honest, I don’t know if it’s used much on the site but I’ve kept it activated regardless.)
    • Live Comment Preview 1.7 – This plugin lets commenters see what their comment will look like as they are typing. I’ve found this feature useful on other sites, and thought it would make commenting more user-friendly.
    • Ma.gnolia 1.0 – This plugin outputs a list of my most recent Ma.gnolia bookmarks. You can view these on my links page.
    • Official Comments 1.1 – This plugin let’s me stylize comments that I make differently than regular comments posted on the site.
    • Related Posts 2.04 – Returns a list of posts and pages relevant to the current post you’re on. I’ve found this plugin works great and directing traffic to other articles on my site that are similar to posts people have found via search engines.
    • Spam Karma 2.3 rc1-2 – Coupled with Akismet, spam is a thing of the past for me. I’ve only had a few problems with false positives, but it otherwise works great!
    • Subscribe to Comments 2.1.1 – Lets commenters subscribe to a discussion thread, so that if new comments are made, they have a visual cue (email) that invites them back into the discussion. If you want return visitors, I think this plugin is a quick and easy way to ensure people come back to your site.
    • WordPress Database Backup 1.8 – Invaluable plugin. I use it before I upgrade to the latest and greatest version of WordPress.
    • WP Audioscrobbler 0.35 Beta – This plugin lists my most recently scrobbled tracks from Last.fm.
    • WP Movie Ratings 1.4 – Powers my movie page, where I keep track of movies I’ve watched recently. (The list is far from complete.)

    Other plugins that I have used in the past (or an ad hoc basis) include:

    • Admin Theme Preview 2.0 – This allows administrators to test out new themes without effecting what front-end users see in their browser. I usually leave this disabled unless I am testing out a new design.
    • Anti-Leech 1.6 – This plugin helps prevent scrapers from stealing content and bandwidth. I’ve used this plugin off and for a while now. It works well, but I tend to deal with scraping on an individual basis. Many of the other plugins I use on a day-to-day basis make using this one redundant.
    • Bad Behavior 2.0.10 – Denies spambot attempts at accessing your site. I love this plugin, but currently have it disabled, because it causes connection problems with the new Windows Live Writer beta.
    • Tiger Style Administration 3.0 – Steve Smith’s Tiger Style Admin puts a beautiful, app-like face on the WordPress backend. The only reason I don’t use it is because it’s not fully compatible with WordPress 2.2+, and Steve has no plans to updated the plugin any longer.

    If you’re looking to add additional functionality to your WordPress site, definitely check out the WordPress Plugin Directory. The plugins I use only scratch the surface of what’s currently available. Because of the extensibility of WordPress, developers are creating new ways to use this powerful blogging platform in different and creative ways.

    But enough about my plugins. What sort of plugins are you using on your site?

  • Tags in WordPress 2.3

    WordPress 2.3 introduces a new feature to the popular blog platform: tagging. Sure, you’ve been able to do it with plugins like Ultimate Tag Warrior in the past, but WordPress’ built-in tag system is simple, unobtrusive, and easy to use.

    In order to get tags to display on individual posts, we’ll use the_tags.

    <?php the_tags('before', 'separator', 'after'); ?>

    Here’s how I currently have things setup:

    <?php the_tags( 'Tags: ', ', ', ''); ?>

    This gives me something like this at the bottom of each post that has tags:

    Tags: Tag 1, Tag 2, Tag 3

    Another new tagging feature in WordPress 2.3 is the introduction of wp_tag_cloud. The tag cloud takes all of your tags and displays them based on how much you use them on your site. You can see a live example of it on my archives page. To get the tag cloud on your site, you’ll use the following syntax in one of your templates:

    <?php wp_tag_cloud(??); ?>

    Where might you display the tag cloud? Well, you could put it in your sidebar, but I am not sure how system-intensive generating it is… I’d recommend creating a stand-alone page for it, or limiting the use of it on key pages only.

  • Nanideska

    This coming weekend I’ll be releasing my second WordPress theme: Nanideska. Nanideska is a two-column theme based on the design I previously had here at cdharrison.com. I was thinking I had a screen capture of it somewhere, but searches through my archives on flickr didn’t yield any results. The following capture/Photoshop image should give you a general idea as to what to expect:

    nanideska

    Look for Nanideska to drop sometime soon.

  • Effercio Blue

    Information on this theme can now be found on this dedicated page: Themes > Effercio. This post will no longer be updated.

    Well, the time is here. As promised yesterday, I’m releasing Effercio Blue into the wild. You can snag it here:

    A demo of the site can be found here.

    Obviously, I’m expecting there to be issues. If you happen to find any that make the theme unusable for you, please let me know.

    The theme includes:

    • Support for WordPress Tags (a new feature in WordPress 2.3)
    • Support for Dynamic Sidebar and Widgets
    • Custom Link and Archive Page Styles
    • Inline Asides*

    If you’re wondering what the rationale behind the name is… effercio is Latin for “stuff”, and that’s what my site’s all about… Anyway, I hope you enjoy the theme! Let me know what you think!

    Addendum

    • (10.05.07) – Added Effercio Blue to FreeWordpressThemes.com
    • (10.03.07) – Released 1.0.1. Fixed issue in header.php where Home link was not working properly.
    • (10.02.07) – Effercio Blue was featured on Weblog Tools Collection.
    • (09.05.07) – Inline Asides can be enabled by creating a category called ‘Asides’. The logic’s already in place on index.php to handle the special formatting for it. If you do add it, you’ll simply need to make one (OPTIONAL) modification to your sidebar.php file. (It hides Asides from the category list.) I use Asides to post links that I wouldn’t normally do a full post on.

      <?php wp_list_categories('title_li=&show_count=0&exclude=ASIDECATEGORYID'); ?>

    Enjoy!