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"

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

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