Good Navigation Links

May 23, 2009

It helps people move around your site when you have a clean navigation menu in the sidebar and/or the footer. It helps people find the posts and articles you want them to find. There are a variety of methods for user friendly site navigation on your WordPress site.

Helping the user use your site means putting things where they can find them. Following the newsletter formats from the days of print, most website users are used to looking for intra-site links on the sides and bottom of a web page. As a designer, you can put them anywhere you want, but let’s stick with the conventional placement for now. After all, we want our WordPress sites to be user-friendly, right?

In the two WordPress Themes that come with your WordPress installation, both use a sidebar to hold most of the site’s navigation links. Other Themes may use navigational aids in the header and footer. While these navigation links can be displayed in any template file, typically, the navigation links include:

  • Pages
  • Categories
  • Archives (by month)
  • Links
  • Admin or Meta

The template tags associated with generating this list of navigation links are found in the default WordPress Themes’s sidebar inside of a nested list. Let’s look at each of these tags individually and then look how to expand the use of navigational aids on your WordPress site.

Pages

With the introduction of WordPress v1.5, Pages were available to help the administrator create individual Pages outside of the WordPress Loop such as Contact Us, About Us, and What’s New. The template tags used to display the list of individual Pages is wp_list_pages().

<?php wp_list_pages(); ?>

There are many ways of customizing the wp_list_pages() tag to be more useful to your users. A long list of Pages and sub-Pages can go on for quite a while, so you might want to only feature the most important Pages in your sidebar.

To exclude some Pages from your list, you can set the parameters for exclude. The following example excludes Pages with the Page-ID numbers of 17 and 38.

<ul>
<?php wp_list_pages(‘exclude=17,38′ ); ?>
</ul>

To learn more about customizing the wp_list_pages() template tag, visit the Template Tag page for wp_list_pages().

Categories

The best template tag for creating a category list in your navigation menu is wp_list_categories().

The default usage of the category list tag is:

<?php wp_list_categories(); ?>

Again, like the Pages template tag, you can use exclude to limit the categories you want listed, making it easier for the user to pick from only a few instead of twenty or thirty categories. The following example excludes category-IDs 10 and 15.

<ul>
<?php wp_list_categories(‘exclude=10, 15′); ?>
</ul>

If you would like only to feature the children or sub-categories of one or more categories in your category list, you can use the child_of parameter.

<ul>
<?php wp_list_categories(‘child_of=8, 14′); ?>
</ul>

To learn more about customizing the these template tags, visit the Template Tag page for wp_list_categories().

Archives

Like the categories template tag, there is an Archives date-based Template Tag called wp_get_archives(). The tag will allows you to display links to archives by year, day, week, day, or individual posts. You can limit the number of actual links to show in your Archives template tags.

The default usage of wp_get_archives will show a link for each month of posts:

<?php wp_get_archives(); ?>

To show the most recent three months of posts by month, you would use the following:

<ul>
<?php wp_get_archives(‘monthly&limit=3′); ?>
</ul>

Displaying the archives by date, you can show the most recent 15 days:

<ul>
<?php wp_get_archives(‘type=daily&limit=15′); ?>
</ul>

If you would like to show the actual posts, you can use the parameter postbypost which displays the most recent posts, with the number set by the limit parameter. To show the last 25 posts by post title:

<ul>
<?php wp_get_archives(‘type=postbypost&limit=25′); ?>
</ul>

To learn more about customizing the this template tag, visit the Template Tag page for wp_get_archives().

Links

The Links feature of WordPress, managed via Administration > Links, allows displaying of external links, such as a blogroll, a user would like to feature on his or her blog. These links are generated by the template tag, wp_list_bookmarks(). For examples and more information on the specific use of each of this template tag, see wp_list_bookmarks().

Admin or Meta

The Admin or Meta list of links in the WordPress sidebar are the links which are used by the Administrator, if logged in, to access the administration panels of the site. They may also feature RSS Feeds and other information related to the administration or use of the site. Check the following tags for more information on which ones you might want on your site to assist yourself and other registered users:

  • wp_register() – Registering on your site for comments and other administrative purposes
  • wp_loginout() – Logging in and out of your site’s administration panel with a password
  • bloginfo() – Various parameters available for setting the RSS/Atomz/RDF feeds for the site and comments
  • Template Tags – For more information on various template tags to use on your site

Other Navigation Locations

In addition to the sidebar, you can help your users navigate through your site with navigation tags used elsewhere, such as in the header and footer of your site. Using the above template tags for navigation links, you can style the link lists as horizontal menus instead of vertical lists.

Link to Posts and Pages

Often in these narrow areas, you may want to only highlight specific posts or Pages to save space and direct the user to specific areas to continue their browsing. To include a specific link to a post or Page, you can use the get_permalink() template tag.

The following example presents links to post-ID numbers 1 and 10 and lists the categories on the site, excluding category-ID 2 and 4.

<li><a href=”<?php echo get_permalink(1); ?>”>About My Blog</a></li>
<li><a href=”<?php echo get_permalink(10); ?>”>About Me</a></li>
<?php wp_list_cats(‘exclude=2, 4′); ?>

The list might look like this:

  • About My Blog
  • About Me
  • My Stories
  • My Travels
  • My Friends

Next and Previous Posts

There are two other sets of navigational aids to consider as you design your site. Both of these sets involve moving a user through your site from one post to another.

The first set is featured only on the non-single/non-permalink web pages and is the template tag posts_nav_link(). This tag creates two links at the bottom of the page within the WordPress Loop to display the next and previous pages of the index, archives, searches, and categories.

By default, the posts_nav_link looks like this:

« Previous Page — Next Page »

To learn more about changing the look of this link, visit the Template Tag page for posts_nav_link().

The other set of navigational aids for moving through your site control the next post and previous post links typically found at the bottom of your single/permalink post. These direct the user to move to the next chronologically created post or the previous.

The template tags are previous_post() and next_post(). These can be styled in several different ways, using the next post and previous post titles or using the actual titles of the next and previous posts.

The following example displays the next and previous post titles with arrows to emphasis the direction the user may choose.

<?php previous_post(‘&laquo; &laquo; %’, ”, ‘yes’); ?>
<?php next_post(‘% &raquo; &raquo; ‘, ”, ‘yes’); ?>

« « Previous Post Title    |    Next Post Title » »

To learn more about changing the look of these links, visit the Template Tag page for previous_post() and next_post().

Styling Your Navigation Links

As you have seen, there are a lot of ways WordPress uses to help the user move through a WordPress Site. We’ve shown you some of the WordPress template tags, but there are also many Plugins available which also assist with site navigation such as providing related posts, customized post lists, and more to customize your site’s navigation.

The following are some of the resources that may help you in stylizing and customizing your navigation lists.

  • Next and Previous Links
  • Styling Lists with CSS
  • Creating Horizontal Menus
  • Dynamic Menu Highlighting
  • Navigation Plugins

Current versions of WordPress now have image alignment built-in. WordPress adds CSS classes to align the image to the right, left, and center of a paragraph, so the text will wrap around the image.

In order to take advantage of these new CSS classes for image alignment and the text wrapping around the image, the WordPress Theme must include the following in the style.css found in the WordPress Theme directory.

img.alignright {float:right; margin:0 0 1em 1em}
img.alignleft {float:left; margin:0 1em 1em 0}
img.aligncenter {display: block; margin-left: auto; margin-right: auto}
a img.alignright {float:right; margin:0 0 1em 1em}
a img.alignleft {float:left; margin:0 1em 1em 0}
a img.aligncenter {display: block; margin-left: auto; margin-right: auto}

When adding the image in your WordPress blog, select the image alignment as right, left, or center in the Image/Media Panel.

The image will be embedded into your blog post with the selected style for alignment such as:

<img src="http://example.com/images/leaf.jpg"
 alt="leaf graphic"
 title="leaf graphic"
class="alignright size-medium wp-image-3109"
height="25" width="30"/>

Giving The Image Style

There are times when you want an image on your post to fill the screen, or sit in the middle of text with writing above and below it, but most of the time you want your image to sit on one side or the other of the text and have the text flow or wrap around the image. While the styles above will float the image left and write, you may want to add more design elements to your image.

Let’s start from the beginning with a simple guide to using images in your WordPress blog.

First, here is a look at a typical image tag in your post, without the instructions for wrapping the text around the image. Note that we’ve added both the title and alt attributes to the tag; alt is important for accessibility, title is for the image tooltip.

<img src=”http://example.com/images/leaf.jpg” alt=”leaf graphic” title=”leaf graphic” />

To begin the process of setting your image up to be wrapped, there are a few changes that you may need to make to the style sheet that controls your WordPress site. CSS offers a great list of resources for creating and editing Cascading Style Sheets.

From your WordPress Theme folder, open the style.css file in a text-editor. Important! Save a back up copy somewhere before you do any edits! Now, do a search for img. Hopefully, all your image selectors will be grouped together. If not, find them all and cut and paste them into one group to make this process easier.

Borders

You’ll need to decide if you want a border around your images and, if you do, what size, color, and type it should be. For no border, you would use the following:

img {border:0}

Image:leaf.gif

For 1 pixel solid red line border, add:

img {border:solid red 1px}

If you create a link around an image, some browsers will put a border around the image to let the visitor know it’s a link. If you don’t want that, use the following:

a img {border:0}

You can still add a hover around the image so when the visitor moves their mouse over the image, not only will the mouse pointer turn into a hand, the image will get a colorful border:

a:hover img { border:solid red 1px; }

Padding and Image Width

Let’s clean up one more thing to make the image in your content work better with the rest of the styles we will use.

We want to clear all the padding around the images within your content and make sure that the whole width of the image shows up rather than just a part of it. If it isn’t in your style sheet, add the following:

p img { padding: 0; max-width: 100%; }

Image Left, Right, and Center

When an image sits on the sides of your text, it helps to have space between the text and the image so the words aren’t right up against the edge. As some browsers treat the margins and padding differently, the following styles will accommodate most browser’s “space requirements” so the image doesn’t overlap the text or any lists that appear inline with the image.

img.right { padding: 4px; margin: 0 0 2px 7px; display: inline; } img.left { padding: 4px; margin: 0 7px 2px 0; display: inline; }

The declaration of display:inline keeps the image inline with the text that you placed it with.

Now, it is time to add the float declaration to the images. BUT WAIT. Why should we waste our left and right floats on just images? Why not use them on anything that we want to sit on the right or left of the page and have the text float around it? You can do that, you know. But that’s for another tutorial. We’re not going to waste this, so if it isn’t there in your style sheet already, add the following:

.right { float: right; } .left { float: left; }

Note: The Default/Kubrick Theme uses this technique but names the classes alignleft and alignright. Using left and right seems easier to remember and use, but either name sets may be used to make this work.

So what about centering the image? Yes, you can still do that too. The center tag isn’t valid any more, so you can create a style for centering things:

img.centered { display: block; margin-left: auto; margin-right: auto; }

Left, Right, and Centered Examples

This sounds like a lot of complicated stuff, but once this is done, you will never have to mess with it again. We hope. To use it, create the link to your image and add class="right", class="left", or class="centered" and the image will move to the right, left, or center and the text will wrap around it. It’s just that simple.

<img src="/images/leaf.gif" class="right" alt="Red leaf" title="Red Leaf" />This is some text that will wrap around the image that sits on the right side of the text that you are writing about the leaf that is there. That is, if you are writing about leaves in the first place and you want to write about this specific leaf.

