Hello,

I hope you are well.

I have been able to successfully install and use lightbox and it is an amazing module. It adds a certain amount of style to my site right away.

I would like to know how to resize the login box and the contact forum lightboxes. They both appear and work fine, but for some reasons their sizes are off -- the login box is too large and the contact forum box is too small (causes sideways scroll-bar to appear).

What do I need to do to change these?

Thank you.

Comments

baronmunchowsen’s picture

baronmunchowsen commented

Hi,

I changed dimensions via CSS - you can use firebug and/or look at the lightbox css files to work out what you need to change.

Hope this helps.

TheProf’s picture

TheProf commented

Hello,

Thank you for your response.

I didn't think it was in the CSS since I thought it is suppose to dynamically change based on the content loaded within the lightbox. I am still new to CSS and Drupal -- would you be able to point me to which css file / css definition I need to change for the contact box and the login box?

Thank you

TheProf’s picture

TheProf commented

Hello,

I hope everyone is well.

Just a follow-up to my previous message -- any recommendations about how to resolve this issue of resizing the contact form?

Thank you

azinck’s picture

azinck commented

Not sure if you're still needing this but I just did it for a site I was building. Disable the lighbox login and contact form feature and attach the event handlers yourself.

stick this on the page:

Drupal.behaviors.page_init = function (context) {

//login form
   $("a[@href*='/user/login'], a[@href*='?q=user/login']").each(function() {
    $(this).attr({
      href: this.href.replace(/user\/login?/,"user/login/lightbox2"),
      rel: 'lightmodal[|width:250px; height:210px;]'
    });
  });

//contact form
  $("a[@href*='/contact'], a[@href*='?q=contact']").each(function() {
    $(this).attr({
      href: this.href.replace(/contact?/,"contact/lightbox2"),
      rel: 'lightmodal[|width:450px; height:450px;]'
    });
  });
};

Adjust the width and height for each form to your desired size.

kvvnn’s picture

kvvnn commented

You can also edit lightbox_modal.js

azinck’s picture

azinck commented

True, but it's usually bad form to modify a module directly since it makes updating the module trickier.

warrunner’s picture

warrunner commented

Azinck, I'm sure this is a dumb question but when you say, "stick this on the page", what page is that exactly? I am trying to resize the modal login form in lightbox2 to accommodate the addition of RPX login and editing the css file doesn't work. The only place I can find the dimensions indicated in firebug is in the lightbox.js file and I don't like cats but hate to kill kittens so if you could give me a clue about where these handlers go I would be grateful.

azinck’s picture

azinck commented

They can basically be anywhere on the page that's going to launch your lightbox. Either in inline js or in a linked script.