XF 2.2 Button movement & menu customization

[Deleted member 241496]

We have been tweaking the coding a bit to accomplish what we want overall which is:

1) Move the 'Post Thread...' and 'New Posts' buttons in the .p-body-header to the nav-opposite area in the menus
2) Move the staffbar menu into the nav-opposite area showing just
3) Use the staffbar area to create a secondary menu for users. We'd like to show the Blog, Resources, and User upgrade links there instead.

So far we have been able to hide the p-body-header area and remove the search text from the nav-opposite area to make more room for the two buttons to be added. We need some assistance in:

1) Adding the buttons to the menu
2) Moving the staff bar links of admin and moderator into the user menu area
3) Add our own links to the staffbar area.

Our site is www.talkingevs.com if you would like to take a look. Thank you ahead of time.

 

[Deleted member 241496]

OK, we used this tutorial (https://xenforo.com/community/resources/move-staffbar-to-navbar-with-badges.7763/) to hide the staffbar navigation and add it to the user menu. Only things left are:

1) Adding the buttons to the menu
2) Add our own navigation links to the old staffbar navigation area, which will display to everyone

 

[Old Nick]

You might check @BassMan add-ons. Some of them can acheive your goals.

 

[Deleted member 241496]

You might check @BassMan add-ons. Some of them can acheive your goals.

We want to create another menu above the header image just like the primary menu. I understand this will require a new template most likely, but any direction would be appreciated.

The big thing is moving the two buttons into the user nav area. I just can't find where Xenforo is pushing the button code from.

 

[Deleted member 241496]

We have created a template called

template_buttons_PostThread

which we copied the following code into:

<xf:pageaction>
    <xf:if is="$pageSelected == 'new_posts' ">
        <xf:button href="{{ link('forums/list') }}" icon="list">
            {{ phrase('forum_list') }}
        </xf:button>
    <xf:else />
        <xf:button href="{{ $xf.options.forumsDefaultPage == 'new_posts' ? link('forums/new-posts') : link('whats-new/posts') }}" icon="bolt">
            {{ phrase('new_posts') }}
        </xf:button>
    </xf:if>
    <xf:if is="$xf.visitor.canCreateThread() OR $xf.visitor.canCreateThreadPreReg()">
        <xf:button href="{{ link('forums/create-thread') }}" class="button--cta" icon="write" overlay="true" rel="nofollow">
            {{ phrase('post_thread...') }}
        </xf:button>
    </xf:if>
</xf:pageaction>

And then we placed this into the Page_Container template just after the staffbar menu we added. However, it isn't showing the buttons still. What is going on?


UPDATE: Figured it out. Just needed to delete the <xfpageaction> part.


And then we added the following CSS to the extra.less template:

/* Hide board title at top */
.p-title h1 { visibility: hidden; }
 
/* Hide normal post thread and new post on other than mobile */
@media (min-width: @xf-responsiveMedium) {
    .p-title-pageAction { visibility: hidden; }
}

/* Buttons Post Thread and New Post */
.NavPostButtons .button{
    padding-top:5px !important;
    padding-bottom:5px !important;
    padding-right:3px !important;
    padding-left:3px !important;
}
.NavPostButtons {
    display:inline;
    margin-top: auto;
    margin-bottom: auto;
}

/* Nav Buttons Post Thread and New Post */
@media (max-width: @xf-responsiveMedium)
{
    .NavPostButtons
    {
        display: none;
    }
}

We are still learning correct coding techniques so if anything seems off, please let us know. We still cant figure out how to vertically align the buttons.

 

[Deleted member 241496]

And now we ran into another problem. The way we did it above, it hides the New Posts and Post Thread In button correctly on non-mobile devices and shows them on mobile devices. However, apparently the Resources and Media addons use that same .p-title-pageAction area to display their add media and add resource buttons. So now those won't show. Any ideas how to hide just the 'Post Thread' and 'New Posts' buttons within that .p-title-pageAction area for only non mobile devices?

SOLVED AGAIN:
Changed CSS to:

/* Hide board title at top only on main page */
 body[data-template='forum_list'] .p-title h1 { visibility: hidden; }

/* Hide normal post thread and new post on other than mobile */
@media (min-width: @xf-responsiveMedium) {
 body[data-template='forum_list'] .p-body-header {display: none;}
}

/* Buttons Post Thread and New Post */
.NavPostButtons .button{
    padding-top:7px !important;
    padding-bottom:7px !important;
    padding-right:3px !important;
    padding-left:3px !important;
}

.NavPostButtons {
    display:inline;
}

/* Nav Buttons Post Thread and New Post */
@media (max-width: @xf-responsiveMedium)
{
    .NavPostButtons
    {
        display: none;
    }
}
/**********/

Still need help with:
1) Check to see if CSS coding and template coding is correct format or most efficient.
2) Vertically align and center the buttons
3) Creating the new menu where the StaffBar used to be, to match the formatting of the main menu (will not be sticky)

 

[Deleted member 241496]

Another update for those looking to do the same thing. Got a new menu at the top of the header by doing the following (by coding, not within Xenforo):

1) Placed the following CSS code into extra.less template

/* Top Navigation Bar Style */
.TopNavBarWrapper {
    background: #000000;
}

.TopNavBarContainer {
    width: 1600px;
    max-width: 100%;
    margin: 5px auto;
    background: #000000;
    padding: 5px;
    display: flex;
    flex-wrap: wrap;
}

.TopNavBar {
    float: left;
}

.fas {
    padding-right: 7px;
}

.TopNavBarLink {
    background: #000000;
    color: #FFDE59;
    font-size:16px;
    font-weight: bold;
    float: left;
    margin: 5px;
    padding-left:5px;
}

.TopNavBarLink:hover {
     color: #FFDE59;
}
/************/

2) Placed the following html into the Page_container template right above

<div class="p-staffBar">

:

<div class="TopNavBarWrapper">
        <div class="TopNavBarContainer">
            <div class="TopNavBar">
            <a href="https://www.talkingevs.com/forums/resources.66/" class="TopNavBarLink"><i class="fas fa-folder-open"></i>Our Resources</a>
            <a href="https://www.talkingevs.com/misc/contact" class="TopNavBarLink"><i class="fas fa-paper-plane"></i>Contact Us</a>  
            <a href="https://www.talkingevs.com/account/upgrades" class="TopNavBarLink"><i class="fas fa-dollar-sign"></i>Upgrade Account</a>
            </div>
        </div>
    </div>

As always, please review and see if there is anything you recommend changing. Last thing left for us to figure out is how to vertically center the two buttons in the user nav area.

 

[Deleted member 241496]

Any ideas guys on how to vertically center our two buttons in the user nav area and the sticky bar when you scroll? The code we used is above.

 

[Deleted member 241496]

Not the best solution as Im sure its not displaying properly on some browser, but added in margin-top: 3px; and it seems to appear centered on my end. I wanted to use auto but it wouldn't do anything.