The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

Login popup with image can be resizable???

View previous topic View next topic Go down

Solved Login popup with image can be resizable???

Post by soamra on September 14th 2015, 9:39 pm

Technical Details


Forum version : #phpBB2
Position : Founder
Concerned browser(s) : Mozilla Firefox, Google Chrome, Internet Explorer
Who the problem concerns : All members
Forum link : hellasd3.4umer.com

Description of problem

Hello everyone,
once again i need your help for request that i have from my forum members.
We want a login popup window with an image as background, but the image be resizable to any screen resolution.
Until now i removed the button "dont show again message". And i put an image with the maximum resolution 800x600. To succeed a beautiful result i changed also the background image at a resolution 800x600.
I also realized that i can go beyond 800x600 resolution if i change a few things to overall_header.
More specific here is what i did to succeed the current result:
Code:
         <tr height="{LOGIN_POPUP_MSG_HEIGHT}">
            <td class="row1" align="left" valign="top">
               <div id="login_popup_buttons">
                  <form action="{S_LOGIN_ACTION}" method="get">
                     <input type="submit" class="mainoption" value="{L_LOGIN}" />
                     <input type="button" class="mainoption" value="{L_REGISTER}" onclick="parent.location='{U_REGISTER}';" />
                  </form>
               </div>
               <span class="genmed">{LOGIN_POPUP_MSG}</span>
            </td>
         </tr>
Close button removed...
Code:
<!-- BEGIN switch_login_popup -->
      var logInPopUpLeft, logInPopUpTop, logInPopUpWidth = {LOGIN_POPUP_WIDTH}, logInPopUpHeight = {LOGIN_POPUP_HEIGHT}, logInBackgroundResize = true, logInBackgroundClass = false;
   <!-- END switch_login_popup -->
If i change logInPopUpWidth = "1600", logInPopUpHeight = "900" , i can make the pop up login to specific resolution.
Now my question is. Is anyway to put a bigger resolution image and when i resize the browser window the login popup background image also being resized and keeping the aspect ratio of the photo???
Please i need a solution budlly and i believe the solution is somewhere on the overall_header section.
Ange Tuteur if you can help me with your magic skills i would be great full.
Thank you in advance all the support team.

soamra
New Member

Posts : 12
Reputation : 0
Language : greek

Back to top Go down

Solved Re: Login popup with image can be resizable???

Post by Ange Tuteur on September 15th 2015, 11:07 am

Hi @soamra,

The image is a background, yes ? In which case I'd recommend using the background-size property to resize the image. Add that property to your current rule, then adjust the value as necessary.

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2684
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Login popup with image can be resizable???

Post by soamra on September 15th 2015, 5:25 pm

Yes the image is background. I add image using [img ] image here[ /img ] inside the login pop up on the administration panel.
Could you give an example how i will use the background-size property and how i add that to the current rule. I am noob on scripts.
Also will that resize the window of login pop up? For example if i put a background image that is over 800x600(1600x900) will the window be resized to the photo.
Also if i run the forum on a 1024x768 resolution screen will the pop up login window reduce the size of the image to the maximum resolution of the screen.
I hop you understand what i mean. Help please?

soamra
New Member

Posts : 12
Reputation : 0
Language : greek

Back to top Go down

Solved Re: Login popup with image can be resizable???

Post by Ange Tuteur on September 15th 2015, 5:48 pm

Wait, let's clarify. You said you used image tags, in which case the image would just be an image ; not a background. So for this image : Is it a background image, or a regular image made with the bbcode ?

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2684
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Login popup with image can be resizable???

Post by soamra on September 15th 2015, 6:45 pm

I think is a regular image with bbcode... i went at Administration Panel -> General -> Forum -> Configuration -> Login Popup and enter this in the content part. [img ] my image [/img ]... I did that because i tried to use that code to css style ...
Code:
#login_popup{
background: url(LINK)!important;}
but doesnt worked

soamra
New Member

Posts : 12
Reputation : 0
Language : greek

Back to top Go down

Solved Re: Login popup with image can be resizable???

Post by Ange Tuteur on September 15th 2015, 7:47 pm

