Do you have much of a grasp of CSS style and what is what within the EasyBox interface? In the easybox.min.css file the overlay (the partially opaque dimming effect outside the easy box that dims the rest of the page) already is black:
Code:
#easyOverlay{position:fixed;z-index:9998;left:0;top:0;width:100%;height:100%;background:#000;cursor:pointer;}
What I think you mean is the easyCenter (what shows as the easy box is expanding, before its content arrives):
Code:
#easyCenter{position:fixed;left:50%;top:35%;z-index:9999;overflow:hidden;background:#00001c;border-radius:4px;border:1px solid #000}
That is a dark blue, you can change that to black or #000 (same thing). Use a text only editor like NotePad to do the editing.
As for the:
Code:
background:url(../images/body-tail.gif) center top repeat #0e0f0f;
on the body, that's in the style.css file for the entire site. However, on Eats Everything.html you can override that in many ways. It's body has an id="page1", so you could use that (in the style.css file, this assumes that no other page's body has an id of 'page1'):
Code:
/* Getting the new tags to behave */
article, aside, audio, canvas, command, datalist, details, embed, figcaption, figure, footer, header, hgroup, keygen, meter, nav, output, progress, section, source, video {display:block;}
mark, rp, rt, ruby, summary, time {display:inline;}
/* Global properties ======================================================== */
html {width:100%; height:100%;}
body {font-family:Arial, Helvetica, sans-serif;font-size:14px;line-height:25px;color:#7f7f7f;min-width:1000px;height:100%;background:url(../images/body-tail.gif) center top repeat #0e0f0f;}
body#page1{background: black;}
.ic {border:0;float . . .
Or just put the style right on the Eats Everything.html page:
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Eats Everything Main</title>
<meta charset="utf-8">
<link rel="stylesheet" href="css/reset.css" type="text/css" media="screen">
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen">
<link rel="stylesheet" href="css/grid.css" type="text/css" media="screen">
<style type="text/css">
body{background: black;}
a {
font-size: 100%;
}
</style>
<script src="js/jquery-1.7.1.min.js" type="text/javascript"></script>
<script src="js/cufon-yui.js" type="text/javascript"></script>
<script src="js/cufon-replace.js" type="text/javascript"></script>
<script src="js/Glegoo_400.font.js . . .
Or put it inline in the Eats Everything page's body tag:
Code:
. . .
<![endif]-->
<!--[if lt IE 9]>
<script type="text/javascript" src="js/html5.js"></script>
<link rel="stylesheet" href="css/ie.css" type="text/css" media="screen">
<![endif]-->
</head>
<body id="page1" style="background: #000;">
<!--==============================header=================================-->
<header>
<div class="main">
<div class="main_poster">
<div class="container_12">
<div class="wrap . . .
To name just three.
As to having EasyBox auto size the content. Hmm, in your style.css file the body is already min-width: 1000px, so you will be needing that, unless you change it for the page in the iframe. The body is also height: 100%, which is a little ambiguous, but often makes the page taller than it needs to be to show its content. Again, that could be changed on the page in the iframe (Eats Everything in this case). Usually a page's width/height/min-width/min-height are not set in style. Those sorts of things are usually reserved for elements within the page.
But I'm not seeing anything with EasyBox itself that allows for auto sizing of the easy box with iframe. It would do it it with images, to the size of the image and the available space on the page (I think that's the default), but iframes (their content pages actually) are harder to measure. If you were to remove the constraining dimensions from the body of the page in the iframe, and not set any dimensions for the easy box (no data-width or data-height attributes for the link), then I think EasyBox would size its easy box as it sees fit. You may or may not like the result.
There might be a command/option to force EasyBox to fit iframe content into an easy box that fits the page, but I doubt it. I'll have another look later.
If I missed anything from your questions on this, or you have further questions, let me know.
Oh, about paying, you can select any of the donation options in the "Show Additional Thanks:" portion of my signature below this post, that last two links go directly to me.
And, something occurs to me about resizing the iframe east box automatically. Some other 'Box' script might do that, I'm thinking FancyBox. Probably requires version 2 though, which is only free for personal and non-profit use.
Facebox, jquery-1.7.1.min.js is stopping it from working
Reply With Quote
Bookmarks