Feature
Post

Category
Webapps

Digg: The Review

Digg Version 3 has finally launched.

After being talked about continuously, especially over the past few weeks, the highly publicized and extremely busy Digg.com has been updated.

Digg.com V3

The New

The design itself features the new “Web 2.0″ look that is so popular in design today, but it’s what the Digg team has managed to do under the hood that truly adds much more character to digg.

The homepage starts off with an updated design, with clean gradients, the familiar “Top Stories”, and quick and easy access to your profile. But, digg no longer stops there. You can now choose between the top for today, the week, the month, and the year. (Now that’s a lot of Diggs!).

Digg.com Profiles

Digg has also finally begun to expand, including such categories as World & Business, Entertainment, Games, and Videos, alongside the standard Technology and Science categories.

Upon visiting your profile page for the first time, you’ll notice the user CP has also been revamped, this time it allows you to managed topics (which topics to watch), view your history (see what you’ve dugg, submitted, and commented on), and view your friends and their history.

Digg now also features links at the bottom, including access to the Digg blog and Diggnation Podcast. Another nice new feature is the introduction of Ajax to give you a live, as you type preview while submitting new stories.

Digg.com Spy

The Bad

While most of the talk remains on what Digg 3 brings to the table, there are plenty of people who are annoyed with the latest release of Digg. The homepage is beginning to get filled, which is one thing that often kept digg good, because it was so simple. Another annoying problem is that digg does not adjust to your screen resolution. While Digg 3 is just a little wider than Digg Version 2, it’s aggravating people enough to complain about the lack of automatic resize.

Still, Digg 3 is sure to leave fine impressions in most peoples minds, minus the few quirks they may have with the newest design.

Alternative Digg

There was an article that made it to the frontpage of Digg late last night, which provided an alternative stylesheet to use in Firefox to get digg to look a little better. According to the blurb that was on Digg alongside this submissions, this hack is supposed to give Digg the older nav look and clean up a few other details. Once I have the chance to try it, I’ll post a screenshot. There are two versions, one with regular font size and one with larger fonts. The code for the regular font version is below, and you can grab the other from here. To install, copy the css to your usercontest.css or download the Stylish plugin for Firefox.

@-moz-document domain(digg.com), domain(www.digg.com) {

.sub-menu .tool strong { font-size: 11px !important; font-weight: bold !important; padding: 0px !important; margin: 0px !important; background-image: none !important;}

.news-summary { margin-bottom: 12px !important; margin-top: 12px !important; }

.digg-count { margin-top: 3px !important; }

h2 { font-size: 18px !important; }

h3 { font-size: 13px !important; font-weight: bold !important; letter-spacing: normal !important; }

.toggle a, .view-all a, .side-friends a, ul a { font-weight: normal !important; font-size: 11px !important;}

#top_ad, #item_ad, #footer, .copyright, .top_ad_image, .banner_ad, .comments_ad_image {display: none !important;}

.digg-count a strong {font-size: 14px !important; font-weight: bold !important; }

.sub-menu li .toplinep { width: 138px !important; }

.comment {width: 710px !important;}

.news-digg img { padding-top: 4px !important; padding-left: 1px !important; }

h3 a { border: none !important; background: none !important; font-weight: bold !important; font-size: 11px !important; letter-spacing: normal !important; text-decoration: underline !important; padding-left: 3px !important;}

.news-submitted { margin-left: 3px !important; padding-left: 0px !important; }

p { margin: 3px !important; }

#contents, #sidebar { float: left !important; border: none !important; background: none !important; font-size: 11px !important;}

#container {background: none !important; }

#sidebar {padding: 20px 0 1em 35px !important;background-position: 0 0; }

#footer {background: none !important;}

}

Feature
Post

Category
General

Digg down, moving towards upgrade

Digg has been temporarily shut down as the staff prepare for the launch of Digg 3 sometime today. As soon as the launch is made public, Devlounge will feature a hefty review of new digg features, so be sure to check back later today!

Feature
Post

Category
Homepage News

Coding Started on D2

The final design for Devlounge Version 2 (July) has been chosen. The mock, at about 80% final (we’re not showing you everything yet ;)) can be seen at flickr. It is the one on the left. Please leave your comments below as well as feature requests, we’ll try to squeeze everything in for you.

Once again, my mate Prash (Xirgo) will do most of the base coding, as well as helping me out with getting some ajax into D2. I’ll most likely handle the port to WordPress and adding everything up.

Stay tuned!

Content Note: We have interviews with Steve of Orderedlist, Ryan Sims, and a few others due and on the way soon. Stay alert by subscribing to our feeds.

Feature
Post

Category
General

How Q.U.I.C.K is your site?

Just what in the world is this?

Quick is a scale to rate your site on, based on 5 major categories:

  • Quality
  • Usability
  • Informative
  • Clarity
  • Kode

Quick Rankings

So what exactly is the point?

A while back, Vitamin contributor Mike Rundle (Of 9Rules, Business logs, and HiMike) wrote an interesting article titled “How C.R.A.P. Is Your Site Design“. The article explained four major points to consider when designing, that help create separation and make content stand out much more prominently.

But what about after the design process is complete? How can you keep your site afloat?

Quickly, an introduction to QUICK

Quick is our own made up scale of questions to ask yourself after your site is live, so you can keep things going long after launch. The five elements of quick all refer to things that are necessary for site success.

In the following pages, we’ll go into detail on each of these elements, one by one.

Feature
Post

Category
Code

How2 K2 – Modifying FlickrRSS

The following article was originally written at Cory’s Weblog. For more articles like this either read Cory’s articles here at DevLounge or visit his personal site.

If you haven’t figured it out already, any element of k2 can be modified. As long as you know some basic PHP and CSS, and know where to look, you can modify anything to make it your very own. In this tutorial, I am going to discuss the modification of FlickrRSS and some different ideas to make your FlickrRSS plugin stand out.

If you search your style.css file for Flickr, you will come up with some code that looks like this:

/*-
FlickrRSS
*/
.sb-flickr div img {
border: 0px;
padding: 5px;
}

.sb-flickr div a img {
border: 1px solid #ccc;
padding: 3px;
margin: 5px 3px 0;
}

.sb-flickr div a:hover img {
border: 1px solid #999;
}

This is the block of code that covers the entire flickrRSS plugin. For the first modification idea, we are going to try and get 10 images displayed without taking up anymore space than the size of 2 default images.

To do this, we are going to add the following code under .sb-flickr div img:

height: 32px;
width: 32px;

That will make each image shrink down to 32×32 px. Then, when you go to your FlickrRSS options and set it to display 10 images, you will get 2 rows of 5 images at 32×32 px. Pretty sweet huh?

Now, for the second mod, you have probably seen those spiffy one column designs with the FlickrRSS at the bottom in a nice row spanning accross the entire footer. Have you ever wondered how you could make yours look like that? Well, read on.

Open your index.php file in the root of your k2 dir and place the following code between the PHP statement that calls up theloop.php and the /div tag.

<?php if1) { ?>
   <div class=”sb-flickr”>
    <div>
     <?php get_flickrRSS(); ?>
    </div>
  </div>
<?php } ?>

Now, since we have placed it where we want it to go, we need to style it. Add the following code to your CSS file.

.sb-flickr{ /* this was specific for my blog width - play with it */
margin-left: -14px;
width: 623px;
background: #d1f0ff;
text-align: center;
padding: 5px 0 5px 6px;
border-bottom: 1px solid #94dbfc;
border-top: 1px solid #94dbfc;
}

There you go. Another fine example of how any element of k2 can be customized with a little PHP and CSS magic.

