Admin Bar is in vertical way

Hi,

You can do this with editing css file of plugin.

I am having the same issue and saying “You can do this with editing css file of plugin.” without just telling us the CSS code is just wrong.

I am having the same issue

Actually this is not a issue, this plugin works horizontal way.

The real issue is your comprehension, i think.
First user told he have an issue: his Admin Bar login is > vertical <. Second user is having the same issue. Well, I’m having the same.
Here is a screenshot to avoid confusion.

This should not happen, and editing css may not be the right solution.

Hi @oceanor,

Are you using any other “admin-bar” plugin? (I saw two “register” item on your admin-bar) maybe other plugin’s css file effect it.

Please, let me know.

Yes, I’ve installed 2 others admin-bar plugins, but they are disabled, I thinked about a conflict too and tried only your, but the problem is still happening ??

By the way, my disabled admin-bar related plugin (disabled) are these:

Admin Bar Login (cause of this issue)
Custom Admin Bar
WP-Admin Customizer

No one is enabled :/

EDIT: I can confirm, tested 2 seconds ago, if I enable only your plugin, and I’m logged off, I see two “register” buttons in my admin bar, when the default one have only one “register”.

Thanks for detailed information.
Can you try with default wordpress theme?

I thinked about a conflict too and tried only your, but the problem is still happening.

I don’t know your theme’s style so, hard to identify. (I’ve already tested it with latest and clear WordPress and works pretty well)

Probably your theme’s or any active plugin’s css file affecting it.

I am having the same issue and saying “You can do this with editing css file of plugin.” without just telling us the CSS code is just wrong.

SOOOOOOO could you please tell us WHAT the css is for getting it to sit as you have it in your screenshot for this plugin.. I need it to sit horizontal as well…(which seem to be a pretty common issue here)

I really don’t understand why you would offer a good plugin yet not take a second to offer proper support ??

I should mention that my comment above was directed at the Plugin author and not the member I quoted … I just quoted because I agree with the member 100% CHEERS!

SOOOOOOO could you please tell us WHAT the css is for getting it to sit as you have it in your screenshot for this plugin

jacquie123: What Mustafa Uysal is trying to tell you is that he doesn’t know what the proper CSS is, because it looks alright with the default themes that ship with WordPress.

So, instead of complaining that the author is lazy or whatever, it would be more productive to tell him the name of the theme you’re using, so that he could at least be able to reproduce the problem.

Another helpful thing to do would be to switch to one of the default themes, such as Twentytwelve, and see if the issue still happens. (If it doesn’t happen, it means it’s a CSS conflict.)

So, instead of complaining that the author is lazy or whatever (he doesn’t owe you anything, by the way), it would be more productive to tell him the name of the theme you’re using, so that he could at least be able to reproduce the problem.

I wasn’t insinuating that he did owe me anything. Just making a point that if you are kind enough to provide the plugin (which I highly respect) then you, in turn, take on a responsibility (morally) to provide proper support. Also, nowhere in his replies did I see him state that but I do thank you for making that clear. I did however find a fix (which was not my theme as I did try it in twentytwelve and had the same issue.)

Now that I have fixed it, I will be kind enough to share (sharing is caring after all). The CSS file protects itself by going inactive for edits so anything you do within WP plugin edits will not affect the plugin. You have to deactivate the plugin in WP, download the plugin PHP file and CSS file via FTP, edit the CSS to say display:inline; instead of display:block; and re-save. Then edit the PHP (optional) if you want to change the page that the register link goes to. I manage a paid member site so going to wp-admin was not the right page for me. Once both files are saved, upload them back to the plugin folder, overwrite existing then reactivate plugin in WP…

Cheers

if you are kind enough to provide the plugin (which I highly respect) then you, in turn, take on a responsibility (morally) to provide proper support.

I’m not sure I agree with that line of thinking (if you lend me a finger, I’m entitled to your whole hand), but we’re getting off-topic.

In any case, kudos for sharing your solution!

Good day all,

I would just like to extend my personal thanks to the Plugin Author as this was exactly what I was looking for; however, I too had the same issue as the very first poster regarding the login form being vertical and not displaying inline on the bar. I eventually fixed that, but then I was wondering if I could alter the code to be a little more elegant (elegant in my personal bubble of course).