This is some text that will wrap around the image that sits on the right side of the text that you are writing about the leaf that is there. That is, if you are writing about leaves in the first place and you want to write about this specific leaf.

<p>This is text that sits above the leaf image that you might be writing about in your post if you were to write about leaves. <img src="/images/leaf.gif" class="centered" alt="Red leaf" title="Red Leaf" />This is some text that will sit below the text image and you can continue to write about the leaf that is there.</p>
This is text that sits above the leaf image that you might be writing about in your post if you were to write about leaves.

This is some text that will sit below the text image and you can continue to write about the leaf that is there.

Alternative Text Size

Some browsers will now allow you to control the size of the text created by the ALT tag. This is the text that appears when you hold your mouse over an image or when the the image fails to load. You can set it to any size, but something much smaller than your content’s font size would be a good idea.

img {font-size:60%}

Captioning The Image

Images tend to just sit there, looking pretty. The alt and title properties say a little something about what the image looks like, but other than that, unless you add some text around it, it just sits there. So create a caption style that adds some “spice.”

.caption { margin: 5px; padding: 5px; border: solid 1px #E5E5FF; background: #E5F2FF; font-size:90%; color: black }

In the above example, we’ve added a border and a little hint of background color, but you can style it however you want. We recommend that you at least make the text a difference size and padding to the overall container so it is distinguised from the rest of the post’s content.

<div class="caption right">
<img src="http://example.com/images/leaf.jpg" alt="leaf graphic" title="leaf graphic">
Red Leaf</div>

Red Leaf

This is text that wraps around the leaf image that features a caption. You might want a caption under the picture of the leaf if you were writing about leaves in your post. The caption sits below the text and helps the user to understand what the picture is about.

In the example above, we just added the right class to the container which will position it as a float to the right, allowing the text to flow around it. Using the left class would float it to the left, and centered would give you the text, image centered, text effect.

Clear The Display

In the event that the image is larger than the amount of text that would otherwise surround it, causing the image to hang like a flag over some element below it, then at some point in the text, you’ll want to clear the display. Note that there is no text inside this division.

<div style=”clear:both;”></div>

May 22, 2009

They say you can not judge a book by its cover, and yet every day people do. They pick up a book, look at the cover, and then are moved to either put it down, turn it over, or open it up just because of how the cover looks. Websites are also judged by their covers and the first impression often comes from the header.

The header of your site is typically the first thing people see. From this masthead or header art across the top of your page, people make sweeping judgements about what they are about to see and read. The same people who say you can not judge a book by its cover, also say that you only have 30 seconds to make a good impression. In the world of the Internet where the next web page is a click away, you have much less than that.

We are going to take you inside the architecture of a WordPress header and offer tips on how to customize it to become your own book cover, enticing people into your site with a good first impression. Then we will offer some tips from some experts on what makes a good website header.

The WordPress Header

By default, the WordPress header is a simple piece of code. You do not have to get into the code to change the header that comes with whatever WordPress Theme you choose. You set the blog or website title and description in the Administration > Settings > General panel, and WordPress does the rest.

In its simplest form, the WordPress Classic Theme features the header code like this in the wp-content/themes/classic/header.php template file:

<h1 id="header">
<a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a>
</h1>

The header is set in an h1 HTML tag and features one template tag used with two different options or parameters. You can learn more about these parameters in the documentation for bloginfo(). Basically, the first one displays the URL of the website in a link, and the second one displays the name of the blog or website as set in the Administration > Settings > General panel. When the user moves the mouse over the header title, the header can be clicked to return back to the main or front page of the site as set in the Administration > Settings > General panel.

The WordPress Default Theme features an image in the background and presents the header like this in wp-content/themes/default/header.php:

<div id="header">
 <div id="headerimg">
   <h1>
    <a href="<?php echo get_option('home'); ?>">
       <?php bloginfo('name'); ?></a>
   </h1>
     <div class="description">
       <?php bloginfo('description'); ?>
     </div>
  </div>
</div>
The header of the Default/Kubrick ThemeAgain,
the template tag featuring the name of the blog or website is in a
link, but this shows another usage similar to the URL request above. It
gets the same information, just in a different way. It also adds the description of the site from the Administration > Settings > General  panel.

Basically, these two header examples do the same thing in different ways. They provide information in the header, with the potential for an image, and make the header title clickable to help navigation on the site. It is just a matter of how much information you want in your header, and how that information is displayed.

Using the first example from the Classic Theme, an image can still be used in the background, set within the style sheet in the h1 selector, but the second one gives more control to the use of an image in the header by giving it its own division. How these look are totally controlled by the style sheet.

Styling the Header

As listed in the two above examples, the styles for the header are contained within the h1, header, headerimg, and description CSS selectors. These are all found within the style.css, though may be found in the styles in the header.php of the Theme you are using. You will have to check both places.

In the Classic Theme, the CSS for the header are found in one selector, the #header.

#header { background: #90a090; border-bottom: double 3px #aba; border-left: solid 1px #9a9; border-right: solid 1px #565; border-top: solid 1px #9a9; font: italic normal 230% ‘Times New Roman’, Times, serif; letter-spacing: 0.2em; margin: 0; padding: 15px 10px 15px 60px; }

The background color is set to a green shade and there is a border all the way around the header which changes colors creating a recessed, shadow effect. The Times font is set with a size of 230% with a wider than normal letter spacing. The padding on the left side indents the text in from the left.

All of these can be easily changed, giving the border a thicker width and making it all the same color, changing the background color, the font size and style, the letter spacing, and more by modifying the information in each style attribute.

The same is true of the Default WordPress Theme header, except there are more styles to think about and they are found within the header.php’s “head” tag and the style.css, though once you have your styles set, you can move the information into your style sheet.

The styles that control the header’s look are found within the h1, header, headerimg, and description CSS selectors. Just like the Classic Theme, find these references and make your modifications there to change the look.

Changing the header image of the Default WordPress Theme has been simplified with the introduction of a utility called Kubrickr. It simply asks you to supply a new image file name for the header and then switches it for you, so you do not have to dig into the code. If all you want to change is the header image, this is an extremely useful and easy tool.

If you do want to get your hands into the code, dig into your header styles and make the changes. Below is a simple tutorial on changing just the header image manually.

Connections Theme Header

Changing the Header Image

There are many different header images and header art available for you to use to change the image in the header. The styles for the header image for the Default or Kubrick WordPress Theme, and any Theme based upon that Theme, are more complicated to change than those for the Classic Theme. The styles are found within the styles in the header.php “head” section, as well as in the styles.css. To change only the header image reference, open the header.php template file and look for the styles like this:

#header { background: url(“<?php bloginfo(’stylesheet_directory’); ?>/images/wc_header.jpg”) no-repeat bottom center; } #headerimg { margin: 7px 9px 0; height: 192px; width: 740px; }

To change the image file, replace the “kubrickheader.jpg” with the name of the new graphic image you have uploaded to your site to replace it. If it is in a different directory, change that by replacing the bloginfo() tag with the specific address of the graphic’s location.

If you are using an image that is the same size, then simply replace the image. If it is a different size, fill in the height and width of the image in the next section called #headerimg. If you do not know, and are using Windows, view the folder in which the image resides on your computer in Thumbnail view mode. Click View > Thumbnail from the Windows Explorer menu. In Thumbnail view mode, find your image and hold the mouse over it. A small balloon tip will pop up listing the dimensions. Use that information in the styles. Otherwise, just right click on the image file and choose Properties and it should give you the file size and dimensions.

Save the template file and upload it and the image to your website and take a look. Some changes may need to be made to fine-tune the placement and look.

With the header image in place, it is time to tackle the rest of the header. Open your style.css style sheet file and look for the following:

  • h1
  • header
  • headerimg
  • description

Your Theme may or may not have all of these, but the Default Theme has all of them in different places within the style sheet. All or some of these may need to have the attributes changed to change the look of your header.

If you change the size of the header image or header art, be sure and change the other structural CSS selectors like content and sidebar to accommodate the change in the header size.

Header Image Specifications

A header image that fits within the Default WordPress Theme is about 192 x 740 pixels. If you are replacing the header within any WordPress Theme, check the size of the header image and then find a replacement that matches that size. If you choose a header image that is smaller or wider or taller than the replacement, you may have to modify the other structural elements of the web page to allow for the change in size of the header.

If you are modifying the entire site’s Theme, the width of the overall page or content area needs to be taken into consideration for the header image’s size. The two most common screen sizes are 1024×768 and 800×600 pixels. Yet, wide screen monitors are gaining ground and web designers now need to prepare for screen widths of 1280×1024 and 1600×1200.

If you set your website to “float,” positioned in the middle of the browser window with space on either side, then you can set your header width to whatever you want. If you are designing a Theme with a flexible or “elastic” screen width, then the width of your header becomes important.

If you are using a header image that can be repeated, and you are using elastic widths, you can set the styles within the header to repeat to fill the space:

#header {
background: url("/images/kubrickheader.jpg")

Hiding the Header Text

Many Themes and Theme designers want to feature their header with a picture only, no text. Some will put the text in the graphic image, therefore not requiring the actual use of the text. One option is to remove the template tags that generate the title and description. The other option is to leave it in, but hide it.

To hide the header text while leaving it in the code, do not change anything in your template files. Only change the CSS. Add display:none to the CSS selectors you do not want to appear. For example, to hide the text within the h1 selector:

h1 {display:none; font-size: 230%; color: blue;…….

It is still there, but the browser has been commanded to not show it in any way. The container literally is “not there.”

It might be hidden, but some web page screen readers and search engines will still find the information. If you are serious about making your site be accessible, some newer text readers access the style sheet and do not read the elements marked display:none. There are two popular methods for working around this. One is to use the display:none as outlined above, but also include an aural style sheet that changes that selector to display:block, “turning the visibility” back on. The other method is to position the content literally “off the page” by a negative indent. Here is an example:

h1 { font-size: 0; text-indent: -1000px; }

This technique moves the entire h1 tag and its contents physically off the web page. The screen reader will still “read” the text because it is there, but it will not display on the page. Extensive testing has proven so far that this technique works across most browsers and with all screen readers.

For more information on either technique and aural style sheets:

  • What do Screen Readers really say? (Accessibility and display:none)
  • Testing Screen Readers and display:none
  • Facts and Opinion About Fahrner Image Replacement
  • Hiding Text But Not From Screen Readers
  • W3’s Aural Style Sheets
  • About Web Design’s Aural Style Sheets
  • ACSS: Aural Style Sheets
  • Richinstyles Guide to Aural Style Sheets

Making the Whole Header Clickable

To make the entire header, graphic and all, clickable, you must put the header graphic inside of a link. There are two ways to do this. You can put the graphic directly into the WordPress Theme manually, or you can use the stylesheet to define the link size area to encompass the header art area.

To make the header art clickable by embedding it into the header, in the wp-content/themes/classic/header.php template file of your WordPress Theme, change the following:

<div id=”header”> <h1><a href=”<?php bloginfo(‘url’); ?>/”> <?php bloginfo(‘name’); ?></a> </h1> </div> to: <div id=”header”> <a href=”<?php bloginfo(‘url’); ?>”> <img src=”http://example.com/headerimage.jpg” alt=”<?php bloginfo(‘name’); ?>” /> </a> <h1><a href=”<?php bloginfo(‘url’); ?>”>” title=”<?php bloginfo(‘name’); ?>”> <?php bloginfo(‘name’); ?></a> </h1>

You can style the h1 heading to overlap or sit below, or not even be visible in the header.

To make the overall area of the header clickable, the header must have a width area set for the h1 anchor HTML tag to make the clickable area cover the header image in the background. The styles are set in the stylesheet.

The HTML and WordPress Template Tags look like this, the same as above:

<pre><div id=”header”> <h1><a href=”<?php bloginfo(‘url’); ?>/”> <?php bloginfo(‘name’); ?></a> </h1> </div>

The CSS would then be styled something like this to enlarge the clickable link area and hide the header text (optional), customized to your own design needs.

#header h1 a { width: 400px; height: 100px; display: block; background: url(images/headerimage.gif) no-repeat top left; } #header h1 a span { display: none; }

Another option is to add a script to make the header section clickable, which may not work for all browsers. This is showcased in the Default WordPress Theme (Kubrick) with its clickable header:

  • Open the wp-content/themes/default/header.php template file.
  • Change from <div id="header"> to:

<div id=”header” onclick=”location.href=’http://example.com/’;” style=”cursor: pointer;”>

If you want both text areas of the header to be clickable and not the entire header image, use the following to make the header art and the blog title and description clickable.

<div id=”header”> <div id=”headerimg”> <h1> <a href=”<?php echo get_option(‘home’); ?>”> <?php bloginfo(‘name’); ?> </a> </h1> <div class=”description”> <a href=”<?php echo get_option(‘home’); ?>”> <?php bloginfo(‘description’); ?> </a> </div> </div> </div>

Rotating Header Images

There are several scripts available that will allow you to rotate images within the header, sidebar, or on any template file. We will examine the use of one of these, the Random Image Rotator.

Save the script to a separate folder in which you have the header images you wish to rotate in your header. For this example, call it rotate.php. To use this as a background image that changes or rotates with every load of the web page:

#header {
background: url("/images/headerimgs/rotate.php")
no-repeat bottom center; }

To actually put this in your header, or elsewhere on your site, add an image link like this within the header division:

<img src="/images/headerimgs/rotate.php" alt="A Random Header Image" />

Image rotating scripts include:

  • Photomatt’s Random Image Rotator
  • Image Rotator PHP from Automatic Labs
  • WordPress Randomize Plugin
RDC Theme Header

Adding Navigation to Your Header

Headers are another area where you can add navigation elements to your website. Typically these are horizontal menus at the top or bottom of your header. To add these, create a new division within the header to style your header navigation elements.

This can be as simple as displaying your categories across the top of the header using one of the List Categories template tags. Let us look at one example using the list_cats() tag.

In this example, the list_cats() template tag is set to sort the list of categories by ID in an unordered list (<ul><li>) without dates or post counts, does not hide empty categories, uses category “description” for the title in the links, does not show the children of the parent categories, and excludes categories 1 and 33. It sits in its own “category” division. Notice that a link to the “home” page or front page has been included manually at the start of the list.

<div id="header">
<div id="categorylist">
<ul><li>
<a title="Home Page" href="index.php">HOME</a></li>
<?php list_cats(FALSE, '', 'ID', 'asc', '', TRUE, FALSE,
FALSE, FALSE, TRUE, FALSE, FALSE, '', FALSE,
'', '', '1,33', TRUE); ?>
</ul>
</div><!-- end of categorylist -->
<h1><a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a></h1>
</div><!-- end of header -->

To style this list, the #categorylist in the style.css might be:

#categorylist {font-size:12px; font-style:normal;
        text-transform:uppercase; }
