CrankBerry Blog » CSS http://www.crankberryblog.com Sharing ideas on web design, development and the internet economy Thu, 22 Apr 2010 21:46:50 +0000 http://wordpress.org/?v=2.9.2 en hourly 1 In page popup with faded background – in PHP http://www.crankberryblog.com/2009/in-page-popup-with-faded-background-in-php http://www.crankberryblog.com/2009/in-page-popup-with-faded-background-in-php#comments Tue, 20 Oct 2009 23:12:52 +0000 Jerry Low http://www.crankberryblog.com/?p=232 ]]> Sometimes you may be required to have popup windows on your website. They're obtrusive and hard to style with your site, in summary – nasty. What I've seen is other websites fade out their background and have an in page popup. I came up with a script that does the same thing in PHP.

Now the code involves multiple parts so bare with me here. Either way your end product will look like the image below.

Lets start with the CSS here. Just copy and paste this into your CSS file or HTML.

<style type="text/css">
        html {
                height: 100%;
        }
       
        .fade_container {
                width: 100%;
                height: 100%;
                min-height: 100%;
                position: absolute;
                top: 0;
                left: 0;
                z-index: 100000;
                overflow: hidden;
        }
       
        .fade {
                width: 100%;
                height: 100%;
                min-height: 100%;
                background: #000;
                position: absolute;
                top: 0;
                left: 0;
                z-index: 110000;
                overflow: hidden;
        }
       
        .popup {
                font-family: Arial, Helvetica, sans-serif;
                font-size: 10px;
                padding: 4px;
                position: absolute;
                left: 50%;
                top: 100px;
                z-index: 150000;       
        }
       
        .popup_close {
                font-family: Arial, Helvetica, sans-serif;
                font-size: 9px;
                padding: 2px;
                margin-bottom: 5px;
                background: #CCC;
                text-align: right;
        }
       
        .popup_close a:link, .popup_close a:visited, .popup_close a:hover, .popup_close a:active {
                color: #333;   
                text-decoration: none;
        }
</style>

There's really no need to edit anything unless you want to change the font and stuff, the colors will be modified later. The next part you have to add this code right after your <body> tag.

<?php

//In Page Popup Box with Faded Background by Jerry Low @crankberryblog.com
//Find other useful scripts at the Crankberry Blog

//SETTINGS
$fade_amount = 60;                              //In Percentage
$box_width = 400;
$box_background = 'FFFFFF';             //Hex Color
$box_border_width = 1;
$box_border_color = '999999';   //Hex Color
$close_box = 1;                 //Do You Want The Close Bar on Top 1 = Yes, 0 = No
$extension = "";                // Other Variables that maybe needed, page number etc.

//Begin Popup Box
$left_margin = 0 – ($box_width/2);
$page_url = basename($_SERVER['PHP_SELF']);
if ($extension!="") $page_url .= '?' . $extension;

if (isset($_GET['popup'])) {
        echo '<div class="popup" style="width:'.$box_width.'px; background: #'.$box_background.';  margin-left:'.$left_margin.'px;';
        if ($box_border_width>1) echo ' border: '.$box_border_width.'px solid #'.$box_border_color.';';
        echo '">';
       
        //Close Box
        if ($close_box===1) echo '<div class="popup_close"><a href="'.$page_url.'">Close (x)</a></div>';
       
        ?>
        <!– START YOUR POPUP CONTENT HERE –>
       
    Popup content goes in here!
       
        <!– END OF YOUR POPUP CONTENT HERE –>
        <?php
       
        echo '</div>
    <div class="fade" onclick="location.replace(\''.$page_url.'\');" style="opacity: 0.'.$fade_amount.';  -moz-opacity: 0.'.$fade_amount.';filter: alpha(opacity: '.$fade_amount.');"></div>
    <div class="fade_container">';

}

?>

Looking at the top part of what you just added, the setting are at the top. Just configure it to what ever you like.

The Content

The content of your popup box goes in between the HTML comment tag in the code above. Exactly where I wrote: Popup content goes in here!

<!– START YOUR POPUP CONTENT HERE –>
       
Popup content goes in here!
       
<!– END OF YOUR POPUP CONTENT HERE –>
 

Next you need the trigger to activate the popup. Something like this:

<a href="?popup=1<?php if ($extension!=") echo '&' . $extension; ?>">Activated Box</a>

To finish off the code you will need to add a </div> tag just before the </body> closing tag. Like so:

</div></body>

That's it and all you need to have your own in page with faded background popup window. Wasn't that just simple?

Advance Configuration

Now if your pages require other variables to be passed through the URL I noticed that the popup will intrude on that. So I have an extension variable where you can attach other variables to and they will be kept. The variable is in the setting part of the code. Example of attaching some variables.

$extension = "";                // Other Variables that maybe needed, page number etc.
$extension = 'p=3&sort=2&id=214423';
 
]]> http://www.crankberryblog.com/2009/in-page-popup-with-faded-background-in-php/feed 2 CSS rounded corners with borders http://www.crankberryblog.com/2009/css-rounded-corners-with-borders http://www.crankberryblog.com/2009/css-rounded-corners-with-borders#comments Thu, 08 Oct 2009 19:15:02 +0000 Jerry Low http://www.crankberryblog.com/?p=186 CSS rounded corners generator, now not only does it use no images, cross browser compliant but now with additional borders option. Add that all up and you have a cross browser, no image, bordered CSS rounded corners generator. Of course that name is too long so we'll just stick with the old one. CSS rounded corners with border]]> An upgrade has been made to my CSS rounded corners generator, now not only does it use no images, cross browser compliant but now with additional borders option. Add that all up and you have a cross browser, no image, bordered CSS rounded corners generator. Of course that name is too long so we'll just stick with the old one.

CSS rounded corners with border

Forgotten the link to the tool?

No worries: CSS Rounded Corners Generator

]]> http://www.crankberryblog.com/2009/css-rounded-corners-with-borders/feed 1 Inspirational minimalist web sites/web designs http://www.crankberryblog.com/2009/inspirational-minimalist-web-sitesweb-designs http://www.crankberryblog.com/2009/inspirational-minimalist-web-sitesweb-designs#comments Tue, 06 Oct 2009 08:19:55 +0000 Jerry Low http://www.crankberryblog.com/?p=171 ]]> Here are some inspirational sites for those time when you just need a starter kick to your artistic senses.


You've got some other great ones? Throw them this way and share it with the rest of the world!

]]> http://www.crankberryblog.com/2009/inspirational-minimalist-web-sitesweb-designs/feed 1 Generate rounded CSS corners without images http://www.crankberryblog.com/2009/generate-css-div-rounded-corners-without-images http://www.crankberryblog.com/2009/generate-css-div-rounded-corners-without-images#comments Tue, 29 Sep 2009 23:13:53 +0000 Jerry Low http://www.crankberryblog.com/?p=156 CSS Rounded Corners GeneratorI was looking at ways in which I could have built my websites differently today and came across the question. How can I guarantee my CSS rounded corners to be closer to 100% cross browser compatible. I came across a few sites with scripts and generators simplifying the tasks but most of them failed the browser test. I came up with a simple script that was simple and light. I'm not going to share the code. Now don't flame me yet. Instead I've made it easier for everybody. I've created the simple CSS rounded corners generator.]]> I was looking at ways in which I could have built my websites differently today and came across the question. How can I guarantee my CSS rounded corners to be closer to 100% cross browser compatible. I came across a few sites with scripts and generators simplifying the tasks but most of them failed the browser test. I came up with a simple script that was simple and light. I'm not going to share the code. Now don't flame me yet. Instead I've made it easier for everybody. I've created the simple CSS rounded corners generator.

The result is really just… a rounded div box. Here's an example I quickly generated from the tool.
CSS Screenshot

Have you opened the link yet? No? Open it up and I'll give a quick tour of it. The tool's very simple to use. All you have to do is configure four settings and it'll do the rest for you. The four settings are:

  1. Class Name
  2. Background Color
  3. Font Color
  4. Roundness

I'll just briefly touch on the class name and roundness. The remaining settings is kind of obvious. So the class name does not really need to be set UNLESS you have multiple rounded corner boxes that are different. If you're using the same boxes over and over again, that's fine but once you change style you'll have to create new classes so they don't over lap.

The current roundness settings are 1, 2, 4, 8px. These are the settings I believe looks best with most web design. Anymore will make your template look like a lot of circles.

So that's it, that's the tool I created for all of you. If you have any questions or feedback leave a line here and I'll attend to it. Cheers!

If you didn't find the link in the Article here it is again.
The Tool: CSS Rounded Corners Generator

]]> http://www.crankberryblog.com/2009/generate-css-div-rounded-corners-without-images/feed 1