Sign Up! Login: Password: New User? Forgot? Support
Code 
 
 
Forums 
Forums : Tooltips & Popups > Using and changing the new GuildPortal popup window
Mottie (SuperAdmin) 6/28/2008 8:50 AM EST : Using and changing the new GuildPortal popup window
ACK!
Mottie
Posts: 3884

0
Like

0
Dislike

Using and Changing the Facebox popup Window

GuildPortal admin site link to original post

If you have an Information Box on your site, you'll notice that links inside this window now open up a popup window with the text inside.



I just noticed it today... I don't think it's been part of GuildPortal for very long, but I immediately disliked the white borders. So, I went about finding a way to modify it

Modifying the Color

To change the color of the background, add this to the end of your Custom StyleSheet (How to add CSS). Change the background color (in green) to match your site. You can also adjust the width of the window (in blue)
#facebox .popup .body {
  padding: 10px;
  background: #444444;
  width: 500px;
}
This CSS changes the color of the your title and info text. The background is set by your ContentBox and ContentBoxBody classes in your CSS (to match your site)
#lblTitle {
 color:#ffcc00;
}

#lblDetails {
 color: #dddddd;
}
What remains is a box with the white "Close X" image... I got rid of mine with the CSS below, you can hide the image. You can always click outside the popup window to close it.
#facebox .popup .footer {
  border: 0px;
}

#facebox .popup .footer img {
  display: none;
}
Update!.. Replace the "Close X" button with any image...
  • Place the following script in your footer!
  • Replace the URL in orange to the URL of whatever image you want.
<script type="text/javascript">
$(document).ready(function() {
 $("#facebox").find(".footer").find("img").attr("src","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/close.png");
});
</script>

Using the Facebox popup for other stuff

Information
  • See this post to see how to popup other kinds of information boxes
Images
  • You can have the popup box show your images too! All you need to do is add "rel=facebook" to any link (in red)
<a rel="facebox" href="http://i201.photobucket.com/albums/aa236/Mottie1/SMRT.jpg">Kitty!</a>
Videos
Edited 4/5/2013: Added .popup to make facebox styling work again
Characters: Mottie Motty Mortie Ooshiny Mot Fudgems
TopBottom

Mottie (SuperAdmin) 7/27/2008 3:32 AM EST : RE: Using and changing the new GuildPortal popup window
ACK!
Mottie
Posts: 3884

0
Like

0
Dislike

I guess I should have posted how to change the style inside and outside the pop up box too.

Inside the Facebox popup window

I had someone ask me for help on their popup window which looked like this:



The image won't stretch the text box inside. So, simply add the CSSbelow to resize it to whatever width you want (change the CSS in red to your desired width)