#categorylist ul {list-style-type: none; list-style-image:none;
        margin:0; padding-bottom: 20px; }
#categorylist li { display: inline; padding: 0px 5px;}
#categorylist a:link, #category a:visited {color:blue}
#categorylist a:hover {color:red}

It might look like this:

WORDPRESS   COMPUTERS   INTERNET NEWS

You can also add your Pages, archives, and other links within your header navigation. For more information on navigation menus:

  • Good Navigation Links
  • Dynamic Menu Highlighting
  • Creating Horizontal Menus
  • Styling Lists with CSS
  • wp_list_cats()
  • list_cats()

Header Tips

Here are some tips and information to help you choose and customize your WordPress site’s header.

Pay attention to text placement and color.
The colors and placement of the text within a header can add or subtract to your presentation. Here are some tips.
  • If you use white text, make sure there is a background color in the header and/or headerimg to showcase the white text again if for some reason the image does not appear on the screen or the user has “show images” turned off. This will allow your white text to still be visible.
  • If the image has a main feature or element, position the text so it does not cover the main subject of the image.
  • If the text is hard to read against a busy area of the graphic, position the text to a less busy area of the header image.
  • Make sure the color of the text is easily seen by your visitors and does not clash with the header art colors. Fluorescent orange text on a lime green background is painful.
  • Be aware that some color differences and patterns in your header art may make the text letters in your overlaid text “disappear.” The same applies if you embed the text in your header art or header image.
Have a purpose and point.
A good header reflects the content of the site. The rest of the site has to meet expectations and live up to the header, so the header must reflect the content, purpose and intention of the site.
It should invite visitors to remain.
A good header is like the cover of a book or magazine. It should encourage people to stay and have a look around, read and look more, and find something of value. It is the teaser, the lead that grabs their attention and says “there is something worth exploring here.”
It should blend in with the overall look.
Bold and dramatic headers lend themselves to boldly designed sites, whereas soft and pastel colored sites lend themselves to gentler graphic headers. A site dedicated to punk rock and grunge should have a header look punky and grungy. It is up to you, but think consistency.
Headers do not need to have pictures.
Not all headers must have pictures and graphics. Sometimes the words are more important, whether they are against a wash of color or a white background.
Cluttered headers are still cluttered.
Avoid cramming ads, navigation, text, scrolling news feeds, and the kitchen sink into your header. Simple is always better.
Maintain accessibility standards in your header.
We mentioned hiding the header text, and there is more you can do to make sure your header meets accessibility standards. Use the h1 tag so screen readers will recognize it as a header. Use titles and alt descriptions in links and images used in the template file (not in the style sheet as background images).
Headers can be any height, but remember content sells.
The average header is less than 200 pixels high, but headers range in height from very thin to a half page. Remember that the main reason people visit your site is its content, and the more they have to scroll down past your header to get to the content, the less interested they tend to be. Help lead them to the content with your header.
Think “Site Identity.”
A header is part of the site’s identify or “brand” and people like to know they are on the same site when they click a link to another page within that site. Consider your header or header art as your site’s “brand identity”.
repeat-x top left; }

This sets the header image to repeat horizontally beginning from the top left corner and going across. You can adjust these to whatever background position your header design and layout needs.

Header Art

A new term growing in the web design field is header art. These are header images that are usually handmade using combinations of color, shapes, symbols, images, and text. They can take some time and labor to create. While there are some free header art sites, some sites sell their handmade header art. Although a photograph may be unique in its own way and convey the needed visual style, handmade header artwork is easier to match to other web page colors and is usually more aesthetically pleasing because of its distinctive nature.

Choosing pre-made header art has some benefits. The artists have already done the work and all you have to do is choose the design that best matches your website. And the graphic is ready to use, already sized and saved as a small file size.

Digital Westex’s WordPress Header Art features a wide range of header art sized and ready for free download specifically for WordPress.

Header Art Copyrights

The best header art to use, if you do not want to generate your own, is any that bear the Creative Commons License that specifically allows its public use. Read the individual license for the image’s use to make sure that you have permission to use the header art on your site. Usually you must attribute the author, share alike and not use it for commercial purposes. If in doubt, always ask permission from the author before use.

As header art is made and licensed “as is” by the designer/artist, some header art cannot be modified without the artist’s permission. Check the website copyrights and licenses and ask if you are in doubt and wish to modify the artwork.

Designing Your Own Header Art

You can also design your own header art. Any graphic design software program will work. Popular ones include Adobe Photoshop, Adobe Elements, JASC PaintShop Pro, The Gimp and Macromedia Fireworks. The graphic design software should have the ability to resize and control the resolution and type of the image when saved. The size of your header art should be the size of the header container you’re going to put it in.

You can use your own photographs, artwork, fonts, and any combination of images to create your header art. When done, save it “for the web” as a jpg, gif, or .png file. For an explanation on which to use read Sitepoint’s GIF-JPG-PNG What’s the Difference article. These file types will compress the image’s resolution, reducing the file’s size. In general, avoid file sizes larger than 50K as larger sizes tend to slow a site access times.


Using Themes

May 22, 2009

Before the advent of Themes, WordPress generated content using a single file, index.php, and files to support comment display and submission. A single style sheet controlled the presentation. All other pages, including the category and archive pages, were generated by passing parameters to the index.php page.

The new Theme system provides two convenient features.

Physically Separate Components
The new WordPress modular template files system provides a method to define separate physical PHP files for the different components of your WordPress site. This allows creation of unique designs and functionality for many special pages, such as category archives, monthly archives, and the individual entry pages.
Quickly Change Layout and Design
It allows users with appropriate permissions to quickly change the layout of the entire site by uploading a new theme and essentially flipping a switch in the admin panel.

The old method of generating pages will still work. If you are upgrading from v1.2 or v1.2.1 or v1.2.2, you can continue using your existing design. Keeping your older design will not prevent you from adding additional themes and easily switching between designs.

What is a Theme?

Fundamentally, the WordPress Theme system is a way to “skin” your weblog. Yet, it is more than just a “skin.” Skinning your site implies that only the design is changed. WordPress Themes can provide much more control over the look and presentation of the material on your website.

A WordPress Theme is a collection of files that work together to produce a graphical interface with an underlying unifying design for a weblog. These files are called template files. A theme modifies the way the site is displayed, without modifying the underlying software. Themes may include customized template files, image files (*.jpg, *.gif), style sheets (*.css), custom Pages, as well as any necessary code files (*.php). For an introduction to template files, see Stepping Into Templates.

Themes are a whole new ball game. Let’s say you write a lot about cheese and gadgets. Through the innovative use of the WordPress Loop and template files, you can customize your Cheese category posts to look different from your Gadgets category posts. With this powerful control over what different pages and categories look like on your site, you are limited only by your imagination. For information on how to use different Themes for different categories or posts, see The Loop in Action and Category Templates.

Get New Themes

The WordPress Theme Directory is the official site for WordPress Themes which have been checked and inspected, and are free for downloading. The site features the ability to search by type and style, and offers a demonstration of the page view elements of the Theme.

Using Themes

WordPress supplies two themes in its distribution for your initial use. You can switch between these two themes using the admin panel. Themes that you add to that directory will appear in the Administration Panels > Design > Themes as additional selections.

Adding New Themes

There are many themes available for download that will work with your WordPress installation.

180px-presentthemes2


Presentation Theme Panel

If the theme that you are installing provides instructions, be sure to read through and follow those instructions for the successful installation of the theme. It is recommended that theme developers provide installation instructions for their own themes, because themes can provide special optional functionality that may require more steps than the basic installation steps covered here. If your theme does not work after following any provided instructions, please contact the theme author for help.

