PJ Quick Classes
PJ Quick Classes are simply CSS classes which this template will use to do stuff. Look in the "Styles" dropdown of your article editor and you'll see them there. Slapping these on your images, links or other elements will greatly enhance the look and feel of your content, as we'll illustrate below:
Rounded Corners
You can apply the class " corner-all " to an image to produce this effect. Alternatively, you can also designate which corners to round by applying one of the following classes: corner-tr corner-tl corner-br corner-bl
So, the image tag looks like this:
<img class="corner-all" src="/pj_zinc_25/path-to-image.jpg" border="0" alt="" width="360" style="margin-right: 10px; float: left;" />
Shadows
You can apply the class " shadow-medium " to an image to produce this effect. You can also set light or dark shadows by applying one of the following classes: shadow-light shadow-dark
So, the image tag looks like this:
<img class="shadow-medium" src="/pj_zinc_25/path-to-image.jpg" border="0" alt="" width="360" style="margin-right: 10px; float: left;" />
Mix it Up!
Add multiple classes to your images and get the look you want!
So, this image tag looks like this:
<img class="corner-tr corner-bl shadow-dark" src="/pj_zinc_25/path-to-image.jpg" border="0" alt="" width="360" style="margin-right: 10px; float: left;" />
Zoombox it - Click that image!
Add the class " pjzoom " to an image, and it will become linked to itself to open in a Zoombox. So, once you've got the image in your article, resize it, and add the pjzoom class to make it take on this behavior.
So, this image tag looks like this:
<img class="pjzoom corner-all shadow-light" src="/pj_zinc_25/path-to-image.jpg" border="0" alt="" width="360" style="margin-right: 10px; float: left;" />
Add a Tooltip
Add the class " pjtips " to an image or link, and the title tag will become the tooltip text. You split the tip in two parts by adding two colons.
So, this image tag looks like this:
<img class="pjtips" src="/pj_zinc_25/path-to-image.jpg" border="0" alt="" title="Tooltip Title::Tooltip text goes in here." width="360" style="margin-right: 10px; float: left;" />
