Using and changing the Facebox popup window

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

• Test it out the unmodified window here: Kitty!

• Check out my test site to see what it looks like modified
  
  

Videos

• Read this post for details

Edit: Added links to other posts on ways to use the pop up box
Edit (10/6/2008): Added a script to replace the "Close X" button
Edit (4/5/2013): Added ".popup" to the css to make it work again.

Edited by Mottie 4/5/2013 8:40 AM (Most Recent)

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

Inside the Facebox popup window

I had someone ask me for help on their info box popup window. It looked like this:



The image won't stretch the text box inside. So, simply add the CSS below 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 theContentBoxTitle 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"

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. This code works for info boxes, if you want to have scrollbars for a different type of facebox popup, replace the ".ContentBoxBody" with ".body".


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

Hi BagheeraBOA!

Hmmm, try adding this bit to your Custom CSS

#facebox .body { width:1010px;}

The other boxes stretch because the links point directly to the image. In the info box, the image is loaded after the content. If you don't like the above solution, maybe try adding this inside your info box:

<div style="width:1010px">
INFO BOX CONTENTS HERE
</div>

Hi BagheeraBOA!

Well since I haven't found an easy way to resize the facebox popup width dynamically, that leave us with two solutions:

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