To add a new theme to your WordPress installation, follow these basic steps:

  1. Download the theme archive and extract the files it contains. You may need to preserve the directory structure in the archive when extracting these files. Follow the guidelines provided by your theme author.
  2. Using an FTP client to access your host web server, create a directory to contain your theme in the wp-content/themes directory provided by WordPress. For example, a theme named Test should be in wp-content/themes/test. Your theme may provide this directory as part of the archive.
  3. Upload the theme files to the new directory on your host server.
  4. Follow the instructions below for selecting the new theme.

Adding New Themes in cPanel

If your host offers the cPanel control panel, and the theme files are in a .zip or .gz archive follow these instructions. Note: This assumes the theme you download is a compressed (zip) file and the files in the zip file are in their ‘named’ folder.

  1. Download the theme zip file to your local machine.
  2. In cPanel File Manager, navigate to your themes folder. If you have WordPress installed in it’s own folder called wordpress, you would navigate to “public_html/wordpress/wp-content/themes” and if WordPress is installed in your web-root folder you would navigate to “public_html/wp-content/themes”.
  3. Once you’ve navigated to the themes folder in cPanel File Manager, click on Upload file(s) and upload that zip file you saved in Step 1.
  4. Once the zip file is uploaded, click on the zip file name in cPanel, then in the panel to the right, click on Extract File Contents, and that zip file will be uncompressed.
  5. Follow the instructions below for selecting the new theme.

Note: You can also install and activate the plugin Get_Theme, to download themes directly to your blog.

Selecting the Active Theme

To select the active theme for your site:

  1. Log in to the WordPress Administration Panels.
  2. Select the Design subpanel, then Themes.
  3. From the Available Themes section, click on theme title (or theme screenshot) for the theme you wish to activate.
  4. A preview of the theme will be shown to activate theme click the Activate “Theme Name” link in the top right.

Your selection should immediately become active.

Creating Themes

If you are interested in creating your own theme for distribution, or learning more about the architecture of themes, please review the documentation regarding Theme Development and Designing Themes for Public_Release.

Theme Files

The following are the files typically included within a Theme.

  • 404 Template = 404.php
  • Archive Template = archive.php
  • Archive Index Page = archives.php
  • Comments Template = comments.php
  • Footer Template = footer.php
  • Header Template = header.php
  • Links = links.php
  • Main Template = index.php
  • Page Template = page.php
  • Popup Comments Template = comments-popup.php
  • Post Template = single.php
  • Search Form = searchform.php
  • Search Template = search.php
  • Sidebar Template = sidebar.php
  • Stylesheet = style.css

WordPress Semantics

May 22, 2009

Introduction to WordPress Terminology

WordPress was created by the developers as weblogging or blogging software. A blog, as defined in the Codex Glossary, is an online journal, diary, or serial, published by a person or group of people. Many blogs are personal in nature, reflecting the opinions and interests of the owner. But, blogs are now important tools in the world of business, politics, and entertainment.

Blogs are a form of a Content Management System (CMS) which Wikipedia calls “a system used to organize and facilitate collaborative content creation.” Both blogs and Content Management Systems can perform the role of a website (site for short). A website can be thought of as a collection of articles and information about a specific subject, service, or product, which may not be a personal reflection of the owner.

Terminology Related to Content

The term Word in WordPress refers to the words used to compose posts. Posts are the principal element (or content) of a blog. The posts are the writings, compositions, discussions, discourses, musings, and, yes, the rantings of the blog’s owner and guest authors. Posts, in most cases, are the reason a blog exists; without posts, there is no blog!

To facilitate the post writing process, WordPress provides a full featured authoring tool with modules that can be moved, via drag-and-drop, to fit the needs of all authors. The Dashboard QuickPress module makes it easy to quickly write and publish a post. There’s no excuse for not writing.

Integral to a blog are the pictures, images, sounds, and movies, otherwise know as media. Media enhances, and gives life to a blog’s content. WordPress provides an easy to use method of inserting Media directly into posts, and a method to upload Media that can be later attached to posts, and a Media Manager to manage those various Media.

An important part of the posting process is the act of assigning those posts to categories. Each post in WordPress is filed under one or more categories. Categories can be hierarchical in nature, where one category acts as a parent to several child, or grandchild, categories. Thoughtful categorization allows posts of similar content to be grouped, thereby aiding viewers in the navigation, and use of a site. In addition to categories, terms or keywords called tags can be assigned to each post. Tags act as another navigation tool, but are not hierarchical in nature.

In turn, post categories and tags are two of the elements of what’s called post meta data. Post meta data refers to the information associated with each post and includes the author’s name and the date posted as well as the post categories. Post meta data also refers to Custom Fields where you assign specific words, or keys, that can describe posts. But, you can’t mention post meta data without discussing the term meta.

Generally, meta means “information about”; in WordPress, meta usually refers to administrative-type information. So, besides post meta data, Meta is the HTML tag used to describe and define a web page to the outside world, like meta tag keywords for search engines. Also, many WordPress-based sites offer a Meta section, usually found in the sidebar, with links to login or register at that site. And, don’t forget Meta Rules: The rules defining the general protocol to follow in using this Codex, or Meta, as in the MediaWiki namespace that refers to administrative functions within Codex. That’s a lot of Meta!

After a post is made public, a blog’s readers will respond, via comments, to that post, and in turn, authors will reply. Comments enable the communication process, that give-and-take, between author and reader. Comments are the life-blood of most blogs.

Finally, WordPress also offers a content management tool called a Page. Pages often present static information, such as “About Me”, or “Contact Us”, Pages. Typically “timeless” in nature, Pages should not be confused with the time-oriented objects called posts. Interestingly, a Page is allowed to be commented upon, but a Page cannot be categorized.

Terminology Related to Design

The flexibility of WordPress is apparent when discussing terminology related to the design of a WordPress blog. At the core of WordPress, developers created a programming structure named The Loop to handle the processing of posts. The Loop is the critical PHP program code used to display posts. Anyone wanting to enhance and customize WordPress will need to understand the mechanics of The Loop.

Along with The Loop, WordPress developers have created Template Tags which are a group of PHP functions that can be invoked by designers to perform an action or display specific information. It is the Template Tags that form the basis of the Template Files. Templates (files) contain the programming pieces, such as Template Tags, that control the structure and flow of a WordPress site. These files draw information from your WordPress MySQL database and generate the HTML code which is sent to the web browser. A Template Hierarchy, in essence the order of processing, dictates how Templates control almost all aspects of the output, including Headers, Sidebars, and Archives. Archives are a dynamically generated list of posts, and are typcially grouped by date, category, tag, or author.

Templates and Template Tags are two of the pieces used in the composition of a WordPress Theme. A Theme is the overall design of a site and encompasses color, graphics, and text. A Theme is sometimes called the skin. With the recent advances in WordPress, Theme Development has become a hot topic. WordPress-site owners have available a long list of Themes to choose from in deciding what to present to their sites’ viewers. In fact, with the use of a Theme Switcher Revisited Plugin, WordPress designers can allow their visitors to select their own Theme.

Plugins are custom functions created to extend the core functionality of WordPress. The WordPress developers have maximized flexibility and minimized code bloat by allowing outside developers the opportunity to create their own useful add-on features. As evidenced by the Plugin Directory, there’s a Plugin to enhance virtually every aspect of WordPress. A Plugin management tool makes it extremely easy to find and install Plugins.

Terminology for the Administrator

Another set of terms to examine are those involving the Administration of a WordPress site. A comprehensive set of Administration Panels enables users to easily administer and monitor their blog. A WordPress administrator has a number of powers which include requiring a visitor to register in order to participate in the blog, who can create new posts, whether comments can be left, and if files can be uploaded to the blog. An Administrator also defines Links and the associated Link Categories which are an important part of a blog’s connection to the outside world.

Some of the main administrative responsibilities of a WordPress blog involve adding, deleting, and managing Registered Users. Administering users means controlling Roles and Capabilities, or permissions. Roles control what functions a registered user can perform as those functions can range from just being able to login at a blog to performing the role administrator.

Another chief concern for the blog administrator is Comment Moderation. Comments, also called discussions, are responses to posts left for the post author by the visitor and represent an important part of “the give and take” of a blog. But Comments must be patrolled for Spam and other malicious intentions. The WordPress Administration Comments SubPanel simplifies that process with easy-to-use screens which add, change, and delete Comments.

And not to be forgotten is the obligation for an administrator to keep their WordPress current to insure that the latest features, bugs, and security fixes are in effect. To accomodate administrators, WordPress has a simple Upgrade Tool to download and install the lastest version of WordPress. There’s no excuse to not upgrade!

The Terminology of Help

The final set of jargon relates to helping you with WordPress. There are many help resources available to WordPress users; Getting More Help, Finding WordPress Help, Troubleshooting, and WordPress FAQ (frequently asked questions) are good starting points. Also Getting Started with WordPress will jump-start readers into the world of WordPress and the excellent WordPress Lessons provide in-depth tutorials on many of the aspects of using WordPress. Among the most important resources is the WordPress Support Forum where knowledgeable volunteers answer your questions and help solve any problems related to WordPress. And, of course, this Codex which is filled with hundreds of articles designed to make your WordPress experience a success!

History of the WordPress Name

Besides the technical terminology of WordPress, it’s also interesting to know the history of the name, WordPress. The name “WordPress” was originally coined by Christine Selleck (see related post) in response to developer Matthew Mullenweg’s desire to associate his new software project with printing presses. In this sense, press refers to the world of reporters, journalists, columnists, and photographers. An aptly chosen name, because WordPress serves as the printing press that enables its users to publish their words. It’s a good name, don’t you think so?

Playing With Fonts

May 22, 2009

Fonts Represent Your Content

There’s no doubt that your words, your posts, are the meat and potatoes of your blog or website. Those words, along with your lovely colors and pictures, tell your website’s story. But, don’t forget to pay attention to your font selections. The fonts you choose in designing your theme can influence whether or not people hang around to see more than a page or two of your pretty work.

Fonts come in a wide variety of types and styles, but unfortunately, unless the user actually has that font installed on their machine, they will see something that is only “close”, such as a generic serif or sans-serif, to what you wanted to present. If you want to see a list of what you have installed on your machine, visit several of the font sites listed below or this font test. If your font is there, you will see it. If not, you will see a generic Courier font.

In your Theme’s style sheet (style.css usually) you can control the font-family (the list of fonts to display), the color, the size, and other aspects of your font. The following example sets the fonts for your sidebar menu, sets the size to 1em high, and sets the color to blue:

#menu {font-family: Verdana, Arial, Helvetica,
   sans-serif; font-size:1em; color:blue; }

As you can see, you’ve set more than one font in the font-family. If the user doesn’t have Verdana, Arial will take over. If Verdana and Arial are missing, they have a chance to use Helvetica. If all else fails, the user’s system fonts takes over and uses the default font for sans-serif. This list of choices helps the designer control the fonts and insures a more consistent “look and feel”.

Font families tend to be single words, but on occasion you will find a phrase to represent a font such as Lucida Console. This is set in the style selector surrounded with quote marks such as:

#menu {font-family: Verdana, Arial, Helvetica,
     "Lucida Console", sans-serif;.....

Fonts in WordPress

WordPress Themes use fonts in many different ways, and not always consistently. It depends upon the Theme author’s decisions and needs in designing a Theme. Different fonts can be found in different areas of the website, one type in the header, another in the sidebar (or maybe two or three), and another font style or type in the post content area. Finding those fonts in order to change them, can give a user grief.

Since fonts can be anywhere, finding the font you want to change can be a challenge. Generally, an overall font is set in the body of a website.

body {font-family: Verdana, Arial, Helvetica, Futura, sans-serif; font-size: 1em; padding:0; margin:0; }

This covers the definition of the fonts found within the site that are not definied by a specific tag, class or div. It’s the “fall-back font”.

Fonts found within the header of a site are normally found within the header div and same for the sidebar or menu and footer style divisions. The content, though, may be more challenging to track down.

Fonts within the post content area are often found within the following, but not always, CSS classes:

  • content
  • post
  • entry
  • post-entry

They may have the font information in the specific class or in a paragraph tag:

.content p { margin:5px; padding:5px; font-family: Tahoma, Verdana, Helvetica, sans-serif; font-size: 110%; color: black; }

Fonts within the sidebar or menu nested lists can be very difficult to narrow down. For a step-by-step guide of all the nested lists found within many WordPress sites, see Styling Lists with CSS.

If you are still having trouble tracking down a specific font code, consider using some of the tips and techniques in Finding Your CSS Styles.

Which Font

Determining which font will work best on your site is a personal choice, but there are articles that will help you decide. We recommend that you begin with fonts that are most commonly found on most people’s computers, and that are easy to read.

Font Surveys

To find out what fonts are most popular, check out the following:

  • Codestyle’s Windows Web Font Survey Results
  • Codestyle’s Font Survey For All Platforms
  • Web Style Guide: Typefaces

Font Sizes

You can also change the font size your viewers see. In the days of the typewriter and even with today’s word processors and desktop publishing software, the “point” system is still in use. You should be familiar with things like “12pt Times Roman” and “8pt Arial”. Point sizes don’t work well on web pages because most browsers can’t interpret what a “point” is. They understand pixels and percentages of a base size, but typewriter point sizes are interpreted differently on different browsers. You can use point size but there are better alternatives.

You can set your fonts to be absolute, which means they are fixed in size, but that too, has disadvantages. The problem with absolute font size is that if a user has their browser set to “see” larger fonts (View > Text Size) or are using special software for the visually or physically disabled, you may have taken away their rights to “see” larger fonts. If you have to set the font to a specific size in order for your layout to work, make sure you don’t use that font for your site’s more important information. This example shows how to set an absolute font size:

#menu ul li {font-size: 12px; color: green; }

The more popular method is to set your font-size for the whole document, then, base everything on a relative size from there. A percentage of the base font is used, allowing the font to resize itself based upon the user’s preferences, too:

body { font-size: 1em; } #menu ul li { font-size: 110%; color: green; }

Font and Text Characteristics

There are a lot of fun things you can do with fonts! You can make your fonts italic, you can make them bold, and you can make the first letter of a paragraph larger than the rest of the text. The list of variations goes on and on. This lesson is just a peek into how to style and size fonts on your WordPress site. There is a lot more that goes into deciding which font to use, how to use it, how many to use, what sizes, and…well, which fonts will look best on your site. Different browsers interpret fonts in different ways, too. You can find more information to help you make your font decisions below.

Just spend a few minutes on Google with the keyword “Uninstall” to realize the difficulties faced by many of you deal with the removal of certain software for your computers. Some have even made a great reputation in the field. To assist in this process, we propose a case based on three points, while giving you a brief overview of the theoretical principle of installation and uninstall, with all that implies for your computer. Sensitive cases concerning the removal “by hand” will also be discussed, telling you step by step how to clean your PC effectively. Finally, we will recommend some free software or not, you will ensure effective removal, acting on the registry for example.

Why there is not a program to uninstall?

The difficulties encountered to remove some software have originated from three sources:

  • ignorance of some users who do not make a proper procedure, removing files manually without trial;
  • weaknesses in the Windows tool, which is sometimes unable to completely remove an application;
  • software themselves, finally, who are sometimes poorly designed and require exaggerated efforts to be eradicated from your hard drives.

That is why we must first of all to abide by certain rules, but it also happens to have to place the hands dirty.

The principle of an installation an uninstallation

What will happen when you install a program on your hard drive? Since you started the process, several elements are in place. First, the program installs of course all the files it needs to operate, such as libraries and the executable file. This process often uses the Program Files directory (or Programs in Vista) by default, unless you specify another location, but some files may also be placed on file systems, especially in the case of the drivers.

The program also places items in the registry (which should more accurately called “the Register”) which will allow Windows to know everything about the program, how it should be launched, the location of executable file or some settings … Most of the time, then it has one or more shortcuts in the Start menu in Windows on the desktop or in the Quick Launch. This option is often offered when you install a program, with the option to disable it.

It is not uncommon for software to define themselves to Windows they will be executed at the start of Windows. It is sometimes possible to disable this option, but it is not always the case. Many applications also install items in the folder of the user, often in hidden folders (such as the AppData folder in Windows Vista). Finally, be careful not to install more components than necessary, toolbars Google or Yahoo! Sometimes interfering in the installation of some software. Again, check boxes may be present to disable them but they are not always in the heat of the action.

Let’s see how does a uninstall via the Windows tool. This will first look for the module dedicated often associated with the program to remove (in the directory under names such as uninstall.exe or unwize.exe). This will, in theory, to erase all traces of the software, making the inverse of a facility. It rises from the Start menu, the registry, the folder in which he is now and possibly in place shortcuts on the desktop. Alas, this module may not be as effective as expected, and you have probably already read a message like “Some files have been deleted. Please delete them manually.” Similarly, some software trainer leave voluntarily files or registry keys to anticipate a possible relocation. Therefore, a more complete cleaning than that produced by these tools is sometimes.

The effects on the registry

As we can see, the installation of a program has an effect on the registry, which lists all the items related to the software in question: files associated with it, location, shortcut, windows settings for this application … A large number of parameters that must be stored in order to run the program according to your settings. It becomes clear that the number of installed programs, the greater the registry increases. Even more annoying, the uninstall does not remove all the entries.

Thus, over the facilities, please uninstall and reinstall possible, the registry so swells, sometimes to slow down the computer. Obviously, this downturn is very low and this is noticeable especially true in recent operating systems such as Windows XP and Vista. However, a registry of excessive size will certainly be an obstacle to research potential of a key or entry states.

We have seen in previous post, the most commonly used to remove software from their computer is to use the module to add / remove programs from Windows, in Control Panel (called Programs and Features in Windows Vista). However, sometimes this way does not work for a variety of reasons: the unfortunate intervention program folder, disappearance of the program in question in the list of installed applications … In this case, a series of operations will be necessary to replace the action of this module.

Use the module to uninstall the program to remove

The first of these is to enable the module to uninstall the program to remove. Go to the directory where the software is present (typically C: Program Files labelname). You have to put you in search of an executable named uninstall.exe or unwise.exe whose icons may vary, but still had enough of the action uninstall.

Run this program, before taking care to close all pending. Often, the uninstaller will inform you as to remove the software is running on your computer and asks you to stop the execution. Sometimes the uninstall itself stop the program. However, sometimes a little error message comes explicitly warn you that the uninstall is impossible without more explanation than that. In this case, you will have to open Task Manager (via the famous Keyboard shortcut CTRL + ALT + DEL) and identify the process for the program to uninstall. This done, you should be able to start the uninstall process of your program without concern. This is done, you should be able to start the uninstall process of your program without concern.

Remove residue in Program Files

If the uninstaller your software has been designed, you should not have traces of the application on your computer. However, it should be checked, starting with the directory where you are. Indeed, if all went well, Windows Explorer was automatically put you in the Program Files folder, since logically, your uninstalled application should no longer exist.

If this is not the case (which happens frequently), remove the file in question and remove it. However, if you encounter a file or folder reluctant (which may come from a dll still loaded, for example), do not hesitate to use a program such as Unlocker. This very useful little program lets you perform an action such as deleting a file that refuses to disappear through the tools. Right-click on the folder or file, select “Unlocker”, select your action (here, Delete) and click OK. Your directory has finally disappeared.

Clear the tracks in the Users folder

If the Program Files directory (or Programs for Vista) is now free of all traces of your software, it is still a few here and there that can survive. We will not talk of the Common Files folder, which may contain files for the application uninstalled. However, as the folder name indicates, the elements in them are often shared between multiple applications and a reduction unfortunate is very easy.

To spend more cautiously Users folder on Vista, or Documents and Settings in XP. This directory contains probably some remnants of your application, certainly little bulky, but are wrong to disturb the order sought. Several cases are analyzed, but in all cases, you must allow the display of hidden files and folders via the “Tools” menu – “Folder Options” from the explorer.

In Windows XP, the files will be visiting the following:

  1. C: Documents and Settings username Application Data
  2. C: Documents and Settings username Local Settings Application Data
  3. C: Documents and Settings username Local Settings Apps

You must seek, in these directories, all elements that contain the name of the application or the editor and delete them. Make sure, however, in this case not to remove the items to another application by the same publisher.

Take advantage of your presence in these folders to delete the contents of C: Documents and Settings username Local Settings Temp, which can occupy an important place in your storage unit. Finally, install some software components not only in your home directory, but also that of all accounts on the computer. Thus file * C: Documents and Settings All Users can contain the same elements as those listed above. Be careful though, because removing these items, you touch the pattern of other users. Finish by emptying the trash.

In Windows Vista, things are very similar, only the names of files being different. The directories are to be analyzed as follows:

  • C: Users username AppData Local
  • C: Users username AppData LocalLow
  • C: Users username AppData Roaming
  • C: Users All Users

Again, be careful what you delete and do not hesitate to use a file Unlocker if you resist.

The manipulations in the registry

The most delicate and the longest was then to clean the registry items that relate to remove the software. We have seen in previous post, the register contains a large number of keys or entries that can be found at many places in this base. What we advise you to do is safe if you stick to our guidance, but the handling of the registry is not a trivial. Above all, be sure to make a backup. For this, use the shortcut Windows key + R and enter the command “regedit”. Go immediately on the File menu, then Export to save the current basis in a safe place. If something went wrong, you just have to import this backup to restore the PC to its original state.

What about cleaning itself. The registry database containing thousands of entries, it is not easy to quickly identify those that you have deleted. Fortunately there is a very nice tool: the search key, value and data. On the Edit menu, select Find function so. You have to specify in the box to fill in the name of the application, that of the publisher or any other evidence that could identify the program to remove. Mistrust again, if you are unsure of the action, you better abstain. You can do the following for more security: starting with the rough cleaning by removing the elements that you are sure they will do more, and then restart your computer. If after a few hours of use, nothing seems abnormal, repeat a backup of this new base and refine your cleaning.

Cleaning the launching of Windows

Last thing to check to ensure the disappearance of your software: the elimination of programs running at startup. To do this, use the shortcut Windows key + R and enter the command “msconfig.” Then go to the Startup tab and make sure that nothing here for the application is removed now. If you are unsure of your actions, do not hesitate one hand to observe the “Manufacturer”, the other to make a quick search on the Internet, it costs nothing and it can be reassured about its choice.

Specialized Programs

The numerous manipulations described in previous page are effective, but may take some time. For those, there are automated solutions, sometimes free, sometimes paid.

To remove programs