If you're only going to be using one image, use this CSS :
Code:
#login_popup img {
  width:100%;
  height:auto;
}

That'll resize the image to 100% of the login popup container.

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2684
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Login popup with image can be resizable???

Post by soamra on September 15th 2015, 8:10 pm

Yes,i know that this is possible, i mean to resize an image to fit the size of login pop up window. BUT i want the window be resized on the size of the image and if the screen resolution is smaller of the login pop up window, then the pop up window AND the image inside, being reduced so to fit the browser window...
What i mean is i want the login pop up window to fill almost all the browser window. And also both image and the pop up window to change size when you change the browsers window size.
Something that happens to iframes with autoresize or with lightboxes.
For example if i put the pop up login window to a size of 1600x900, then a person with smaller resolution screen cant login because the login pop up window is oversized.
We want to put a big resolution welcome image on pop up login window and for members with smaller resolutions screens that pop up window(and also the image inside) to be resized so the member can see the login screen.
I hope to be understood now. I know that you can help us to find a solution to that.

soamra
New Member

Posts : 12
Reputation : 0
Language : greek

Back to top Go down

Solved Re: Login popup with image can be resizable???

Post by Ange Tuteur on September 15th 2015, 8:21 pm

@soamra wrote:What i mean is i want the login pop up window to fill almost all the browser window.
Ooh.. why didn't you say that to begin with ?

See if this works :
Code:
#login_popup {
  position:fixed;
  left:0 !important;
  top:0 !important;
  width:100% !important;
  height:100% !important;
}

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2684
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Login popup with image can be resizable???

Post by soamra on September 15th 2015, 8:34 pm

Nope ... i did that also ... doesnt work(i upload it to see it by yourself, check forum) .. the image and the window when you change the browser window do not autoresize.
Go here http://dimsemenov.com/plugins/magnific-popup/ and press the single image lightbox. Then change the size of your browser window. You will notice that the image always autoresize so to fit the browsers window.
That is the result we are looking for. But we want that with the login pop up window.

soamra
New Member

Posts : 12
Reputation : 0
Language : greek

Back to top Go down

Solved Re: Login popup with image can be resizable???

Post by Ange Tuteur on September 15th 2015, 8:40 pm

Actually, it is still taking up the whole screen. The only part that isn't is the inner table. Add this to your CSS :
Code:
#login_popup > table, #login_popup img {
  width:100% !important;
  height:100% !important;
}

That should adjust both the table and image.

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2684
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Login popup with image can be resizable???

Post by soamra on September 15th 2015, 8:50 pm

I know that i really bother you , but that doesnt fixed anything. Justs reduces the image size to fit the window(check my forum again pls). The window doesnt autoresize.
Is that because the login pop up window has a fixed number of max resolution of 800x600??? Can we change that? Or is something else?

soamra
New Member

Posts : 12
Reputation : 0
Language : greek

Back to top Go down

Solved Re: Login popup with image can be resizable???

Post by Ange Tuteur on September 15th 2015, 9:33 pm

You made sure to keep this rule in your stylesheet, correct ?
Code:
#login_popup {
  position:fixed;
  left:0 !important;
  top:0 !important;
  width:100% !important;
  height:100% !important;
}

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2684
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Login popup with image can be resizable???

Post by soamra on September 15th 2015, 10:13 pm

Mate once again you are the man... i removed that so i reentered that rule and all is perfect.
If you were close i would buy you a beer mate. Smile
Once again THANK YOU!!!
So for all the members of forumotion.
If you want a resizable login popup window with a full width resolution image, here is the solution
Code:
#login_popup {
  position:fixed;
  left:0 !important;
  top:0 !important;
  width:100% !important;
  height:100% !important;
}
#login_popup > table, #login_popup img {
  width:100% !important;
  height:100% !important;
}

SOLVED!!!

soamra
New Member

Posts : 12
Reputation : 0
Language : greek

Back to top Go down

Solved Re: Login popup with image can be resizable???

Post by Ange Tuteur on September 15th 2015, 10:22 pm

You're welcome ^^

Topic archived

Have a good day. Smile

P.S.
You can ship the beer via express. tongue

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2684
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

View previous topic View next topic Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum