Please upgrade here. These earlier versions are no longer being updated and have security issues.
HackerOne users: Testing against this community violates our program's Terms of Service and will result in your bounty being denied.
Options

Register Signup / Profile Menu in a external site navbar

2

Comments

  • Options
    hgtonighthgtonight ∞ · New Moderator

    Assuming the rest of your site is on the same domain, I would suggest retrieving the memodule via JS and inserting that into the rest of your site. You can access the 'widget' version of any module through the module controller. E.g. you can see the MeModule at http://vanillaforums.org/module/memodule.

    The MeModule displays a login/register box if the user isn't signed in and the user menu if they do.

    Search first

    Check out the Documentation! We are always looking for new content and pull requests.

    Click on insightful, awesome, and funny reactions to thank community volunteers for their valuable posts.

  • Options

    @hgtonight said:
    Assuming the rest of your site is on the same domain, I would suggest retrieving the memodule via JS and inserting that into the rest of your site. You can access the 'widget' version of any module through the module controller. E.g. you can see the MeModule at http://vanillaforums.org/module/memodule.

    The MeModule displays a login/register box if the user isn't signed in and the user menu if they do.

    sounds like a good idea..

    you might provide some example code. :)

    I may not provide the completed solution you might desire, but I do try to provide honest suggestions to help you solve your issue.

  • Options
    hgtonighthgtonight ∞ · New Moderator
    edited April 2014

    This assumes you are loading jQuery in your site and that you have an element with the ID of MeModule somewhere in your html markup as well:

    jQuery(document).ready(function($) {
      var url = 'http://forum.example.com/module/memodule/');
      $.ajax({
        url: url,
        success: function(data) {
          $("#MeModule").html(data);
        },
        error: function(jqXHR) {
          console.log(jqXHR);
        }
      });
    });
    

    Also, I would add the following markup as the default:

    <div id="MeModule">
      <div class="MeBox MeBox-SignIn">
        <div class="SignInLinks">
          <a class="SignInPopup" href="/entry/signin?Target=module%2Fmemodule" rel=
          "nofollow">Sign In</a> <span class="Bullet">·</span> <a class=
          "ApplyButton" href="/entry/register?Target=module%2Fmemodule" rel=
          "nofollow">Register</a>
        </div>
    
        <div class="SignInIcons">
          <a class="PopupWindow" href=
          "https://graph.facebook.com/oauth/authorize?client_id=140915679292796&amp;redirect_uri=http%3A%2F%2Fvanillaforums.org%2Fentry%2Fconnect%2Ffacebook%3FTarget%3Dmodule%252Fmemodule&amp;scope=email,publish_stream"
          id="FacebookAuth" name="FacebookAuth" rel="nofollow" title=
          "Sign In with Facebook"><img align="bottom" alt="Sign In with Facebook"
          src="/plugins/Facebook/design/facebook-icon.png"></a> <a class=
          "PopupWindow" href=
          "http://vanillaforums.org/entry/openid?url=https%3A%2F%2Fwww.google.com%2Faccounts%2Fo8%2Fid&amp;Target=%2Fmodule%2Fmemodule"
          id="GoogleAuth" name="GoogleAuth" rel="nofollow" title=
          "Sign In with Google"><img alt="Sign In with Google" src=
          "/plugins/GoogleSignIn/design/google-icon.png"></a> <a class=
          "PopupWindow" href=
          "http://vanillaforums.org/entry/openid?Target=%2Fmodule%2Fmemodule" id=
          "OpenIDAuth" name="OpenIDAuth" rel="nofollow" title=
          "Sign In with OpenID"><img alt="Sign In with OpenID" src=
          "/plugins/OpenID/design/openid-icon.png"></a> <a class="PopupWindow"
          href="http://vanillaforums.org/entry/twauthorize?Target=module%2Fmemodule"
          id="TwitterAuth" name="TwitterAuth" rel="nofollow" title=
          "Sign In with Twitter"><img alt="Sign In with Twitter" src=
          "/plugins/Twitter/design/twitter-icon.png"></a>
        </div>
      </div>
    </div>
    

    Which is just the default MeModule markup wrapped in a div IDed with MeModule. Your site's will be a little different.

    Search first

    Check out the Documentation! We are always looking for new content and pull requests.

    Click on insightful, awesome, and funny reactions to thank community volunteers for their valuable posts.

  • Options
    peregrineperegrine MVP
    edited April 2014

    @LaughingQuoll

    are you related to tigerquoll?

    I may not provide the completed solution you might desire, but I do try to provide honest suggestions to help you solve your issue.

  • Options

    lol Thats actually really funny. I would say no Im not related but I love Tiger Quolls!

  • Options

    @hgtonight I dont have any instance of MeModule on my external pages

  • Options
    hgtonighthgtonight ∞ · New Moderator

    @LaughingQuoll You will need to add that markup to your other site. Then you will have to add that jQuery too. That should load the module from your Vanilla install and replace the markup you placed manually.

    Once you get that working and into place, you can animate so it if it looks too jarring to you.

    Search first

    Check out the Documentation! We are always looking for new content and pull requests.

    Click on insightful, awesome, and funny reactions to thank community volunteers for their valuable posts.

  • Options

    Im not sure how to do that and my forums are on the same site and I want to add the login register profile menu to other pages on my site

  • Options
    hgtonighthgtonight ∞ · New Moderator

    I don't know what software the rest of your site runs. I can't tell you where to put the markup or where to put the JS.

    Is it a custom site, or are you using a CMS of some sort?

    Search first

    Check out the Documentation! We are always looking for new content and pull requests.

    Click on insightful, awesome, and funny reactions to thank community volunteers for their valuable posts.

  • Options

    quollcraft.net

  • Options

    I used boostrap and Ruby On Rails

  • Options

    @hgtonight Im only 13 so I dont know what CSM is or anything. I know a little Java and a lot of HTML

  • Options
    vrijvlindervrijvlinder Papillon-Sauvage MVP
    edited April 2014

    That is what google is for and 13 is not an excuse for not using it. You asked how to do this, you were told how to do it. it is not our fault you have limited knowledge.
    Use what you have and tackle the rest later.

    I suggested the easy way to do it with simple html. which should work just as well until you learn how to code in other languages.

    Just add it to the menu you already have on the external site .And include the css for the drop down . It will not work unless the person is logged in whether the link is in your site or in the forum.

  • Options

    When I added the code that you guys gave my it just showed the code in the nav bar

  • Options

    and wheres the CSS wich one do I add in?

  • Options
    vrijvlindervrijvlinder Papillon-Sauvage MVP

    What code showed ? It is not easy to help you if you won't put some effort into learning the basics.

    step 1 copy the html code from the me box while you are logged in.

    step 2 add your full forum url to the all the urls in the html

    step 3 paste the code in the correct area of the menu in the site you want it in.

    step 4 to get the drop down effect you will need the css for it .

    If you can't make the css for the drop down use a generator like this to build it so it matches your site.

    http://www.cssportal.com/css3-menu-generator/#

  • Options

    EnabledApplicationFolders(); $Dispatcher->EnabledApplicationFolders($EnabledApplications); $Dispatcher->PassProperty('EnabledApplications', $EnabledApplications); // Mimic the DiscussionsController(). $Controller = new DiscussionsController(); Gdn::Controller($Controller); Gdn::Request()->WebRoot(''); ob_end_flush(); // Stop and send the buffer for the code above. /* /* * The above code is to include Garden framework used by Vanilla, so you can use its functions. * You can put your code in this file. See the example below. * You can also make a separate file with your code and include this file by a require() above all. */ $Session = Gdn::Session(); // Declare an alias for the user session. // Check if the user session is valid. if($Session->IsValid()) { // echo "The user is logged in!"; // The session is valid, so the user is logged in. $Username = ($Session->User->Name); // display link to user profile '.$Username . ' } else { // echo "The user is not logged in."; // The session is invalid, so the user is not logged in. // display sign in link to user profile Sign In } ?>

    I Used @peregrine's code. I just copied and pasted it

  • Options
    vrijvlindervrijvlinder Papillon-Sauvage MVP

    Yea pasting code without knowing what it does will do that...

    I think peregrine and hgtonight assumed you were capable of understanding the code they gave you. But you need to learn some stuff before hand on your own.

  • Options
    vrijvlindervrijvlinder Papillon-Sauvage MVP

    Just copy these links into the little box where you added that code but remove that other code from there. This is all you need to add. As I said from the start.

    <li> <a href="http://quollcraft.net/forum//profile" class="MeButton FlyoutButton" title="Notifications">Notifications</a></li>
    
            <li><a href="http://quollcraft.net/forum/messages/all" class="MeButton FlyoutButton" title="Inbox">Inbox</a></li>
    
            <li><a href="http://quollcraft.net/forum/discussions/bookmarked" class="MeButton FlyoutButton" title="Bookmarks">Bookmarks</a></li>
    
            <li><a href="http://quollcraft.net/forum/profile/edit" class="MeButton FlyoutButton" title="Account Options">Account Options</a></li>
    
            <li><a href="http://quollcraft.net/forum/profile/edit">Edit Profile</a></li>
    
            <li><a href="http://quollcraft.net/forum/entry/signin">Sign IN</a></li>
    
  • Options

    But if their signed in it shows sign in still

Sign In or Register to comment.