Start with specialized applications in the removal of programs. More efficient in principle that the specific tool of Windows, these programs allow a thorough cleaning of the registry to persistent elements in the specified folders on the previous page.

PC Decrapifier is a free software that can quickly get rid of software that you clutter. It is particularly effective for newly acquired and PC hard drives which are filled with programs that do not interest you. In its focus, among other you will find many antivirus and other security software often trial version on new computers, but Google Toolbar, Google Desktop, Dell URL Assistant or AOL. Regarding the use of PC Decrapifier, can not be simpler. It requires no installation and after having made a restore point (this is a good idea before starting such a procedure), a first result of detection will be presented. All you have to check the various items to remove and let PC Decrapifier it. This great program allows you finally select multiple applications to uninstall to make a bundle that will save precious time.

PC Decrapifier and Your Uninstaller! can overcome the shortcomings of the Windows tool

pc-decrapifierpc-decrapifier-image
Equally interesting, Your Uninstaller! Is software ergonomics appreciable whose mode “Pro” (as opposed to its “Basic”) you will not only find and delete any software quickly on your hard drive, but also follow in detail the uninstall process, to ensure that all those described in the previous page are met. Only flat, the trial version of this program is limited to 21 days.

Finally, one can also cite Total Uninstall, which has a particular operation. Indeed, the software saves all very precise changes to the system during installation of software. It is therefore essential to avoid doing something else during the registration period so that Total Uninstall does not take such actions as changes caused by the installation.

To clean the registry

Late use software cited above may result in a registry somewhat cluttered. That is why we recommend the use of CCleaner which, through its tab “Register” to clean the basis of the orphans as dll nonexistent, obsolete programs, ActiveX and classes handicapped, or invalid file extensions.

Another way to optimize the registry is using a dedicated software defragmentation. Indeed, just as your hard disk, the registry tends to leave some open space between two blocks of information, making the path even longer. A program like Quicksys RegDefrag proposes to remedy these fragments by eliminating unnecessary and spaces, thus improving system performance. Fully translated into any other language, the simple and effective interface allows real simplicity use. As a first step, click the “Defrag Registry” and then click Analyze. After a few minutes you will get a graph showing the rate of fragmentation of your Registry. You do not have to click on “Defrag” and restart your system.

For Software Removal

We were talking about in the introduction, it is software that posed so many problems for users uninstall they have made a solid reputation in this regard, despite constant efforts yet in the different versions. This is the case of applications from Symantec and the Norton suite of security in particular, but also of Nero, the famous after burning. The main problem with the software is cumbersome. Indeed, in seeking to consolidate into a single program multiple applications, these publishers are creating programs that interfere so deeply into the computer it becomes difficult to remove.

Aware of this, both publishers have even made available to small applications only intended to remove their own software. So you can find Norton Removal Tool, dedicated to uninstall Symantec products in our library and a program dedicated to Nero and a comprehensive tutorial on the web site.

The all-in-One

Conclude this overview complete with suites dedicated to the optimization and cleaning of Windows. This is the case of two programs that we tested recently, namely TuneUp Utilities and System Mechanic. Faced with these two best sellers pay, two free software can claim their hold candle: this is PC Health Optimizer Free Edition and Glary Utilities. The first proposes a neat interface, a module for cleaning the registry and another to uninstall the software, among many other functions. Its module Doctor Spyware Cleaner allows including research and uninstall software known to be harmful to the security of your computer.

In Glary Utilities, you will find a multitude of tools and utilities to fix, speed up, fix and protect your computer. His manager uninstall is particularly effective and should fill all those that discourage the procedure manual. Like PC Decrapifier, it can build a list of applications to remove a single step. Clever and effective, even if the latest version seems to show some signs of instability. Hopefully the next album will fix it quickly!

Conclusion

Installing and uninstalling programs are actions that we do every day. Update discovery programs more efficient than the previous one, our hard drives are often used for such operations. Even if the program installation and uninstallation have become particularly successful, these actions are not painless for our PC, either in terms of disk space or in terms of “clean” of the registry.

That is why follow a conscientious uninstall can avoid the deterioration of performance of your PC. However, it is not always easy to do so, for lack of time or knowledge. This is why software is often a great help, especially since they are always more powerful version version.

However, these programs are not without risk and before any changes, a backup of the registry, or even from any computer with a restore point is more than recommended. Otherwise, it will unfortunately do more than to use a software data recovery!

Some guides may also be of some interest: Read the rest of this entry »

How to Trace a hacker

May 18, 2009

Sometimes, it’s just not enough to simply know that there’s a Trojan or Virus onboard. Sometimes you need to know exactly why that file is onboard, how it got there – but most importantly, who put it there.

By enumerating the attacker in the same way that they have enumerated the victim, you will be able to see the bigger picture and establish what you’re up against. But how can you do this? Read on…

## Connections make the world go round ##

The computer world, at any rate. Every single time you open up a website, send an email or upload your webpages into cyberspace, you are connecting to another machine in order to get the job done. This, of course, presents a major problem, because this simple act is what allows malicious users to target a machine in the first place.

# How do these people find their victim?

Well, first of all, they need to get hold of the victim’s IP Address. Your IP (Internet Protocol) address reveals your point of entry to the Internet and can be used in many ways to cause your online activities many, many problems. It may not reveal you by name, but it may be uniquely identifiable and it represents your digital ID while you are online (especially so if you’re on a fixed IP / DSL etc).

With an IP address, a Hacker can find out all sorts of weird and wonderful things about their victim (as well as causing all kinds of other trouble, the biggest two being Portnukes/Trojans and the dreaded DoS ((Denial of Service)) attack). Some Hackers like to collect IP Addresses like badges, and like to go back to old targets, messing them around every so often. An IP address is incredibly easy to obtain – until recently, many realtime chat applications (such as MSN) were goldmines of information. Your IP Address is contained as part of the Header Code on all emails that you send and webpages that you visit can store all kinds of information about you. A common trick is for the Hacker to go into a Chatroom, paste his supposed website address all over the place, and when the unsuspecting victim visits, everything about your computer from the operating system to the screen resolution can be logged…and, of course, the all important IP address. In addition, a simple network-wide port scan will reveal vulnerable target machines, and a war-dialler will scan thousands of lines for exposed modems that the hacker can exploit.

So now that you know some of the basic dangers, you’re probably wondering how these people connect to a victim’s machine?

## Virtual and Physical Ports ##

Everything that you recieve over the Internet comes as a result of other machines connecting to your computer’s ports. You have two types; Physical are the holes in the back of your machine, but the important ones are Virtual. These allow transfer of data between your computer and the outside world, some with allocated functions, some without, but knowing how these work is the first step to discovering who is attacking you; you simply MUST have a basic knowledge of this, or you won’t get much further.

# What the phrases TCP/UDP actually mean

TCP/IP stands for Transmission Control Protocol and Internet Protocol, a TCP/IP packet is a block of data which is compressed, then a header is put on it and it is sent to another computer (UDP stands for User Datagram Protocol). This is how ALL internet transfers occur, by sending packets. The header in a packet contains the IP address of the one who originally sent you it. Now, your computer comes with an excellent (and free) tool that allows you to see anything that is connected (or is attempting to connect) to you, although bear in mind that it offers no blocking protection; it simply tells you what is going on, and that tool is NETSTAT.

## Netstat: Your first line of defence ##

Netstat is a very fast and reliable method of seeing exactly who or what is connected (or connecting) to your computer. Open up DOS (Start/Programs/MS-DOS Prompt on most systems), and in the MSDOS Prompt, type:

netstat -a

(make sure you include the space inbetween the “t” and the “a”).

If you’re connected to the Internet when you do this, you should see something like:

Active Connections

Proto Local Address Foreign Address State
TCP macintosh: 20034 modem-123.tun.dialup.co.uk: 50505 ESTABLISHED
TCP macintosh: 80 proxy.webcache.eng.sq: 30101 TIME_WAIT
TCP macintosh MACINTOSH: 0 LISTENING
TCP macintosh MACINTOSH: 0 LISTENING
TCP macintosh MACINTOSH: 0 LISTENING

Now, “Proto(col)” simply means what kind of data transmission is taking place (TCP or UDP), “Local address” is your computer (and the number next to it tells you what port you’re connected on), “Foreign Address” is the machine that is connected to you (and what port they’re using), and finally “State” is simply whether or not a connection is actually established, or whether the machine in question is waiting for a transmission, or timing out etc.

Now, you need to know all of Netstat’s various commands, so type:

netstat ?

You will get something like this:

Displays protocol statistics and current TCP/IP network connections.

NETSTAT [-a] [-e] [-n] [-s] [-p proto] [-r] [interval]

-a Displays all connections and listening ports.
-e Displays Ethernet statistics. This may be combined with the -s option.
-n Displays addresses and port numbers in numerical form.
-p proto Shows connections for the protocol specified by proto; proto may be TCP or UDP. If used with the -s option to display per-protocol statistics, proto may be TCP, UDP, or IP.
-r Displays the routing table.
-s Displays per-protocol statistics. By default, statistics are shown for TCP, UDP and IP; the -p option may be used to specify a subset of the default.

Have a play around with the various options, but the most important use of these methods is when you combine them. The best command to use is

netstat -an

because this will list all connections in Numerical Form, which makes it a lot easier to trace malicious users….Hostnames can be a little confusing if you don’t know what you’re doing (although they’re easily understandable, as we shall see later). Also, by doing this, you can also find out what your own IP address is, which is always useful.

Also,

netstat -b

will tell you what ports are open and what programs are connecting to the internet.

## Types of Port ##

It would be impossible to find out who was attacking you if computers could just access any old port to perform an important function; how could you tell a mail transfer from a Trojan Attack? Well, good news, because your regular, normal connections are assigned to low, commonly used ports, and in general, the higher the number used, the more you should be suspicious. Here are the three main types of port:

# Well Known Ports These run from 0 to 1023, and are bound to the common services that run on them (for example, mail runs on channel 25 tcp/udp, which is smtp (Simple Mail Transfer Protocol) so if you find one of these ports open (and you usually will), it’s usually because of an essential function.

# Registered Ports These run on 1024 to 49151. Although not bound to a particular service, these are normally used by networking utilities like FTP software, Email client and so on, and they do this by opening on a random port within this range before communicating with the remote server, so don’t panic (just be wary, perhaps) if you see any of these open, because they usually close automatically when the system that’s running on them terminates (for example, type in a common website name in your browser with netstat open, and watch as it opens up a port at random to act as a buffer for the remote servers). Services like MSN Messenger and ICQ usually run on these Ports.

# Dynamic/Private Ports Ranging from 49152 to 65535, these things are rarely used except with certain programs, and even then not very often. This is indeed the usual range of the Trojan, so if you find any of these open, be very suspicious. So, just to recap:

Well Known Ports 0 to 1023 Commonly used, little danger.
Registered Ports 1024 to 49151 Not as common, just be careful.
Dynamic/Private Ports 49152 to 65535 Be extremely suspicious.

## The hunt is on ##

Now, it is essential that you know what you’re looking for, and the most common way someone will attack your machine is with a Trojan. This is a program that is sent to you in an email, or attempts to bind itself to one of your ports, and when activated, it can give the user your passwords, access to your hard drive…they can even make your CD Tray pop open and shut. At the end of this Document, you will find a list of the most commonly used Trojans and the ports they operate on. For now, let’s take another look at that first example of Netstat….

