1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

login_bar.css to look like wp adminbar

Discussion in 'Styling and Customization Questions' started by LPH, Apr 28, 2012.

  1. LPH

    LPH 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.

  2. Jake Bunce

    Jake Bunce XenForo Moderator Staff Member

    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.
  3. LPH

    LPH Well-Known Member

    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:

Share This Page