CSSJockey.com » Tips & Tricks

An easy way to create light-box with jQuery & CSS

CSSJockey — Fri, 23 Oct 2009 18:30:52 +0000

Simple light-box effect with jQuery and CSS

As you already know that I’ve been working on improving the performance of my website and I needed a simple solution to create light-box effect for Live-Chat on this website. I had many options to choose from available jQuery plug-ins however, the idea was to optimize the code with minimal use of heavy third-party scripts and CSS. Moreover, Only thing I needed was a light-box effect without any other functionality.

So I created the light-box effect with a few lines of code using CSS and jQuery.

View Live Demo

Let’s start coding

xHTML Code

Place this code within tags where ever you like.

Show Panel


Lightbox Panel
You can add any valid content here.

Close this window

First line of the above code is a link with id “show-panel” which will display the “light-box” and the “lightbox-panel” DIVs, similarly on line 7 we have a link with ID “close-panel” to hide these DIVs. This will be handled by jQuery of course.

#lightbox-panel will hold the content to be dispalyed and #lightbox will add a transparent background behind our content panel. Let’s write some CSS code to stylize these two DIVs before we add the functionality to our links with jQuery.

CSS Code

You can add this code within the document’s tag or in any linked style sheet.

* /Lightbox background */
#lightbox {
 display:none;
 background:#000000;
 opacity:0.9;
 filter:alpha(opacity=90);
 position:absolute;
 top:0px;
 left:0px;
 min-width:100%;
 min-height:100%;
 z-index:1000;
}
/* Lightbox panel with some content */
#lightbox-panel {
 display:none;
 position:fixed;
 top:100px;
 left:50%;
 margin-left:-200px;
 width:400px;
 background:#FFFFFF;
 padding:10px 15px 10px 15px;
 border:2px solid #CCCCCC;
 z-index:1001;
}

Note: The z-index value for #lightbox-panel should be greater than z-index value of #lightbox to display it above the transparent background and both should have the property display as none so they should not show up by default or if the users have Javascript disabled in their browsers.

Let’s put some life to our code with jQuery.

jQuery Code

You can add this code within the document’s tag and we are done.

Pretty simple, huh!!

Could it get easier than this?

Once you click the link with ID “show-panel” it will display both the DIVs with some nice fade effect and if you click the link with ID “close-panel” it will hide these DIVs.

I hope you enjoyed this little trick to create simple light-box effect with CSS and jQuery and You are most welcome to share your inputs and code in the comments below.

How to read minified CSS with ease?

CSSJockey — Mon, 12 Oct 2009 14:07:54 +0000

Today we have a quick tip for those who feel depressed and cry when they see the holy grail of CSS in one single line in their website / theme stylesheets.

Recently I started hearing from a lot of people complaining about their theme developers using minified CSS in their themes for maximizing performance without any consideration for their ease of use / customization. People keep asking me if there are tools that convert minified CSS back to normal human-readable form and recently someone even asked me to do a job – normalize some minified stylesheets (of course I didn’t do it and rob him off!)

Whether or not developers should minify CSS when giving out themes / websites has been a subject of debate for a long time but why developers choose to minify some parts of their stylesheets has often been overlooked. Performance issues for larger projects, minifying the reset styles (you don’t have to change them anyway!) and non-developer license are just some of the reasons!

Anyway, coming back to the subject of this post – How can you read minified CSS with ease?
(No, we are not going to install any 3rd party software!)

Simply validate the CSS (only the minified part if you have other files attached as well) in question using the W3C’s CSS Validation service!

The output of the validation check is:

whether or not, your CSS validates to standards set by W3C.
Normal, Properly Formatted and Easily Readable version of your minified / compressed CSS

You need to keep the formatted and decompressed CSS? Just copy it from the validation output and replace your version. Voila!

Deep Integrating WordPress 2.7.1 and bbPress 0.9.0.4

Abhinav Sood — Sat, 11 Apr 2009 19:21:25 +0000

As WordPress and bbPress both come from the same camp, successfully integrating both of them to share logins as well as template functions has been a buzzing issue for developers. In fact, because both WordPress and bbPress have an almost similar file management structure, it makes all the more sense to integrate bbPress as forums into WordPress rather than using phpBB or SMF or any other boards.

Various resources over the web are trying to explain the process of (deep) integrating WordPress and bbPress without any issues, but mostly they are broken or outdated. In this guide, we’ll explain the process of integrating the latest stable versions of both WordPress (2.7.1) and bbPress (0.9.0.4) step by step in a comprehensive way.

Step 1: Downloading the Latest Stable Versions

Download the latest stable version of WordPress from WordPress.org and the latest version of bbPress from bbPress.org

Step 2: Extracting the files

Extract the WordPress files into the root directory of your web server (or where you want to install it). Create a new database on your host using your phpMyAdmin or host’s cPanel.

Now, create a folder named forums inside the WordPress directory so that it forms a sub-directory of your WordPress website (for example www.YourDomain.com/forums). Now your FTP directory listing should look somewhat like this:

FTP Structure after creating the Forums Folder

Extract the bbPress files into this forums directory.

Step 3: Installing WordPress and bbPress

Now install WordPress by visiting your website URL in your favorite browser (www.YourDomain.com) and Create a Configuration File using the name of the freshly created database and database username and password. You’ll be done through, quite easily.

To install bbPress as your forums software go to www.YourDomain.com/forums. When the installation page appears click on the Let’s Get Started link to begin with the configuration. Enter the same database name, user name and password as you used for your WordPress install. Don’t check the advanced settings. Just save your database configuration settings.