Active Connections

Proto Local Address Foreign Address State
TCP macintosh: 27374 modem-123.tun.dialup.co.uk: 50505 ESTABLISHED
TCP macintosh: 80 proxy.webcache.eng.sq: 30101 TIME_WAIT
TCP macintosh MACINTOSH: 0 LISTENING
TCP macintosh MACINTOSH: 0 LISTENING
TCP macintosh MACINTOSH: 0 LISTENING

Now, straight away, this should make more sense to you. Your computer is connected on two ports, 80 and 27374. Port 80 is used for http/www transmissions (ie for all intents and purposes, its how you connect to the net, although of course it’s a lot more complicated than that). Port 27374, however, is distinctly suspicious; first of all, it is in the registered port range, and although other services (like MSN) use these, let’s assume that you have nothing at all running like instant messengers, webpages etc….you’re simply connected to the net through proxy. So, now this connection is looking even more troublesome, and when you realise that 27374 is a common port for Netbus (a potentially destructive Trojan), you can see that something is untoward here. So, what you would do is:

1) run Netstat , and use:

Netstat -a

then

Netstat -an

So you have both Hostnames AND IP addresses.

## Tracerouting ##

Having the attacker’s IP is all well and good, but what can you do with it? The answer is, a lot more! It’s not enough to have the address, you also need to know where the attacker’s connections are coming from. You may have used automated tracerouting tools before, but do you jknow how they work?

Go back to MSDOS and type

tracert *type IP address/Hostname here*

Now, what happens is, the Traceroute will show you all the computers inbetween you and the target machine, including blockages, firewalls etc. More often than not, the hostname address listed before the final one will belong to the Hacker’s ISP Company. It’ll either say who the ISP is somewhere in there, or else you run a second trace on the new IP/hostname address to see who the ISP Company in question is. If the Hostname that you get back doesn’t actually seem to mention an actual geographical location within its text, you may think all is lost. But fear not! Suppose you get a hostname such as

http://www.haha.com

Well, that tells us nothing, right? Wrong….simply enter the hostname in your browser, and though many times you will get nothing back, sometimes it will resolve to an ISP, and from there you can easily find out its location and in what areas they operate. This at least gives you a firm geographical location to carry out your investigations in.

If you STILL have nothing, as a last resort you COULD try connecting to your target’s ISP’s port 13 by Telnet, which will tell you how many hours ahead or behind this ISP is of GMT, thus giving you a geographical trace based on the time mentioned (although bear in mind, the ISP may be doing something stupid like not having their clocks set correctly, giving you a misleading trace. Similarly, a common tactic of Hackers is to deliberately have their computer’s clock set to a totally wrong time, so as to throw you off the scent). Also, unless you know what you’re doing, I wouldn’t advise using Telnet (which is outside the parameters of this tutorial).

## Reverse DNS Query ##

This is probably the most effective way of running a trace on somebody. If ever you’re in a chatroom and you see someone saying that they’ve “hacked into a satellite orbiting the Earth, and are taking pictures of your house right now”, ignore them because that’s just bad movie nonsense. THIS method is the way to go, with regard to finding out what country (even maybe what State/City etc) someone resides, although it’s actually almost impossible to find an EXACT geographical location without actually breaking into your ISP’s Head Office and running off with the safe.

To run an rDNS query, simply go back to MS-DOS and type

netstat

and hit return. Any active connections will resolve to hostnames rather than a numerical format.

# DNS

DNS stands for Domain Name Server. These are machines connected to the Internet whose job it is to keep track of the IP Addresses and Domain Names of other machines. When called upon, they take the ASCII Domain Name and convert it to the relevant numeric IP Address. A DNS search translates a hostname into an IP address….which is why we can enter “www.Hotmail.com” and get the website to come up, instead of having to actually remember Hotmail’s IP address and enter that instead. Well, Reverse DNS, of course, translates the IP Address into a Hostname (ie – in letters and words instead of numbers, because sometimes the Hacker will employ various methods to stop Netstat from picking up a correct Hostname).

So, for example,

298.12.87.32 is NOT a Hostname.
mail6.bol.net.au IS a Hostname.

Anyway, see the section at the end? (au) means the target lives in Australia. Most (if not all) hostnames end in a specific Country Code, thus narrowing down your search even further. If you know your target’s Email Address (ie they foolishly sent you a hate mail, but were silly enough to use a valid email address) but nothing else, then you can use the Country codes to deduce where they’re from as well. You can also deduce the IP address of the sender by looking at the emails header (a “hidden” line of code which contains information on the sender)…on Hotmail for example, go to Preferences, and select the “Full Header’s Visible” option. Alternatively, you can run a “Finger” Trace on the email address, at:

www.samspade.org

Plus, some ISP’s include their name in your Email Address with them too (ie Wanadoo, Supanet etc), and your Hacker may be using an email account that’s been provided by a Website hosting company, meaning this would probably have the website host’s name in the email address (ie Webspawners). So, you could use the information gleaned to maybe even hunt down their website (then you could run a website check as mentioned previously) or report abuse of that Website Provider’s Email account (and thus, the Website that it goes with) to

abuse@companynamegoeshere.com

If your Hacker happens to reside in the USA, go to:

www.usps.gov/ncsc/lookups/abbr_state.txt

for a complete list of US State abbreviatons.

## List of Ports commonly used by Trojans ##

Please note that this isn’t a complete list by any means, but it will give you an idea of what to look out for in Netstat. Be aware that some of the lower Ports may well be running valid services.

UDP: 1349 Back Ofrice DLL
31337 BackOfrice 1.20
31338 DeepBO
54321 BackOfrice 2000

TCP: 21 Blade Runner, Doly Trojan, Fore, Invisible FTP, WebEx, WinCrash
23 Tiny Telnet Server
25 Antigen, Email Password Sender, Haebu Coceda, Shtrilitz Stealth, Terminator, WinPC, WinSpy, Kuang2 0.17A-0.30
31 Hackers Paradise
80 Executor
456 Hackers Paradise
555 Ini-Killer, Phase Zero, Stealth Spy
666 Satanz Backdoor
1001 Silencer, WebEx
1011 Doly Trojan
1170 Psyber Stream Server, Voice
1234 Ultors Trojan
1243 SubSeven 1.0 – 1.8
1245 VooDoo Doll
1492 FTP99CMP
1600 Shivka-Burka
1807 SpySender
1981 Shockrave
1999 BackDoor 1.00-1.03
2001 Trojan Cow
2023 Ripper
2115 Bugs
2140 Deep Throat, The Invasor
2801 Phineas Phucker
3024 WinCrash
3129 Masters Paradise
3150 Deep Throat, The Invasor
3700 Portal of Doom
4092 WinCrash
4567 File Nail 1
4590 ICQTrojan
5000 Bubbel
5000 Sockets de Troie
5001 Sockets de Troie
5321 Firehotcker
5400 Blade Runner 0.80 Alpha
5401 Blade Runner 0.80 Alpha
5402 Blade Runner 0.80 Alpha
5400 Blade Runner
5401 Blade Runner
5402 Blade Runner
5569 Robo-Hack
5742 WinCrash
6670 DeepThroat
6771 DeepThroat
6969 GateCrasher, Priority
7000 Remote Grab
7300 NetMonitor
7301 NetMonitor
7306 NetMonitor
7307 NetMonitor
7308 NetMonitor
7789 ICKiller
8787 BackOfrice 2000
9872 Portal of Doom
9873 Portal of Doom
9874 Portal of Doom
9875 Portal of Doom
9989 iNi-Killer
10067 Portal of Doom
10167 Portal of Doom
10607 Coma 1.0.9
11000 Senna Spy
11223 Progenic trojan
12223 Hack´99 KeyLogger
12345 GabanBus, NetBus
12346 GabanBus, NetBus
12361 Whack-a-mole
12362 Whack-a-mole
16969 Priority
20001 Millennium
20034 NetBus 2.0, Beta-NetBus 2.01
21544 GirlFriend 1.0, Beta-1.35
22222 Prosiak
23456 Evil FTP, Ugly FTP
26274 Delta
30100 NetSphere 1.27a
30101 NetSphere 1.27a
30102 NetSphere 1.27a
31337 Back Orifice
31338 Back Orifice, DeepBO
31339 NetSpy DK
31666 BOWhack
33333 Prosiak
34324 BigGluck, TN
40412 The Spy
40421 Masters Paradise
40422 Masters Paradise
40423 Masters Paradise
40426 Masters Paradise
47262 Delta
50505 Sockets de Troie
50766 Fore
53001 Remote Windows Shutdown
54321 SchoolBus .69-1.11
61466 Telecommando
65000 Devil

## Summary ##

The Internet is by no means as anonymous as some people think it is, and although this is to the detriment of people’s security online, this also works both ways….it IS possible to find and stop even the most determined of attackers, you just have to be patient and keep hunting for clues which will help you put an end to their exploits.

Notes:

* Some commands are dangerous (SYSKEY example) and can cause problems that can lead to formatting.
* Other commands are not run on Windows XP or earlier versions, I have not tested all. Contributors are free to make any necessary corrections.
* Under Vista “Run” is not visible in the Start menu.

Contents

* configuration Panel
* Windows programs and tools
* Disk Management
* Network management and Internet
* Other Commands

Configuration Panel :

CONTROL Panel : Opens Control Panel

AdminTool CONTROL: Opens administration tools

KEYBOARD CONTROL: Opens the properties of the keyboard

CONTROL COLOR: Opens the parameters of appearance

CONTROL FOLDERS: Opens options records

FONTS CONTROL: opens the font manager

INTERNATIONAL CONTROL intl.cpl : opens the Regional and Language Options

CONTROL MOUSE or main.cpl : opens the properties of the mouse

UserPassword CONTROL: Opens Print user accounts

CONTROL userpasswords2 : controls users password and their access

PRINTERS CONTROL: Opens printers and fax machines available

Appwiz.cpl: opens the Add / Remove Program

OPTIONALFEATURES :opens the Add / Remove Windows Components (For Vista only)

Desk.cpl :opens display settings

HDWWIZ.CPL : opens the Add Hardware Wizard

INFOCARDCPL.CPL : opens the Program Compatibility Wizard

IRPROPS.CPL: Opens manager infrared

ISCSICPL: Opens tool configuration of the Microsoft initiator ISCI (For Vista only)

Joy.cpl: Opens tool game controller

Mmsys.cpl : opens the parameters of sounds

Sysdm.cpl : opens the system properties

TABLETPC.CPL opens the settings for Tablet PC (Vista only)

TELEPHON.CPL: Opens tool phone connection

Timedate.cpl : opens the parameters of the time and date

Wscui.cpl: opens the Windows Security Center

ACCESS.CPL: Opens Accessibility Options (For XP only)

WUAUCPL.CPL: Opens Service Windows update (for XP only)

Powercfg.cpl : opens the manager of feeding (For Vista only)

COLLAB.CPL : opens the immediate vicinity (For Vista only)

AZMAN.MSC: Open Authorization Manager (For Vista only)

CERTMGR.MSC :opens licenses for the current user

COMPMGMT.MSC :opens the management tool of the computer

COMEXP.MSC or DCOMCNFG : Opens the tool components and services (For Vista only)

Devmgmt.msc : opens the device manager.

Eventvwr or EVENTVWR.MSC : open Event Viewer