~Cory

  1. function_exists('get_flickrRSS' []

Feature
Post

Category
Code

How2 K2 – Categories

The following article was originally written at Cory’s Weblog. For more articles like this either read Cory’s articles here at DevLounge or visit his personal site.

In this edition of how2 k2, I am going to be discussing categories and some cool things you can do involving them. So, open up your website, get your k2 files at hand, and get ready to further hack-up your blog.

Hiding Categories From The Sidebar

Open your sidebar.php and page-archives.php files and look for the function called list_cats. This is what generates the category list that you see on the default k2 archive pages.

<?php list_cats(0, '', 'name', 'asc', '', 1, 0, 1, 1, 1, 1, 0,'','','','','') ?>

To exclude a certain category, or categories, from appearing anywhere where this list is placed, add the ID number of the category to the last set of quotations. To find the ID number of the category, look in your admin panel under manage > categories. For example, to exclude categories 2 and 9, you would use the following code:

<?php list_cats(0, '', 'name', 'asc', '', 1, 0, 1, 1, 1, 1, 0,'','','','','2, 9') ?>

Notice that you need to separate each category that you are specifying the exclude with a comma.

Also, if you would like to exclude the display of categories in the ELA plugin, just configure it in the options of for the plugin.

Category Clouds

Decidedly Bored has a great article discussing how to make a cloud much like the tag cloud for the UTW plugin, but using categories instead.

The category cloud is a creative alternative to the usual, mundane method of displaying categories in a list. It gives the reader a quick visual representation of the relative spread of entries amongst your categories.

If you are interested, check out his article here.

Conversational Categories

If you are a freak about every little detail of WordPress, then you will find this hack quite cool. After doing a little research about cool things you can do with categories, I came across a great plugin allowing you to make your meta data “talk” to you (for a lack of a better phrase). Basically, instead of displaying categories like “Category 1, Category 2″, it displays them a little nicer such as “Category 1 and Category 2″. This can make the site look a little more user friendly.

All you have to do is download this file, save it with a .php file extension, and drop it into your plugins folder. Once you activate it, it will create a new php fuction called the_nice_category().

Now, just replace the original calling for the category for which it is filed, with the following:

<?php the_nice_category(', "', '" and "'); ?>

Note: This is done in theloop.php.

More information about this plugin can be found at it’s official page.

Well, I think that is enough for this article. I hope you enjoyed the tips and as always, your questions and feedback are always welcome in the comments. Have fun and happy modding!

~Cory

Feature
Post

Category
Code, Strategy

How2 K2 – Becomming Search Friendly

The following article was originally written at Cory’s Weblog. For more articles like this either read Cory’s articles here at DevLounge or visit his personal site.

In this article, we are going to create a section in the sidebar of an individual post that will display every time a visitor comes to your blog from a search engine. We are going to optimize this section to let the visitor be aware of the best posts on the blog, posts that are related to the post they came to your blog for, and more.

Getting Started

First, before we start adding features, we need to create a place to put all of this code. To keep everything as simple and easy to code as possible, we are going to create a separate file to hold all the code for this feature. Name it something like searchfriendly.php or something similar.

Now we need to place an include statement in your sidebar. Open sidebar.php and add the following code in right below your search bar:

<?php include("searchfriendly.php"); ?>

So now, your that section of your sidebar should look like this:

<div class="sb-search"><h2><?php _e('Search','k2_domain'); ?></h2>
<?php include (TEMPLATEPATH . ‘/searchform.php’); ?></div><br/><br/>

<?php include(”menu.inc”); ?>

Or something similar to that. Notice that I have added the to br tags to make sure that there is even space between the block of code and the search bar. We don’t want things to get too over crowded.

Landing Page

I came across this great plugin from a fellow blogger.

A landing page is the page people arrive on your site from a search engine. When visitors reach your blog from search engines they probably skim your content to see if it is what they are looking for. If not, they are likely to leave your site and perhaps never come back again. So why not help them by showing them related posts to their search on your blog?

You can get more information on this plugin as well as installation instructions at this site.

Popularity Contest

It’s not rocket science to know that you want to tell your new visitors what the best posts are on your blog. This next tip will easily teach you how to do that. This plugin will help you see which of your posts are most popular. Views, comments, etc. are tracked and given point values to determine popularity.

To get this plugin working, you first have to download the package. The, upload the plugin file to your plugin directory in WordPress. Once it is installed, you can change the values of what makes a popular post popular. Once that is all set, now you have to display it in your sidebar. Add the following code right below that last modification we made.

<li><h2>Most Popular Posts</h2>
   <ul>
   <?php akpc_most_popular(); ?>
   </ul>
</li>

Now, when new visitors come to your site, they will see related posts on the subject that searched for, and also the best and most popular posts overall in all sections of the blog.

Conclusion

So that’s it for this article. I hope you have found these tips useful. The next article I am working on is making the ultimate archives page. This means modifying the default archives page in k2 and adding statistics, most commented posts, a list of the the noteworthy posts (if that plugin is installed) and more. So stay updated for that and as always, your comments and feedback are welcome in the comments. If I have made a mistake, feel free to tell me in the comments.

~Cory

Happy Modding.

Feature
Post

Category
Code

Text Linking To Your Feed

The following article was originally written at Cory’s Weblog. For more articles like this either read Cory’s articles here at DevLounge or visit his personal site.

I recently read a post on a fellow blogger’s site, JohnTP about why making sure that you have a text link to your feed is important. Basically what he says in his article is that some people surf the web with images disabled by default. So, if you only have a shiny image saying, “Subscribe to my Blog”, that reader isn’t going to see it. Now, making a text link to your blog feed doesn’t have to be boring. In this tutorial, I am going to teach you how to make a nice link to your blog’s RSS feed without using images, so that you can be assured that your readers will see it.

First off, remember that you never want your users to search for something that they are looking for. If it takes them too long to find it, they may just say, “Forget about it” and decide its not worth the hassle. I would suggest looking at your blog, and deciding where the best place to put it is. Remember to place it somewhere that is easy to find, but at the same time, isn’t in their way bugging them every second.

Now that you have found a good place, lets get started on designing that button.

By using an element’s border-style CSS attribute to outset, you can easily create a 3D looking button. Taking it one step further the button can also appear depressed if desired, by switching from a border-style value of outset to inset. The below examples are 100% CSS based, not to mention lightweight:

Lets look at the CSS code that’s going to power this nice button:

.rssbutton{
background-color: #ff6600;
border: 1px #ff6600 outset;
padding: 0 2px;
text-decoration: none;
font: bold 10px Verdana;
}

All you have to do is copy the above code into your CSS file, then when you call it up with the HTML code I’m about to give you, it will look all nice. But first, let me explain what all this code does. I am going to assume that you already have some type of knowledge of CSS. So I don’t have to take it line by line. You already know that it is assigning the color #ff6600 as the background, etc.

border: 1px #ff6600 outset;

The above line is making a 1 pixel border using an outset property to make it look more 3d, as you can see below:

RSS Button Demo

And when you hover over the button, it will make the text change. You can customize this code to your liking, but I do want to go over one example that is pretty cool: making the button look depressed when you hover over it.

For this mod, you need to add the following code:

.rssbutton:hover{
border-style: inset;
background-color: #000;
padding: 2px 3px 0 5px; /*shift text 1px to the right and down*/
color: white;
}

What the above code does is shift the text 1px to the right and down to give the impression that the button is really being pressed. It also changes the background to black.

The color scheme can easily be changed to match your theme. Now, lets incorporate this into your blog.

Add the following code where you would like your buttons to go.

<p>
<a href="http://feeds.feedburner.com/coryholt">RSS</a>
<a href="http://cholt.net/blog/sitemap.xml">XML</a>
</p>

And there you go. Make sure to change the links to your own pages. I hope that you have found this tutorial helpful. I would also like to say that this can be easily modded to match your site. Of course your suggestions, feedback, and questions are always welcome in the comments.

~Cory

Feature
Post

Category
General

Migration Patterns: A Flock Review

Earlier last week our buddy Paul published the Definitive Flock Review. It was an excellent review that covered just about every aspect of flock, from installing to each one of it’s highly talked about features. The review explained so much, it convinced me to finally take the plunge and download flock.

What is it

Flock is the newest browser to be based off of Mozilla’s Gecko Rendering Engine. Before you roll your eyes and say, “another one”, take a look at what flock has to offer.’

Flock was set out to be a “social browser”, allow the incorporation of Flickr, social bookmarking, and even blogging directly from the browser, regardless of what page you were on.

Visiting Flock

Visiting flock for the first time, you instantly fall in love with the simplicity of the site design. The redesign, handled by Bryan of Avalonstar (easy to tell once you look at the colors and fonts), conveys Flock message clearly and easily, even using some flash to showcase some of Flocks’ features.

Download and Installation

Flock is a generally small download, weighing in at just under 8MB. Installation is quick and easy. Upon launching flock for the first time, you are given the chance to import settings from both Firefox and Internet Explorer, and then there is a short setup wizard that follows. You are then taken to the flock welcome page, highlighting all of its various features.

Worth A Look

There are many wonderful features that Flock has incorporated. Personally, my favorites are built in rss reader and live search, that scours the net for search results while you continue to browse around.

Flock still has a ways to go, but it is off to a wonderful start. I suggest you have a look at Paul’s full flock review, and then take Flock for a test-drive of your own.

Feature
Post

Category
Code

PSD to Xhtml

Alright, so you spent a few hours in photoshop creating your best design, now you want to get it live as soon as possible. But now you run into trouble. You could just slice it up and upload the Imageready-generated html, or recode it all by hand. But how?

Article Contents:

  • PSD to Xhtml
  • Getting Rid of those Un-Needed Images
  • Recoding by hand
  • The Differences

PSD to Xhtml

In this article, I attempt to guide you through a basic psd design, the slicing, and re-coding to get rid of the Imageready code and make it your own.

Let’s start off with basics. You open up Photoshop, make a design, and open it in Imageready to begin slicing up images. For the purpose of this demonstration, I opened a blank canvas 650x500px, and layout down sup simple design.

Removing Those Un-Needed Images

Once I opened up my PSD in Imageready, I made note of what “images” didn’t have to be there. When you design, generally you are only making a template for content. Alot of times you’ll use background colors for content areas, and then when you slice them up, you leave them as background images.

The beauty of css is it allows you to do all this without needing images. Go through your design while writing down the hex codes for different areas of your design.

Once you’ve written down the hex codes, slice up your design as you wish and export a Imageready generated copy of the html, and well as all the images.

Next you’ll need to open up a text or html editor, in this case we used Dreamweaver, and the Imageready generated html file.

Feature
Post

Category
General

A new blog network

Over the best few days I spent time reworking my other project, Soundchronicle, into an all music related blog and site network. The idea was to expand on what 9Rules was doing, but narrow it down to nothing but music.

The result was Soundchronicle, but with Network added to the end. The network went live a few hours ago at the official site.

Was it a good idea or know? We want to know your opinions and suggestions, because we can then use them for a future article we have planned on blogging networks and todays internet.

Feature
Post

Category
Homepage News

Lack of Content

I appologize for the lack of content lately. Last week was spent working on exams before the summer, and I spent my first two days off just relaxing. I’m ready to get writing again. I’ll be sending out emails to some people who I want to interview this week, and hopefully I’ll also get a few interviews currently in hold in as well. I also have an article I started up a few days ago to launch a new feature; video tutorials. I just have to wait for the video to go live on google before I publish it.

In some more final quick news, I changed formats of the email list, so it sends out updates automatically on Mondays at 12PM EST – no more whenever-I-get-the-chance.

Stay tuned, I hope to get the content back into action throughout the week.

(Another note: D2 is coming out well, I’m actually working on two seperate layouts, they’ll have to be a vote or something).