Most of the settings in the back-end of jp Showcase are pretty self-explanatory but there are a couple of  parameters that might need clarifying:

"Custom module position" - Before you can show modules on the right side of the jp Showcase module, you first have to create a module position in your joomla back-end.

You can create a new module position by following these steps:

Open the joomla back-end and surf to: Site>>Template manager>>Module positions.

You should see a number of module positions already defined on your joomla site. In any of the "New" boxes, enter the new module position "fpshowjp" and click Save.

This new module position is already written in the custom module position field in the module back-end as a default value. You can specify another module position if you want.

Any module published to this position will now appear on the right side of the jp Showcase module.

"Modules in Tabs" - This option lets you place two modules on the right and choose between placing them in stacks or in tabs. By default, the modules will be shown in tabs.

Customization of CSS

Customizing this module is a little complex as there are a number of divs that need to be positioned correctly -- and it has to it work well in the buggy IE as well. If you have a fair knowledge of CSS though, things should be smooth and easy -- especially after you read this tutorial. If you tend to struggle with CSS, I would suggest that you read every line carefully before you set playing with the settings.

The module's basic CSS framework looks like this:

Every change in color or line signifies a div. "fp_main" is the outer div and contains two subdivs: "contentdiv_left" and "contentdiv_right". The subdiv positioned on the right has its own background image. Since there are no padding or margins for these subdivs, both appear inside fp_main div and appear to have one background image. Do not add any padding or margins to these subdivs in your CSS, like this:

.contentdiv_left{
width:305px;padding:0;margin:0;float:left;line-height:1.5em;
}
.contentdiv_right{
width:250px;padding:0;float:left;background:#eeeeee url(../images/fp_bg_rt.png) no-repeat;
}

Because the values are defined as absolute figures rather than percentages, if you want to change the width of your module, you will have to change a number of other values too, including the width of the two subdivs. You will also have to open the background images in an image editor and change their widths, then overwrite the old images.

An easier option is to have one picture as the background for the whole module and replace the image for this div class with your image in your CSS:

.contentslide{
background:#eeeeee url(../images/fp_bg_lt.png) no-repeat;
width: 100%;
height: 312px;
}

You can also define the total width and height of your module here. Both parameters are necessary to ensure that the two sides match. 

An easy way to see what happens when you change the width of divs is either to use FF Web Developers' Toolbar or add borders or background property to the div so that you can see it clearly after loading in  the browser. To see where in the browser the div will be displayed, you can add any of these to the div's CSS:

border:2px solid #ff0000; /* for border*/

background-color:#ff0000; /*for background color*/

Changes to the width of the module should not affect the left side, but once you have changed the subdiv width and background image, you will need to make two more changes on the right: one change in the same CSS file and the other in the fpshowcasejp_tabs.css file.

The change in the module CSS file would alter the width of the module content div on the right side:

.fp_modulecontent{width:220px;border-bottom:1px solid #f7f7f7;overflow:hidden;}

Without this change, the module won't work in IE.  As you can see, you must keep the difference between the width of the "contentdiv_right" and the "fp_modulecontent" higher than 30px.

The second change is in the height of the tab box in the fpshowcasejp_tabs.css file. This inserts vertical scroll bars if the div is too high:

.tabberlive .tabbertab { padding:5px; border:1px solid #d5d8da; border-top:0;height:270px;

If you have any problems, feel free to write to me in the forum. It's easier to write code there than in the comment system.