Sign Up! Login: Password: New User? Forgot? Support
Top Mods!
Wowhead Search
by sonofsamedi
Digital Clock
by Wolfar15
Admin Forums
Welcome to the GuildPortal Help Community! These forums are for admin-to-admin help.
Available Forums
Forums : Pimp My Site! > Using and changing the new GuildPortal popup window
Mottie (MVP) 6/28/2008 9:04 AM EST : Using and changing the new GuildPortal popup window
GuildPortal MVP
Mottie
Posts: 3884
Zomgawsh Poster

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

Eph (MVP) 7/4/2008 2:23 PM EST : RE: Using and changing the new GuildPortal popup window
GuildPortal MVP
Eph
Posts: 596
Zomgawsh Poster

Just to add a little something to what Mottie has here, I changed the border of the pop-up window. I just used a solid sqaure image to change the color.

    Here's the CSS I used.

#facebox .b {
background:transparent url(http://i144.photobucket.com/albums/r176/8r9/ChaosAngels/Back2copy.png) repeat scroll 0% 0%;
}
#facebox .tl {
background:transparent url(http://i144.photobucket.com/albums/r176/8r9/ChaosAngels/Back2copy.png) repeat scroll 0% 0%;
}
#facebox .tr {
background:transparent url(http://i144.photobucket.com/albums/r176/8r9/ChaosAngels/Back2copy.png) repeat scroll 0% 0%;
}
#facebox .bl {
background:transparent url(http://i144.photobucket.com/albums/r176/8r9/ChaosAngels/Back2copy.png) repeat scroll 0% 0%;
}
#facebox .br {
background:transparent url(http://i144.photobucket.com/albums/r176/8r9/ChaosAngels/Back2copy.png) repeat scroll 0% 0%;
}


Unfortunately I could not get the border to come out looking like my box images.

You can check it out on my SG's site, click Chaos Angels in my sig.
TopBottom

Mottie (MVP) 8/6/2008 8:10 PM EST : RE: Using and changing the new GuildPortal popup window
GuildPortal MVP
Mottie
Posts: 3884
Zomgawsh Poster

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"
TopBottom

Mottie (MVP) 10/6/2008 5:01 AM EST : RE: Using and changing the new GuildPortal popup window
GuildPortal MVP
Mottie
Posts: 3884
Zomgawsh Poster

I updated the original post with a script that allows you to replace the "Close X" button...

Here is my new image (I put a dark background behind it so you can see it better)

TopBottom

Mottie (MVP) 1/23/2009 9:51 AM EST : RE: Using and changing the new GuildPortal popup window
GuildPortal MVP
Mottie
Posts: 3884
Zomgawsh Poster

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

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

TopBottom

BagheeraBOA (Guild Admin) 3/29/2009 7:46 AM EST : RE: Using and changing the new GuildPortal popup window
BagheeraBOA
Posts: 1097
Zomgawsh Poster

My Gallery page, all images, videos, etc. work beautifully. My Info box posts, show up perfectly. All my facebox popouts work perfect...

...except for my Small News Box on my Forums page. The picture overlaps the popout box. Like I said, on my Gallery page, the huge images stretch the popout box just fine. But only the news submissions give me a problem.

Any clue?

http://www.guildportal.com/Guild.aspx?GuildID=199580&TabID=1685171
TopBottom

Mottie (MVP) 3/29/2009 11:27 AM EST : RE: Using and changing the new GuildPortal popup window
GuildPortal MVP
Mottie
Posts: 3884
Zomgawsh Poster

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

BagheeraBOA (Guild Admin) 3/29/2009 4:00 PM EST : RE: Using and changing the new GuildPortal popup window
BagheeraBOA
Posts: 1097
Zomgawsh Poster

First, thanks for all the help, and the work you've done. Your test site became a playground of neat stuff to make my site a whole lot better!

See, my info boxes are fine, it's the small news boxes that are off.

Pasting:

              #facebox .body { width:1010px;}

just made all my boxes super wide, but made the news box look good. But that's just making the box fit that particular size of our killshot images in the news box. It made the info and image boxes all that size and that's worse.

And if I used

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


on every info box, including news submissions since that's the problem in question, then that would also effect the front page news section.

After a good nights sleep, I stumbled on your scroll-bar snippet, and changed the height a little bit:



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

Now that makes it look alot better, although I would prefer not having a horizontal scroll, at least its in the window and doesn't look like an error.

I tried messing around with width edits but it seems to only effect the text, not the box. Any thoughts?
        
TopBottom

Mottie (MVP) 3/30/2009 11:58 AM EST : RE: Using and changing the new GuildPortal popup window
GuildPortal MVP
Mottie
Posts: 3884
Zomgawsh Poster

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

Admins Online
There are   members online.
So-and-so has logged on!
%title%
%message%