 Chameleon skin |
|||||
| home » Chameleon skin » Tutorials » Custom header and footer Tutorials Adding Custom Header and Footer to your Galleries Chameleon will include a header and footer if they are in the GUI (Settings > Header/Footer) or as plain text files named header.inc and footer.inc, respectively, located in an Image Source Folder or the Skin Folder (JAlbum/skins/Chameleon). The header is placed below the control bar and the footer at the bottom of the page. They give further control over formatting, are independent of the rest of the page contents, and can be used in addition to the Custom Link entries on the Chameleon > Album information tab. Where to Put Header & Footer Information?
The header/footer information is used in the following order: data found in the GUI is used unless .inc files exist in the Skin Folder unless .inc files exist in the Image Source Folder Note that the above also works for virtual folders, of which there are 2 basic forms:
If a header or footer is not required in some folders, put empty .inc files in those folders. Any combination of header and footer files to suit the album requirements can be used, and each .inc file can contain individual, folder-specific text. HTML (CSS) formatting elements can be used, allowing a little bit of creativity to be added to an album. If you use special accented characters, make sure to save the file using UTF-8 encoding. Code detailed below can be used in the .inc files to further differentiate between Index and Slide pages, whereas it not required in the GUI. A simple text example You can add a simple line of text alone, but some formatting can help a lot on visual impact. In the following example we align the text centered, make the font somewhat bigger and change its color. Also we will add a link utilising the <a href="">...</a> HTML formatting tag. Note that each HTML tag has its own closing tag starting with '/'. One of the few exceptions is the <br/> tag which stands for line break and is self-terminating. Remember, no ordinary line breaks work in HTML; use <br/> for a simple linebreak, <p>...</p> for a paragraph. The target="_blank" tells the browser to open the link in a new window. <!-- Save as header.inc --> Adding images to the header/footer  In HTML you can add images with the <img> tag. You have to specify its path and optionally its dimensions, border, etc. If the image sits already on the web you can simply add its link as <img src="http://jalbum.net/images/icons/heart.gif" />. Note, that <img> tag also requires the self-terminating / before the > sign. But if you want to supply the image with the gallery you need to place it in Chameleon’s /res folder to make sure to be included in all generated albums. In this case you can refer to these images as $resPath/myimage.jpg. The $resPath variable will always point to the gallery's /res folder. So first prepare your image in the desired size, and save it to Program Files / JAlbum / skins / Chameleon / res folder as .gif, .jpg, or .png, then use the code below to include it on all pages. <!-- Save as footer.inc --> Using Chameleon’s own table style  If you would like to place your content in a table of Chameleon’s table style use the <table> HTML element. Using tables is a bit more complicated. You must specify the whole table construct with table row <tr> and table cell <td> tags too. I used the ${tableWidth} skin variable to match its width with the others and also applied the infotable class which is used for the tables. The cell content is aligned to center and added the "smalltxt" CSS style which is used in the tables. You can use the "xsmalltxt" class also which uses a little smaller text. Or instead of using class="" you can define the content's style directly with the style="" format. <br/> Different content for index and slide pages In order to have different content for index and slide pages you can use a testing for $currentFile variable which exists only on the slide pages. The syntax is <ja:if exists="currentFile">This is the slide page</ja:if> To detect the top-level folder use $level variable which is 0 on the top level. <ja:if test=<%=level == 0%>>Welcome</ja:if> An example of a general header.inc is: <!-- Header content starts here --> and a footer.inc: <!-- Footer content starts here -->
Note that the <ja:if> and <ja:else> elements need to be closed, because other errors might occur. If you do not need the slidepage (or indexpage) content just remove the corresponding line.
|
|
||||
 |
 |
