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

Alter the html of the modal windows

Hi,

I'm building a custom theme (see http://community.myjointpain.org.au/) and I'm looking to modify the html for the modal/overlay windows (delete comment, t&c in registration etc). I've been looking for where this html would be. Are they in views somewhere?

Any help would be much appreciated.

Cheers,
Chris

Comments

  • Options
    R_JR_J Ex-Fanboy Munich Admin

    Best way to find something like this is to look at the source of the page you want to change. I've clicked on "Sign In" and then I've seen <div class="Entry SingleEntryMethod"> and searched for "SingleEntryMethod" in the sources and found files \applications\dashboard\views\entry\signin.php and \applications\dashboard\views\entry\signin2.php

  • Options

    grep and/or searching in notepad++ - are two common techniques for finding what you are looking for in source 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

    Thanks R_J... as an example though... if I look at the modal for delete comment in discussions, the modal itself doesn't have any distinguishing class that I can see to look for. It's just a generic Overlay > Popup. If I was to guess I'd check discussions > views, but I can't see anything in there to help.

    It may be just too late and I'm not seeing something obvious. I'll sleep on it and have a look in the morning.

  • Options
    hgtonighthgtonight ∞ · New Moderator

    You are looking to override the views html output. Look at the link URL. For example, your terms of service link is http://community.myjointpain.org.au/index.php?p=/dashboard/home/termsofservice. This means the view is going to be called 'termsofservice'. It is going to be in the 'home' folder of the 'dashboard' application.

    So you need to copy the file from /applications/dashboard/views/home/termsofservice.php to /themes/myjointpain/views/dashboard/home/termsofservice.php and then modify the file in your theme directory to suit your needs.

    Sometimes the application isn't specified in the route and many times plugins don't use views. In the first case, you will have to look in each application's view folder. In the second, you will have to modify the plugin.

    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 December 2013

    you would create new views in your theme to override

    you can turn off popup for signin to more easily identify view with

    $Configuration['Garden']['SignIn']['Popup'] = TRUE; // Should the sign-in link pop up or go to it's own page?

    an example of a theme that overrides views and helper_functions.php can be found in the mobile theme and fruit theme and a variety of others.

    The downside of modifying views and helper_functions.php is that during upgrades, you may not have all the fixes to security holes, and bugs when you install a new version of vanilla software, but if you keep on top of that during upgrade and make necessary changes you should be all right.

    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

    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

    @lowie said:
    if I look at the modal for delete comment in discussions, the modal itself doesn't have any distinguishing class that I can see to look for.

    Unfortunately, The Delete Modal might be something special, constructed by jQuery.

    Only if and Only if you cannot find those CSS classes, post the HTML for that Delete Modal in between ~~~ tags please

    There was an error rendering this rich post.

  • Options

    @hgtonight and @peregrine... thanks guys. I've been heavily overriding the views and helpers... but the delete modal just threw me as I couldn't find where it was coming from. @UnderDog, I suspect you're right. It's most likely in a jquery plugin or something similar injecting the modal as it's super simple, but I'll check tomorrow and post another comment.

    I really appreciate how responsive the community here is.

  • Options
    hgtonighthgtonight ∞ · New Moderator
    edited December 2013

    The popup confirm delete is specified in /js/library/jquery.popup.js file around line 338.

          confirmHtml:       '\
      <div class="Overlay"> \
        <div id="{popup.id}" class="Popup"> \
          <div class="Border"> \
            <div class="Body"> \
              <div class="Content"><h1>Confirm<p>Are you sure you want to do that?</p></div> \
              <div class="Footer"> \
                <input type="button" class="Button Okay" value="Okay" /> \
                <input type="button" class="Button Cancel" value="Cancel" /> \
              </div> \
            </div> \
          </div> \
        </div> \
      </div>',
    

    You will also have to modify to popup init function if you want to enable localization. It starts around 186:

          } else {
             $('#'+settings.popupId+' .Content h1').text(gdn.definition('ConfirmHeading', 'Confirm'));
             $('#'+settings.popupId+' .Content p').text(gdn.definition('ConfirmText', 'Are you sure you want to do that?'));
             $('#'+settings.popupId+' .Okay').val(gdn.definition('Okay', 'Okay'));
             $('#'+settings.popupId+' .Cancel').val(gdn.definition('Cancel', 'Cancel')).click(function() {
                $.popup.close(settings);
             });
          }
    

    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

    Overriding JavaScript it is not exactly hard.

    grep is your friend.

  • Options
    peregrineperegrine MVP
    edited December 2013

    Always nice if the op posts the version of vanilla they are referring to

    2.0.18.4

    btw - you should update it for security reasons.

    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

    @hgtonight, legend... thanks. @peregrine, I'll do the update today. Thanks for the reminder.

Sign In or Register to comment.