====== Tips and Tricks ======
This section is for all those quick 'n dirty PBase tricks that are not really [[howto|HOWTOs]]


===== CSS Related ====


==== Auto Capitalization of Text ====
// :?: How do I display text in all caps automatically ?//

A: Depending on what you want, to display your text in 'small-caps' specify

<code css>
font-variant: small-caps;
</code> 

in the [[css_guide:basic_css|CSS]] class for which you want to auto-capitalize. Alternately, if you are looking for standard capital letters, use 

<code css>
text-transform:uppercase;
</code>

instead.


==== Stationary Background Image ====

// :?: How do I add an image to my gallery that stays in one place as the page scrolls like [[http://www.pbase.com/arjunrc|this]] (see image on bottom right) ? //

A: Add this to your [[css_guide:basic_css|CSS]]
<code css>
body
{
  background-image: url(http://xxx.jpg);
  background-position:bottom right;
  background-repeat:no-repeat;
  background-attachment:fixed;
}
</code>
Replace xxx.jpg with the location of the image.

==== Hide Image Captions in Root Page ====

// :?: How do I hide image captions in the root gallery ?//

A: Add this to your CSS
<code css>
.thumbnail b 
{ 
display:none; 
}
</code>
===== HTML/ JavsScript Related =====

==== Adding a logo ====

// :?: How do I add an image logo or a banner for my PBase galleries ? //

A: Add the following code to the gallery where you want the logo 

<code html>
<img src="http://location/of/image.jpg" alt="logo">
</code>

Replace the "location/of/image" part with the actual location of the logo image. Remember to add '.jpg' at the end !
(Make sure the checkbox that says “check if using html in the description” is checked ) 
==== Adding image thumbnails below primary images ====

// :?: How do I add a small thumbnail image below the usual image that PBase shows ? For example, I want to show the large version of an image and below it, also show the thumbnails of some other alternate images which the user can click to see a larger version.//

A: This can be easily achieved by adding a:

<code html>
<img src=”http://mysite.com/image/small.jpg” /> 
</code>

code in the description area of the image. If you want the user to be able to click on the additional thumbnails, add the following code 

<code html>
<a href=http://mysite.com/image/large.jpg><img src=http://mysite.com/image/small.jpg /></a> 
</code>
(Make sure the checkbox that says “check if using html in the description” is checked)

==== External Gallery Linking ====

// :?: How do I link my PBase galleries to some other external galleries (or maybe to another PBase gallery) ? For example, I want to display a regular thumbnail gallery in PBase, but on clicking it, I want the user to be directed to a gallery outside the current gallery (maybe owned by another user).//

(:!: UPDATE: Javascript related tips will no longer work. PBase has disabled arbitrary JS insertion)

A:  This can easily be setup using some simple javascript.
The process: 
1. Create a new gallery for your external site 
2. upload a representative picture in that gallery 
3. Edit the gallery, and in the description area, just enter the following code:

<code html>
<script type="text/javascript"> 
<!-- 
window.location = "http://www.google.com/" 
//--> 
</script> 
</code>

(Make sure the checkbox that says “check if using html in the description” is checked )

Replace www.google.com with the site you need to go to. That’s all !

==== Disable Right-Click ====

// :?: How do I prevent people from right-clicking on my images and copying them ?//

A: The futility of using //any// trick to disable right click is described [[faqs:images galleries#using javascript to disable right-click|here]]. 

B: This code will only apply to the page were it was added. If it is in the gallery page, it will not apply to the images. You need top add the code to every single image page on your galleries.

Knowing all the limitations, if you still want to present some sort of an alert to the user when he tries to right click, insert the following
code: (this code was posted several times in the PBase forums by several posters. We referred to [[http://forum.pbase.com/viewtopic.php?t=14573|this]] post by [[http://www.pbase.com/sheila|Sheila]]

(:!: UPDATE: Javascript related tips will no longer work. PBase has disabled arbitrary JS insertion)

<code javascript>
<script language="JavaScript"> <!--
function click(e) {
if (document.all) {
if (event.button == 2) {
alert("Copyright: Your Name");
return false;
}
}
if (document.layers) {
if (e.which == 3) {
alert("Right-click has been disabled");
return false;
}
}
}
if (document.layers) {
document.captureEvents(Event.MOUSEDOWN);
}
document.onmousedown=click;
// --> </script> 
</code>

===== Other Stuff =====

==== Local browser based Slideshow  ====
Note that this was written before PBase added inbuilt support for slideshows. With that feature in place, this part here is redundant and remains here just for historic reasons.

[[howto::adding_slideshow|"Adding Slideshow HOWTO"]] describes a method to add slideshow feature to your gallery so that all visitors can make use of it. However, for a visitor to make use of this, explicit steps needs to be performed by the gallery owner, as described in the HOWTO. There is another way in which //any// gallery (even if not explicitly setup) can be "slideshow enabled" by the visitor. This method is described below. Do note that this is only a local change at the visitor's browser and works only for those visitors who have installed the required scripts mentioned below. If, as a gallery owner, you want all visitors to have the slideshow option, you need to follow the [[howto::adding_slideshow|"Adding Slideshow HOWTO"]]


Step 1 - Install [[http://www.mozilla.com/firefox|Firefox]]*

Step 2 - Install [[http://greasemonkey.mozdev.org/|GreaseMonkey extension]] for Firefox.

Step 3 - Install [[http://userscripts.org/scripts/show/2319|Pbase image slide show]] script.

Step 4 - Go to any gallery and click on any of the images.

Step 5 - Look for the "slide show start" link next to the "previous" and "next" links. Click on it.

You are on your way! Thanks a lot to the 'sunyin' for writing this cool script!

* [[http://www.opera.com/|Opera 9]] also has support for Greasemonkey-styled userscripts.