login_bar.css to look like wp adminbar

[LPH]

I'm finally starting to see how to get a common header between WordPress and XenForo. The login_bar code is set so it only goes to /community/login rather than pulls down and now I need to change the login bar so it matches the WordPress admin bar (guess it is really called the Toolbar in 3.3.x).

Looking at login_bar.css

@property "loginBar";
min-height: 50px;
padding: 0 0 20px 0;
width: 100%;
background: #222222; /* for IE*/
background: rgba(0, 0, 0, 0.8);
        border-bottom: 1px solid @primaryLightish;
position: fixed;
top: 0px;
left: 0px;
font-family: Arial, sans-serif;
font-size: 14px;
color: #ffffff;
line-height: 28px;
z-index: 1000;
-webkit-box-shadow: 0px 2px rgba(0, 0, 0, 0.6);
        -moz-box-shadow: 0px 2px rgba(0, 0, 0, 0.6);
        box-shadow: 0px 2px rgba(0, 0, 0, 0.6);
        @property "/loginBar";

The line-height is changed to match the 28px on WP bar but I'm not able to get the background as a gradient. It is set to #000.

Question #1
This fixed position cuts off the top header of the theme.
Fixed by adding top: 0px and left: 0px

Question #2
This only works for people not logged into the site. Once logged in then the bar disappears. Is there a way to keep the bar present logged into the system?

Any suggestions?

Update: I'm watching this tutorial and getting a better idea on how to handle a static header.

http://webdesign.tutsplus.com/tutorials/site-elements/building-a-static-admin-bar-for-the-browser/

 

[Jake Bunce]

Is there a way to keep the bar present logged into the system?

Admin CP -> Appearance -> Templates -> PAGE_CONTAINER

This is the relevant code:

<xen:if is="{$visitor.is_moderator} || {$visitor.is_admin}">
	<xen:include template="moderator_bar" />
<xen:elseif is="!{$visitor.user_id} && !{$hideLoginBar}" />
	<xen:include template="login_bar" />
</xen:if>

You could remove the conditions leaving only the login_bar:

<xen:include template="login_bar" />

That would also remove the moderator_bar which is normally exclusive with the login_bar.

 

[LPH]

Admin CP -> Appearance -> Templates -> PAGE_CONTAINER

Thank you! Instead of removing the conditions, I decided to add two new templates (loggedin_bar and loggedin_bar.css). These are almost identical to the login_bar but I removed the link for the login page.

Wohoo. Almost there.

(1) Drop the moderator bar down a bit because it is hidden by the loggedin_bar.

Update:

Done:Inserted this into the logged_in_bar.css and login_bar.css

body
{
    padding-top: 50px;
}

Edit for Clarity: This is the last question !

(2) Figure out how XenDynamics is loading the login_bar in the XenDynamic WordPress theme and duplicate it in a WP plugin so all themes on the network show it.

Almost there