What can we do to make it easier to design with Wild Apricot?

Move login box from top right to below navigation menu

How do I move the login box from the top right of the site to below the navigation menu on the left. I know how to move the absolute position of the login box, but I want to position it so that it moves up or down as the navigation menu changes. For example, if a user clicks on a menu item that drops down 4 sub-menu items I want the login box to also drop down. If I just use absolute positioning the login box either gets overlapped when sub-menus drop down or has to be positioned so far beneath the navigation menu that it looks funny.

0 votes
Sign in
Check!
(thinking…)
Reset
or sign in with
  • facebook
  • google
    Password icon
    I agree to the terms of service
    Signed in as (Sign out)

    We’ll send you updates on this idea

    Shelbi HoffmanShelbi Hoffman shared this idea  ·   ·  Flag idea as inappropriate…  ·  Admin →

    8 comments

    Sign in
    Check!
    (thinking…)
    Reset
    or sign in with
    • facebook
    • google
      Password icon
      I agree to the terms of service
      Signed in as (Sign out)
      Submitting...
      • Shelbi HoffmanShelbi Hoffman commented  ·   ·  Flag as inappropriate

        In admin view, I clicked the Settings tab, then the CSS Customization link under Advanced Settings. You don't have to modify a specific file, you just drop the code below into the Editor box and then hit Apply and Close. This will modify the css file without having to open the actual file.

        #idLoginContainer {
        position: relative;
        float: left;
        margin-top: 5px;
        text-align: right;
        }

        Here's a link to view the screenshot.

        https://growyourgroup.wildapricot.org/resources/Pictures/Screenshot.png

        Let me know if you are still having problems. I was ready to pull my hair out.

      • brandonaiblbrandonaibl commented  ·   ·  Flag as inappropriate

        Would you possibly mind telling me what file you modified in the css customization section? I am basically stuck exactly where you were on your second to last step.

        Thanks

      • Shelbi HoffmanShelbi Hoffman commented  ·   ·  Flag as inappropriate

        I just wanted to post a follow up for anyone following this thread. I was able to move the login box from the top right to under the left navigation menu. I followed the steps that Evgeny outlined. I then had to add the following code in the css customization section:

        #idLoginContainer {
        position: relative;
        float: left;
        margin-top: 5px;
        text-align: right;
        }

        Thank you!

      • Shelbi HoffmanShelbi Hoffman commented  ·   ·  Flag as inappropriate

        I placed the following code in the AreaUnderMenu.tpl file:

        <$Layouts/LoginBox()$>

        I then saved the file, uploaded it under File Management, and hit the rebuild template button. The login box did not appear under my menu. I did another test and placed the text TEST in the AreaUnderMenu.tpl file and followed the additional steps, and the word TEST appeared under the menu.

        Please tell me what I am missing.

        Thank you.

      • Evgeny aka Apricot KernelAdminEvgeny aka Apricot Kernel (Product Manager, Wild Apricot) commented  ·   ·  Flag as inappropriate

        Basically, you need to place this code into AreaUnderMenu.tpl file:

        <$Layouts/LoginBox()$>

        This would render login gadget in this place (this code orders WA theme overrides engine to render template file of login gadget - it can be found at Gadgets\Login.Box folder - see more at http://help.wildapricot.com/display/DOC/Theme+files+language+syntax ).

        Then, you will have to delete it from original place. Open Layouts/LayoutsTemplate.tpl file and find the same line of code there, then delete.

        Please note that Theme Overrides functionality is only intended for experienced web designers.

      • Shelbi HoffmanShelbi Hoffman commented  ·   ·  Flag as inappropriate

        Thanks for your reply. I have enabled the Theme overrides and downloaded the files for my template. I would like to use the AreaUnderMenu.tpl file and just drop the html code for the login box in that file, then upload. Is that possible? I did a test and can place an image under the menu using this file, but I cannot figure out the code to drop in to get the login box under the menu. Any specifics you can provide would be appreciated!

      Feedback and Knowledge Base

      Wild Apricot Inc. 144 Front Street West Suite 725, Toronto, Ontario, Canada M5J 2L7