Overall style inside the facebox can be set using this CSS in your Custom CSS:
#facebox .ContentBox { background: #333333 url(); color: #dddddd; width:800px; }
#facebox .ContentBoxTitle { background: #333333 url(); color: #ffcc00; font-size: 150%; font-weight: bold; }
#facebox .ContentBoxBody { background:#333333 url(); color: #dddddd; }
Or, you can also individualize each info box color scheme by adding the ContentBoxTitle and ContentBoxBody CSS definitions inside your info box.
<style type="text/css">
.ContentBox {width:800px !important;}
.ContentBoxTitle { background: #333333 url(); color: #ffcc00; font-size: 150%; font-weight: bold; }
.ContentBoxBody { background:#333333 url(); color: #dddddd; }
</style>
I left in the "url()" in case you get an idea for a background image or texture, otherwise, change the styles in green as desired.



This is a solution to images that are wider than the facebox and hang over the edge.

Since I haven't found an easy way to resize the facebox popup width dynamically, that leave us with two solutions (for now):
  1. Adda horizontal scroll bar by adding this line to your CSS. I don't reallylike this solution since it adds a big scroll bar at the bottom, buteverything is inside the facebox popup

    #facebox .ContentBoxBody { overflow:auto; }

  2. Resizethe image with CSS to fit inside the facebox window. Set the width inred to the same width you set the facebox body (in both places)

    #facebox img { max-width:700px; width:auto !important; width:700px; }

Outside the Facebox popup window

The GuildPortal popup window overlaps the page, but it can be distracting if you are using the window to pop up an image or video. This snippet of CSS allows you to dim the background behind the popup window.

Click this link to see the dimming: Kitty!

Add this CSS to your Custom StyleSheet to dim the background.

CSS
#facebox_overlay {
  position: fixed;
  top: 0px;
  left: 0px;
  height:100%;
  width:100%;
  opacity: 0.7 !important;
  filter: alpha(opacity=70) !important;
}
Edit: Updated the info in the "Inside the facebox popup window"
Characters: Mottie Motty Mortie Ooshiny Mot Fudgems
TopBottom

Mottie (SuperAdmin) 1/23/2009 9:41 AM EST : RE: Using and changing the new GuildPortal popup window
ACK!
Mottie
Posts: 3884

0
Like

0
Dislike

Positioning the facebox window

To move the facebox up, add this CSS and adjust the top (in red) as you desire.
#facebox {position:absolute; top:20px !important;}

Scrollbars in facebox

I found a nice hack to make all the min-height, max-height, min-width and max-width work on IE (as well as the other browsers)! - I find it ironic that it was posted back in 2005.

#facebox .ContentBoxBody { width: 98%; max-height:500px; height:auto !important; height:500px; overflow:auto; padding:5px; }

The hack is in green... there are two important things to note:
  • The max- or min- must be before the green text and the actual height/width must follow it.
  • You cannot use percentages in the max-, min- or in the height/width that follows it:

    THIS WILL NOT WORK: { max-height:50%; height:auto !important; height:50%; }

Characters: Mottie Motty Mortie Ooshiny Mot Fudgems
TopBottom

Mottie (SuperAdmin) 3/30/2009 12:07 PM EST : RE: Using and changing the new GuildPortal popup window
ACK!
Mottie
Posts: 3884

0
Like

0
Dislike

This is a solution to images that are wider than the facebox and hang over the edge.

Since I haven't found an easy way to resize the facebox popup width dynamically, that leave us with two solutions (for now):
  1. Add a horizontal scroll bar by adding this line to your CSS. I don't really like this solution since it adds a big scroll bar at the bottom, but everything is inside the facebox popup

    #facebox .ContentBoxBody { overflow:auto; }

  2. Resize the image with CSS to fit inside the facebox window. Set the width in red to the same width you set the facebox body (in both places)

    #facebox img { max-width:700px; width:auto !important; width:700px; }
* This is an update, which I've added to the "Inside the Facebox" section
Characters: Mottie Motty Mortie Ooshiny Mot Fudgems
TopBottom

Nykeawyn (Applicant) 4/4/2013 3:00 PM EST : RE: Using and changing the new GuildPortal popup window
Nykeawyn
Posts: 246

0
Like

0
Dislike

Hi Mottie,

I just added a new growl window.  The old one stopped working for some reason.  I can't see anything in the window because both the background and the script are white.  I have tried adding the CSS script but they don't seem to be taking.  Any suggestions?

As always you're awesome,

Nyk
TopBottom

Mottie (SuperAdmin) 4/5/2013 8:38 AM EST : RE: Using and changing the new GuildPortal popup window
ACK!
Mottie
Posts: 3884

0
Like

0
Dislike

Hi Nyk!

Well apparently the internals of facebox have changed, so now you just need to add an additional class name ".popup" in the styling. See the original post above for updates.

And thanks
Characters: Mottie Motty Mortie Ooshiny Mot Fudgems
TopBottom

 
 
Key 
New posts No new posts
New posts ( popular ) No new posts ( popular )
New posts ( sticky ) No new posts ( sticky )
New posts ( locked ) No new posts ( locked )
 
 
Who's Online 
There are   members online.
 
 
So-and-so has logged on!
%title%
%message%