I’ve always found login widgets to take up alot of room, and the meta widget I didn’t like. For my own sites I’ve made a bit of code that I add to my header or footer with my style for the css to match it up and I thought I’d share it.

First of all, decide where you want your admin/login links to appear on your site. I usually choose the header, but on this site I placed them in the footer to hide them a bit.
Lets take for example you want to add them to your twenty ten theme header. Open header.php and find an appropriate spot to place the code, save it, and check your site to see if it’s where you want, don’t worry about the colors of the links or exact position, we’ll change that next.

				<div id="loggedout">
				<?php if ( is_user_logged_in() ) { echo "</div><div id='loggedin'><a href='" . get_option('siteurl') . "/wp-admin/'>Dashboard</a> |"; } ?> <?php wp_loginout('/index.php'); ?>
</div><!-- #login-form -->

Once you have it roughly where you want it, we’ll style the links, add this to your style.css for your theme. If you take a look at the code I’ve used, you can see what css tags to use. loggedout, loggedin. These will control how the links look while logged in, and while logged out.

/* logged out links start*/

#loggedout  {    /* controls the logged out link properties */
font-family:"arial", sans-serif;
background: #fff;
border: none;
}
#loggedout  a {   /*controls active link while logged out */
color: #DDD;
text-decoration: none;
font-weight: bold;
}
#loggedout a:visited {  /* controls already visited links while logged out */
color:#DDD;
}
#loggedout a:hover {    /* controls hover over links while logged out */
color: #3464d3;
}

/* logged in links */

#loggedin  { /* controls links while logged in */
font-family:"arial", sans-serif;
background: #fff;
border: none;
}
#loggedin  a { /* controls active links while logged in */
color: #DDD;
text-decoration: none;
font-weight: bold;
}
#loggedin a:visited { /* controls already visited links while logged in */
color:#d00c0d;
}
#loggedin a:hover { /* controls mouse over effects while logged in to links */
color: #3464d3;
}

Ok, granted, this is just basic css, you may not need all of this code, but this will show you how to completely change the look of everything for those links.

Lets break this css in half, we have one section that controls the links while you are logged in, and one section while your logged out. They both have the same options, only one is for what you see while logged in and one for logged out.

The first part is loggedout, you can add a background color or border to the area if you want.

Second part is loggedout a, this is for your active links. You can change the font size, color, style,add padding left right top bottom, anything you want.

The third part is loggedout a.visited, usually you would only change the font color for this, it’s not even really needed in some cases.

Last we have loggedout a.hover, this controls how you want your links to appear when you hover over them. You can add a bold effect, or color change, background change, underline, anything you want.

I’ve left example code for each of them, you can change this to what suites your site, and if you’re new to CSS, this small example might make it easier to see how other things are styled in your theme css. Hope this was helpful.