login_bar.css to look like wp adminbar


Well-known member
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.


Jake Bunce

XenForo moderator
Staff member
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" />
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.


Well-known member
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.


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

    padding-top: 50px;
Edit for Clarity: This is the last question ! :whistle:

(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 :love: