Log in form help

[Adriatic]

So i've got this working plugin log in for my website, but i want to change it, by adding images instead of basic letters hence making it more eye-candy

here are the codes for it:

.php file

 

<?phpif ( ! defined( 'WP_CONTENT_URL' ) ) {if ( defined( 'WP_SITEURL' ) ) define( 'WP_CONTENT_URL', WP_SITEURL . '/wp-content' );else define( 'WP_CONTENT_URL', get_option( 'url' ) . '/wp-content' );}if ( ! defined( 'WP_PLUGIN_URL' ) ) define( 'WP_PLUGIN_URL', WP_CONTENT_URL. '/plugins' );load_plugin_textdomain('sblogin', WP_PLUGIN_URL.'/sidebar-login/langs/', 'sidebar-login/langs/');function wp_sidebarlogin_menu() {add_submenu_page('themes.php', __('Sidebar Login','sblogin'), __('Sidebar Login','sblogin'), 'manage_options','sidebar-login', 'wp_sidebarlogin_admin');}if (!function_exists('is_ssl')) :function is_ssl() {return ( isset($_SERVER['HTTPS']) && 'on' == strtolower($_SERVER['HTTPS']) ) ? true : false;}endif;function wp_sidebarlogin_admin(){// Update optionsif ($_POST) {	update_option('sidebarlogin_heading', stripslashes($_POST['sidebarlogin_heading']));	update_option('sidebarlogin_welcome_heading', stripslashes($_POST['sidebarlogin_welcome_heading']));	update_option('sidebarlogin_login_redirect', stripslashes($_POST['sidebarlogin_login_redirect']));	update_option('sidebarlogin_logout_redirect', stripslashes($_POST['sidebarlogin_logout_redirect']));	update_option('sidebarlogin_register_link', stripslashes($_POST['sidebarlogin_register_link']));	update_option('sidebarlogin_forgotton_link', stripslashes($_POST['sidebarlogin_forgotton_link']));	update_option('sidebarlogin_logged_in_links', stripslashes($_POST['sidebarlogin_logged_in_links']));	update_option('sidebar_login_avatar', stripslashes($_POST['sidebar_login_avatar']));	echo '<div id="message"class="updated fade">';		_e('<p>Changes saved</p>',"sblogin");				echo '</div>';}// Get options$sidebarlogin_heading = get_option('sidebarlogin_heading');$sidebarlogin_welcome_heading = get_option('sidebarlogin_welcome_heading');$sidebarlogin_login_redirect = get_option('sidebarlogin_login_redirect');$sidebarlogin_logout_redirect = get_option('sidebarlogin_logout_redirect');$sidebarlogin_register_link = get_option('sidebarlogin_register_link');$sidebarlogin_forgotton_link = get_option('sidebarlogin_forgotton_link');$sidebarlogin_logged_in_links = get_option('sidebarlogin_logged_in_links');$sidebar_login_avatar = get_option('sidebar_login_avatar');?><div class="wrap alternate">        <h2><?php _e('Sidebar Login',"sblogin"); ?></h2>        <br class="a_break" style="clear: both;"/>        <form action="themes.php?page=sidebar-login" method="post">            <table class="niceblue form-table">                        	<tr>                    <th scope="col"><?php _e('Logged out Heading',"sblogin"); ?>:</th>                    <td><input type="text" name="sidebarlogin_heading" value="<?php echo $sidebarlogin_heading; ?>" /> <span class="setting-description"><?php _e('Widget heading.','sblogin'); ?></span></td>                </tr>                <tr>                    <th scope="col"><?php _e('Logged in Heading',"sblogin"); ?>:</th>                    <td><input type="text" name="sidebarlogin_welcome_heading" value="<?php echo $sidebarlogin_welcome_heading; ?>" /> <span class="setting-description"><?php _e('Heading for widget when user is logged in. <code>%username%</code> shows username.','sblogin'); ?></span></td>                </tr>                            <tr>                    <th scope="col"><?php _e('Login redirect URL',"sblogin"); ?>:</th>                    <td><input type="text" name="sidebarlogin_login_redirect" value="<?php echo $sidebarlogin_login_redirect; ?>" /> <span class="setting-description"><?php _e('Url to redirect the user to after login. Leave blank to use their current page.','sblogin'); ?></span></td>                </tr>                <tr>                    <th scope="col"><?php _e('Logout redirect URL',"sblogin"); ?>:</th>                    <td><input type="text" name="sidebarlogin_logout_redirect" value="<?php echo $sidebarlogin_logout_redirect; ?>" /> <span class="setting-description"><?php _e('Url to redirect the user to after logout. Leave blank to use their current page.','sblogin'); ?></span></td>                </tr>                <tr>                    <th scope="col"><?php _e('Show Register Link',"sblogin"); ?>:</th>                    <td><select name="sidebarlogin_register_link">                    	<option <?php if ($sidebarlogin_register_link=='yes') echo 'selected="selected"'; ?> value="yes"><?php _e('Yes','sblogin'); ?></option>                    	<option <?php if ($sidebarlogin_register_link=='no') echo 'selected="selected"'; ?> value="no"><?php _e('No','sblogin'); ?></option>                    </select> <span class="setting-description"><?php _e('User registrations must also be turned on for this to work (\'Anyone can register\' checkbox in settings).','sblogin'); ?></span></td>                </tr>                <tr>                    <th scope="col"><?php _e('Show Lost Password Link',"sblogin"); ?>:</th>                    <td><select name="sidebarlogin_forgotton_link">                    	<option <?php if ($sidebarlogin_forgotton_link=='yes') echo 'selected="selected"'; ?> value="yes"><?php _e('Yes','sblogin'); ?></option>                    	<option <?php if ($sidebarlogin_forgotton_link=='no') echo 'selected="selected"'; ?> value="no"><?php _e('No','sblogin'); ?></option>                    </select></td>                </tr>                <tr>                    <th scope="col"><?php _e('Logged in links',"sblogin"); ?>:</th>                    <td><textarea name="sidebarlogin_logged_in_links" rows="3" cols="80" /><?php echo $sidebarlogin_logged_in_links; ?></textarea><br/><span class="setting-description"><?php _e("One link per line. Note: Logout link will always show regardless. Tip: Add <code>|true</code> after a link to only show it to admin users or alternatively use a <code>|user_capability</code> and the link will only be shown to users with that capability. See <a href='http://codex.wordpress.org/Roles_and_Capabilities' target='_blank'>http://codex.wordpress.org/Roles_and_Capabilities</a> for more info on roles and Capabilities.<br/> You can also type <code>%USERNAME%</code> and <code>%USERID%</code> which will be replaced by the user info. Default:",'sblogin');                    echo '<br/><a href="'.get_bloginfo('wpurl').'/wp-admin/">'. __('Dashboard', 'sblogin') .'</a><br/><a href="'.get_bloginfo('wpurl').'/wp-admin/profile.php">'. __('Profile', 'sblogin') .'</a>'; ?></span></td>                </tr>                <tr>                    <th scope="col"><?php _e('Show Logged in Avatar',"sblogin"); ?>:</th>                    <td><select name="sidebar_login_avatar">                    	<option <?php if ($sidebar_login_avatar=='yes') echo 'selected="selected"'; ?> value="yes"><?php _e('Yes','sblogin'); ?></option>                    	<option <?php if ($sidebar_login_avatar=='no') echo 'selected="selected"'; ?> value="no"><?php _e('No','sblogin'); ?></option>                    </select></td>                </tr>                            </table>            <p class="submit"><input type="submit" value="<?php _e('Save Changes',"sblogin"); ?>" /></p>        </form>    </div>    <?php}/*example of short call with textsidebarlogin('before_title=<h5>&after_title='</h5>');suggested by dev.xiligroup.com*/function sidebarlogin($myargs = '') {if (is_array($myargs)) $args = &$myargs;else parse_str($myargs, $args);$defaults = array('before_widget'=>'','after_widget'=>'','before_title'=>'<h2>','after_title'=>'</h2>');$args = array_merge($defaults, $args);widget_wp_sidebarlogin($args);}function widget_wp_sidebarlogin($args) {	global $user_ID, $current_user;	/* To add more extend i.e when terms came from themes - suggested by dev.xiligroup.com */	$defaults = array(		'thelogin'=>'',		'thewelcome'=>'',		'theusername'=>__('Username:','sblogin'),		'thepassword'=>__('Password:','sblogin'),		'theremember'=>__('Remember me','sblogin'),		'theregister'=>__('Register','sblogin'),		'thepasslostandfound'=>__('Password Lost and Found','sblogin'),		'thelostpass'=>	__('Lost your password?','sblogin'),		'thelogout'=> __('Logout','sblogin')	);	$args = array_merge($defaults, $args);	extract($args);			get_currentuserinfo();	if ($user_ID != '') {		// User is logged in		global $current_user;      		get_currentuserinfo();		if (empty($thewelcome)) $thewelcome = str_replace('%username%',ucwords($current_user->display_name),get_option('sidebarlogin_welcome_heading'));		echo $before_widget . $before_title .$thewelcome. $after_title;		if (get_option('sidebar_login_avatar')=='yes') echo '<div class="avatar_container">'.get_avatar($user_ID, $size = '38').'</div>';		echo '<ul class="pagenav">';		if(isset($current_user->user_level) && $current_user->user_level) $level = $current_user->user_level;		$links = do_shortcode(trim(get_option('sidebarlogin_logged_in_links')));		$links = explode("\n", $links);		if (sizeof($links)>0)		foreach ($links as $l) {			$l = trim($l);			if (!empty($l)) {				$link = explode('|',$l);				if (isset($link[1])) {					$cap = strtolower(trim($link[1]));					if ($cap=='true') {						if (!current_user_can( 'manage_options' )) continue;					} else {						if (!current_user_can( $cap )) continue;					}				}				// Parse %USERNAME%				$link[0] = str_replace('%USERNAME%',$current_user->user_login,$link[0]);				$link[0] = str_replace('%username%',$current_user->user_login,$link[0]);				// Parse %USERID%

 

 

style.css file

 

 

/* Basic styling for login widget   This styling aligns the gravtar left, the links right.*/.widget_wp_sidebarlogin, #sidebar-login {background-image:url(http://localhost/wordpress/wp-content/themes/flowhub/images/blue/login.png);background-position:10px 100%;background-repeat:no-repeat;padding-left:5px !important;}div#test {    background-image:  url(/images/backgroundimage.JPG);    background-repeat: no-repeat;    height: 500px;    width: 380px;}.widget_wp_sidebarlogin .avatar_container, #sidebar-login .avatar_container {float:left;}.widget_wp_sidebarlogin ul {list-style: none outside !important;}.widget_wp_sidebarlogin .avatar_container img, #sidebar-login .avatar_container img {padding: 3px;border: 1px solid #ddd;-moz-border-radius: 4px;-webkit-border-radius: 4px;margin-right: 8px;margin-top: 5px;}.widget_wp_sidebarlogin #openid_field {background-image:url(../openid/f/openid.gif);background-position:3px 50%;background-repeat:no-repeat;padding-left:21px !important;}.widget_wp_sidebarlogin hr {display: block;clear: both; border: 0; border-top: 1px solid #999; height: 1px;}

 

 

here it is how it looks now

before you log in

after you log in

 

and this is how i want it to look

 

with two of these buttons hoovering bellow the 'lock' image. one with text LOGIN and the other with REGISTER

 

and after you log in it should look like this

with the text dashboard profile, logout on the right of the picture

 

thanks in advance, whoever can sort this out for me can get his ad placed on my website when it is released (125x125) (and its a music reviewing website)