What I wanted was for the logged out user to be presented with the admin bar with a Login/Register drop down box (much like when you’re logged in and the bar displays “Howdy, User”). So I did some digging and found out that I could actually do this.

Below are pics of my results:
My AdminBar Result Pic 1
My AdminBar Result Pic 2

The following php and css is based on the authors original programming, all I did was tweak it.

Here is the code I placed in my themes functions.php

/*
 * Force Admin Bar for logged out users, add a login link, remove the wp logo, and add a custom link menu
 */
class force_admin_bar {
	/*
	 * Loads when class is called
	 */
	function __construct() {
		/* logged out users only */
		if ( is_user_logged_in() ) { return false; }
		/* force adminbar to logged out users */
		add_filter( 'show_admin_bar', '__return_true' );
		/* call function to add login link to admin bar */
		add_action( 'admin_bar_menu', array( &$this, 'logged_out_menus' ), 15 );
	}
	/*
	 * Menus for logged out users
	 */
	function logged_out_menus( $meta = FALSE ) {
		global $wp_admin_bar, $blog_id;
		/* form variables */
		$form = wp_login_form( array(
			'form_id' => 'adminloginform',
			'echo' => false,
			'value_remember' => false
		) );
		/* login-register parent menu */
		$wp_admin_bar->add_menu( array(
			'parent' => 'top-secondary',
			'id' => 'login_menu',
			'title' => __( 'Login ↔ Register' ),
			'href' => get_home_url( $blog_id, '/wp-login.php' )
		) );
		/* login form child menu */
		$wp_admin_bar->add_menu( array(
			'parent' => 'login_menu',
			'id' => 'login',
			'title' => $form
		) );
	}
}
/* Call Class */
$force_admin_bar = new force_admin_bar();

/* Register and Lost password links to add to login form */
function add_lost_password_register_link() {
	return '<a id="register-link" href="/wp-login.php?action=register">Register</a><a id="lostpassword-link" href="/wp-login.php?action=lostpassword">Lost your password?</a>';
}
add_action( 'login_form_bottom', 'add_lost_password_register_link' );

The CSS with minor tweaks:

/* Logged Out User Admin Bar */
div.ab-item.ab-empty-item {
	height: 100% !important;
}
#lostpassword-link {
	line-height: 0.8em;
}
#adminloginform .login-username label:hover,
#adminloginform .login-password label:hover,
#adminloginform .login-remember label:hover {
	color: #3197cc;
}
#adminloginform .login-username input,
#adminloginform .login-password input {
	font: 13px/24px sans-serif;
	padding:0 4px 0 4px;
	height: 24px;
	line-height: 20px;
	border: none;
	color: #555;
	text-shadow: 0 1px 0 #fff;
	background-color: rgba( 255, 255, 255, 0.9 );
	-webkit-border-radius: 3px;
	border-radius: 3px;
}
#adminloginform #wp-submit {
	text-decoration: none;
	font-size: 13px;
	line-height: 26px;
	height: 28px;
	margin: 0 0 2px 0;
	padding: 0 10px 1px;
	cursor: pointer;
	border-width: 1px;
	border-style: solid;
	-webkit-border-radius: 3px;
	-webkit-appearance: none;
	border-radius: 3px;
	white-space: nowrap;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	background: #2ea2cc;
	border-color: #0074a2;
	-webkit-box-shadow: inset 0 1px 0 rgba(120,200,230,0.5), 0 1px 0 rgba(0,0,0,.15);
	box-shadow: inset 0 1px 0 rgba(120,200,230,0.5), 0 1px 0 rgba(0,0,0,.15);
	color: #fff;
	text-decoration: none;
}
#adminloginform #wp-submit:active {
	background: #1e8cbe;
	border-color: #005684;
	color: rgba(255,255,255,0.95);
	-webkit-box-shadow: inset 0 1px 0 rgba(0,0,0,0.1);
	box-shadow: inset 0 1px 0 rgba(0,0,0,0.1);
}
#adminloginform #wp-submit:hover {
	background: #1e8cbe;
	border-color: #0074a2;
	-webkit-box-shadow: inset 0 1px 0 rgba(120,200,230,0.6);
	box-shadow: inset 0 1px 0 rgba(120,200,230,0.6);
	color: #fff;
}

I hope the author would like to incorporate this in to the plugin because I have no idea how to make one :).

Cheers,