Alter the html of the modal windows

lowie

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

R_J

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

peregrine

grep and/or searching in notepad++ - are two common techniques for finding what you are looking for in source code.

lowie

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.

hgtonight

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.

peregrine

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.

peregrine

read this too for insights....

http://vanillaforums.org/discussion/comment/170761/#Comment_170761

UnderDog

@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

lowie

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

hgtonight

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);
         });
      }

x00

Overriding JavaScript it is not exactly hard.

peregrine

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.

lowie

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