FSMGMT.MSC : opens shared folders

NAPCLCFG.MSC : Opens tool NAP client configuration (For Vista only)

Services.msc : opens the service manager

TASKSCHD.MSC or SCHEDTASKS CONTROL: opens the Task Scheduler (For Vista only)

Gpedit.msc : Opens Print Group Policy (For more professional editions of Windows)

LUSRMGR.MSC : opens the publisher of users and local groups

Secpol.msc : opens the Local Security Settings

NTMSMGR.MSC : Opens manager removable storage media

NTMSOPRQ.MSC : opens applications for the operator Removable Storage

Rsop.msc : opens RSoP

Wmimgmt.msc : Opens Windows Management Infrastructure

TPM.MSC : opens the tool management module secure platform on the local computer (for Vista only)

PerfMon or perfmon.msc : opens monitor reliability and performance of Windows.

MMC : opens a new empty console

MDSCHED : opens the Tool of the Windows Memory (For Vista only)

DXDIAG : opens the DirectX Diagnostic Tool

ODBCAD32: Opens administrator ODBC Data Source

REGEDIT or REGEDT32 : opens the Registry Editor (For Vista only)

Drwtsn32 : Opens Dr. Watson (For XP only)

CHECK : opens up the verification of drivers

CLICONFG : opens the client configuration SQL

Utilman : opens options for ergonomics (For Vista only)

COMPUTERDEFAULTS : open the tool of default programs (For Vista only)

CREDWIZ : Opens tool backup and restore passwords of users (for Vista only)

LPKSETUP : opens the wizard to install and uninstall language display (For Vista only)

MobSync : opens the center synchronization

REKEYWIZ : Opens manager certificates encryption of files (For Vista only)

SLUI : opens assistant activation of Windows (Vista only)

MSCONFIG : opens the tool system configuration

SYSEDIT : opens the System Configuration Editor (Caution, handle with caution)

SYSKEY : Opens Utility protection of the database Windows accounts (Caution, handle with extreme caution!)

Windows programs and tools

EXPLORER : Opens Windows Explorer

IEXPLORE : Opens Internet Explorer

WAB : Opens contacts (For Vista only)

Charmap : Opens the character

MSPAINT : Opens Paint

WRITE or Wordpad : opens Wordpad

NOTEPAD : Open Notebook

SNIPPINGTOOL: Opens tool screenshot (For Vista only)

CALC : opens the calculator

CLIPBRD : opens the clipboard (for XP only)

WINCHAT : Microsoft opens chat network (Windows XP only)

SOUNDRECORDER : opens the tape

DVDPLAY : opens your DVD player

WMPLAYER : Opens Windows Media Player

MOVIEMK : Opens Windows Movie Maker

JOURNAL : Opens a new journal (For Vista only)

STIKYNOT : opens the reminder (For Vista only)

OSK : opens the screen keyboard.

TABTIP : opens the Tablet PC Input Panel (For Vista only)

MAGNIFY : opens the microscope

WINCAL : Windows opens the timetable (for Vista only)

DIAL : the numerator telephone Opens Windows

EUDCEDIT : opens the publisher of a private nature

SNDVOL : opens the mixer volume

RSTRUI : opens Tool System Restore (For Vista only)

% WINDIR% \ System32 \ restore \ rstrui.exe : opens the tool to restore the system (for XP only)

MSINFO32 : opens System Information

MRT : launches utility removing malicious software (for Vista only)

Taskmgr : opens the Windows Task Manager

CMD : opens the command prompt

MIGWIZ : Opens tool for transferring files and settings Windows (For Vista only)

MIGWIZ.EXE : Opens tool for transferring files and settings Windows (for XP only)

Sidebar : Opens the Windows Sidebar (For Vista only)

Sigverif : Opens tool signature verification file

Winver : opens the window for your Windows version

FSQUIRT : Assistant Bluetooth transfer

IExpress : opens the wizard of self-extracting archives

MBLCTR : opens the Mobility Center Windows (For Vista only)

MSRA : Opens the Windows Remote Assistance

Mstsc : Opens tool connection Remote Desktop

MSDT : opens the Tool and Microsoft Support

WERCON : opens the reporting tool and solutions to problems (for Vista only)

WINDOWSANYTIMEUPGRADE : You can upgrade from Windows Vista

WINWORD : opens Word (if it is installed)

PRINTBRMUI : opens migration wizard printer (Vista only)

Disk Management

DISKMGMT.MSC : opens the disk manager

Cleanmgr : opens the Disk Cleanup tool

DFRG.MSC : Opens tool disk defragmentation

Defrag : defragment the hard disk

CHKDSK : Perform an analysis of the partition specified in the settings of the command (For more information, type CHKDSK /? In the command prompt CMD)

DISKPART : opens the partitioning tool (a bit heavy to handle)

Reply With QuoteNetwork management and Internet

IPCONFIG : displays the configurations of IP addresses on the computer (For more information, type: IPCONFIG /? In the command prompt CMD)

CONTROL NetConnect or ncpa.cpl : opens network connections

Inetcpl.cpl : Opens Internet properties

Firewall.cpl : Opens the Windows Firewall

WF.MSC :
opens the advanced features of Windows Firewall (For Vista only).

NETSETUP.CPL : opens the Network Setup Wizard (for XP only)

Other Commands

Javaws: Visualize caching software JAVA (If installed)

AC3FILTER.CPL : opens properties AC3 filter (if installed)

FIREFOX : launches Mozilla Firefox (if installed)

NETPROJ : allow or not connecting to a network projector (For Vista only)

LOGOFF : closes the current session

SHUTDOWN : Windows off

SHUTDOWN-A : stop the shutting down Windows

% WINDIR% or% SYSTEMROOT% : Opens the Windows installation folder

% PROGRAMFILES% : opens the installation of other programs (Program Files)

% USERPROFILE% : opens the profile of the user currently logged System File Checker (Requires a CD of Windows if the cache is not available)

SFC / scannow : scans immediately all system files and repair damaged files

SFC / VERIFYONLY : scans only system files

SFC / ScanFile = “name and file path” : scans the file specified, and repairs when damaged SFC / VERIFYFILE = “name and file path” only scans the file specified

SFC / scanonce : scans the system files on the next restart

SFC / REVERT : return the initial configuration (For more information, type SFC /? In the command prompt CMD.

Windows Xp Secrets

May 18, 2009

These are the some Top windows XP hidden secret.

1. Useful key shortcuts available

- Windows key + D – shows the desktop
- Windows key + M – minimizes all open windows
- Windows key + Shift + M – maximizes all open windows
- Windows key + E – Runs Windows Explorer
- Windows key + R – shows the RUN dialog
- Windows key + F – shows Search window
- Windows key + Break – shows System Properties box
- Windows key + TAB – Go through taskbar applications
- Windows key + PAUSE Display the System Properties dialog box
- Windows key + U Open Utility Manager
- ALT + TAB – Cycle through opened applications
- Hold down CTRL while dragging an item to Copy it
- CTRL + ESC Display the Start menu
- ALT + ENTER View the properties for the selected item
- F4 key Display the Address bar list in My Computer or
- NUM LOCK + Asterisk (*) Display all of the subfolders that are under the selected folder

2. Lock Windows to protect computer

You can lock Windows to protect the computer when leaving the station easily by creating a shortcut with the path rundll32.exeuser32.dll, LockWorkStation. The Windows key + L is also a shortcut to this feature.

3. Edit sysoc.inf to list all software

To show all software that can be removed from your computer (including protected Windows services), you can manually edit (using notepad for example) the sysoc.inf file located in Windows\inf\. Just remove the word hide next to the software pack.
*Note* – use this at your own risk. Removing critical components of the system will make Windows instable.

4. Windows XP comes with IPv4 and IPv6

Windows XP comes both IPv4 and IPv6 support. To enable IPv6, you can install the protocols needed with the command “ipv6 install” in the command-prompt. Then type ipv6 /? to see the options. The installation will not remove the IPv4 protocols so your current configuration will still work.

5. Access Task Manager with shortcut

To access the Task Manager easier, you can make a shortcut that points to %windir%\system32\taskmgr.exe

6. Stop treating ZIP files like Folders

If you don’t want your Windows XP to treat ZIP files like folders, you can disable this component by running regsvr32 /u zipfldr.dll at the command prompt or Run dialog. If you start missing it, you can enable it by typing regsvr32 zipfldr.dll.

7. Run program as diffrent user

You can run a program as a different user. Right click an application and select Run As command.

8. Switch users leaving applications opened

You can switch users leaving the applications opened too (*NOTE* use this only when needed since it could lead to system instability).
Go to Task Manager – processes and end the process explorer.exe. This will end only your session and not all applications. Then go to Applications tab, click New task and type runas /user:domainname\username explorer.exe. A password prompt will appear to login to the desired username. The user’s session will start, with all your previously applications running.
I recommend to open first a command-line prompt and type runas /? to see all the options available.

9. Rename multiple files in Windows at once

Rename multiple files in Windows at once. Select them all, right click and select Rename. Enter the desired name. They will be renamed using what you specified, with a number in brackets to distinguish them.

10. Task kill feature in Windows

Windows has a task kill feature similar to Linux. Go to a command prompt and run the command tasklist to see running processes with PID numbers. Then type tskill
to end the specific task. This forces an instant closing of the task.

11. Edit features with GPEDIT.MSC

You can edit many features by running gpedit.msc. You can add log on/log off scripts here and many features.

12. Edit accounts in the command prompt

You can edit accounts by running “control userpasswords2″ at the command prompt.

13. Use systeminfo.exe to see System Information

You can use the systeminfo.exe command in the command prompt to see System Information, including all Windows updates and hotfixes.

14. Disable system services for maximum performance

There are system services that you can disable to free up the system’s load. To access the interface that permits you to make changes to system’s services, type services.msc and the command prompt.
This is a list of services that are *usually* useless and can be safely disabled.
Alerter
Application Layer Gateway Service,
Application Management
Automatic Updates
Background Intelligent Transfer
Clipbook
Distributed Link Tracking Client
Distributed Transaction Coordinater
Error Reporting Service
Fast User Switching Compatibility
IMAPI CD-Burning
Indexing Service
IPSEC Services
Messenger
Net Logon
Net Meeting
Remote Desktop Sharing
Network DDE
Network DDE DSDM
Portable Media Serial Number
Remote Desktop Help Session Manager
Remote Registry
Secondary Logon
Smartcard
SSDP Discovery Service
Uninterruptible Power Supply
Universal Plug and Play Device Host
Upload Manager
Webclient
Wireless Zero Configuration
WMI Performance Adaptor

*NOTE*: Make sure you don’t need them since some applications you’re using could depend on them. If you make any application to fail by disabling any of the services, go back and enable it again.

15. Repair Windows XP by using the XP installation CD

If your system failes to start due to an error related to missing HAL.DLL, invalid Boot.ini or any other critical system boot files you can repair this by using the XP installation CD. Simply boot from your XP Setup CD and enter the Recovery Console. Then run “attrib -H -R -S” on the C:\Boot.ini file and delete it. Run “Bootcfg /Rebuild” and then Fixboot.

Conclusion:
Some of the tips might give you goosebumps, quite advance for average users to contemplate. If that’s the case, leave them alone because there are many simple tips that don’t need extra study. Stick with the ones you are comfortable with. I hope you find these tips useful.