Step 4: Integrating WordPress into bbPress

The next option is basically where the integration process actually starts. Place a check against the add integration settings. Then place a check against the add cookie integration settings. This enables you to use shared logins.

This is also where the complication comes in, in the integration of WordPress 2.7.1 and bbPress 0.9.0.4. Cookie generation and management mechanism in WordPress 2.7.1 is very different from WordPress 2.5. However bbPress still uses the cookies compatible with previous versions of WordPress. We’ll use a plugin as a work around to downgrade the cookies generated by WordPress to sync with bbPress. Follow the steps below.

Step 5: Filling in the WordPress integration details

In WordPress address, enter http://www.YourDomain.com

In Blog address, enter http://www.YourDomain.com

Now go to https://api.wordpress.org/secret-key/1.1/ to generate WordPress Cookie secret keys. They’ll look somewhat like this:

define('AUTH_KEY', '3{=J|rF]CLK3XNzzKc+*Bn@2yeMh#y{c$PqfAgmW*WgPevIOEAi6Gl{b1');
define('SECURE_AUTH_KEY', '-P`&G!_+5|1uu`>8y9!$f;.T<6-Oa');
define('LOGGED_IN_KEY', '3xIsD$9TmGg;FAu.[V,nqb%lE/`N~)h4rE>cO`]@h vkN?`>fA0w;|FFb|_3NW40');
define('NONCE_KEY', '{qBV?O[wCsW5 Y+1^ ].%Y-Mp[0*m`$A@M3:;OHm=>&R*$I4Zlv7^n*+G`ib.#?a');

In your root directory, open the wp-config.php file. Look for 4 lines starting similarly… Replace them with the generated keys. Perform this step carefully.

Now copy the value of 'AUTH_KEY' that is

3{=J|rF]CLK3XNzzKc+*Bn@2yeMh#y{c$PqfAgmW*WgPevIOEAi6Gl{b1

(whatever is generated for you) and go back to your browser. Paste it into the WordPress Cookie Secret Key field.

Now go to http://www.YourDomain.com/wp-admin/options.php and look for a field named secret. Copy the value of this field and paste it into the next field of bbPress configuration – WordPress Database Secret. Finally place a check mark against the Add user database integration settings. You don’t need to use the advanced settings. Just Save WordPress Integration Settings and proceed to the next step.

Step 6: Finishing bbPress install with Site Settings

Enter the Site Name and Site Address (mostly, it’ll be automatically guessed for you). Select admin in the username drop-down to map it as the Key Master. Type the name for your first forum and save site settings to finish setting up the forums.

Registration – Setting up User Roles

When a user registers on your bbPress forum, your WordPress blog doesn’t know about it (and vice versa). The user will be created, but WordPress won’t know what user role to apply.

In the “WordPress Integration” section of the “Settings” area in your bbPress admin you will find a “User Role Map” where you can set which roles will be applied to users who register on your forums. Users who register on your WordPress blog will have the appropriate role applied to their account when they first login to bbPress.

Setting Up User Roles When Integrating WordPress With bbPress

If you don’t setup a role map, then this will not work. When you do setup a role map (or change it) any users who are missing either role will be updated, but existing roles will not be affected.

Step 7: Modifying the wp-config.php file

Add these lines of code

define('COOKIE_DOMAIN', '');
define('COOKIEPATH', '/');

Just before this line:

// ** MySQL settings - You can get this info from your web host ** //

This would generally be near the top of the wp-config.php file at around lines 16 to 18.

Step 8: Modifying the bb-config.php file

Create a new blank file path.php and insert the following lines of code into it:

Upload it into your root directory and access it from your browser at www.YourDomain.com/path.php. It would show you the absolute path to your website and would be something like this: /home/xyz/public_html/sitename/

Copy this path as we will paste this in the bb-config.php file.

In the forums directory, edit the bb-config.php file and insert these lines of code in line 2 immediately after the opening PHP tag (

if ( !defined('ABSPATH') & !defined('XMLRPC_REQUEST')) {
define('WP_USE_THEMES', false);
include_once( 'PASTE ABSOLUTE PATH HERE/wp-blog-header.php' );
header("HTTP/1.1 200 OK");
header("Status: 200 All rosy");
}

Then, near the bottom of the file – add these 2 lines of code just before the /* Stop editing */ line

$bb->custom_user_table = 'wp_users';
$bb->custom_user_meta_table = 'wp_usermeta';

Save your bb-config.php file and exit.

Step 9: Installing a magical plugin

Ann Oyama developed a WordPress plugin that enables WordPress to generate cookies that work with bbPress 0.9 so that a single shared sign in can be accomplished between the two! Download this plugin at WordPress.org

Basically the cookies generated by the latest version of WordPress are downgraded to the cookies generated by previous versions of WordPress. Upload the plugin to wp-content\plugins\ and activate it from your WordPress admin dashboard.

After you activate the plugin, you’ll be asked to log in again into your WordPress admin dashboard. Instead of logging in once again – type

www.YourDomain.com/wp-login.php?action=logout

When you’re logged out, clear your browser’s cache and cookies. Restart your browser.

Step 10: There’s no step 10. Bingo!

You’ve successfully deep integrated your WordPress 2.7.1 with bbPress 0.9.0.4. You can now use WordPress template tags in your bbPress theme and style it similar to your WordPress theme… and you’ve a single sign-on shared login set up and running! I hope you find this guide helpful. If you face any problems, feel free to drop us a comment. We’ll try our level best to help you out.