I have worked very hard to provide you with this original template that you may use and modify as you wish. The only condition is to keep me credited both in the footer frame and top of the CSS stylesheet.
However, if you use a picture that is not yours for the header background and do not make a private use of this template, please, know that, unless specified, graphics are subjected to copyright and you must therefore obtain permission from the photographer or artist first.
To edit both CSS stylesheet and HTML pages, you can do so using the notepad program provided with Windows, of course, but it may turn out to be a rather tedious task since all lines of code will be the same color. Therefore I suggest you use a text editor that has colored syntax options (there are many available for free). I have tested quite a few and my preference goes to PSPad. Since recent versions are buggy I personally have come back to earlier version 452 build 2241. So if the latest version crashes on you PC as well, you can download this older version on the PSPad website as it works really fine and you won't miss any important feature anyway.
Also, avoid using WYSIWYG programs such as Dreamweaver, Frontpage, NVu or KompoZer as they may alter the code and corrupt it. You can also see what you're doing using a text editor. You just need reload your page in your browser anytime you make a change either to CSS or HTML files. You only need to know the basics of coding but it's not really hard, especially if all you need is to change colors or fonts.
All style alterations must be done in the "video.css" stylesheet located in the "styles" subfolder. You may change colors and sizes (only for advanced users). Should you need to modify some height or width, here's another handy tool called Cool Ruler which is, as its name says, a screen ruler.
To change colors you will also need to use a graphic editor to colorize the various backgrounds (bg) located in the "styles" subfolder, which are actually gradients. To edit or create extra pictures as well. The most commonly used are Photoshop and Paint Shop Pro (the one I use) but there are some free ones which can handle layers and transparencies like The Gimp or Photofiltre.
For designing purposes I have used transparent PNG's rather than GIF's because you don't need to edit them if you change background colors and also because they come out much nicer than GIF's. Since only FF and IE7 can handle this image format properly, I have incorporated a hack (found here: http://homepage.ntlworld.com/bobosola/pngtestfixed.htm) as a Javascript for IE5.5 and 6 (there is unfortunately no remedy for earlier versions but why using them anyway?)
The site will load by opening a file in the root folder called "index.html". It consists of four differents frames (header, sidebar, main, footer) contained within two frame sets (A 3 rows in black and B within A made of 2 columns in white) as show below. The height of both header and footer frames is fixed as well as the width of sidebar frame. Therefore the width of the both header and footer frames will adapt to your browser window, same as the width and height of the main frame.
All links featured on the page loaded in the header frame in orange (header.html in the "navigation" subfolder) will open in the main frame. All links featured on the pages loaded in the sidebar frame in green (search.html by default in the "navigation" subfolder – but if you select a category in the form, a new page featuring a list of movies you will have exported will load there) will open in the main frame as well. All internal links featured on the pages loaded in the main frame in purple (INDIV.html by default in the "pages" subfolder, but you need to change that – it will be explained later on) will open in the main frame while all external links will open in a new window or a new tab if you use Firefox or IE7. The page loaded in the footer frame in yellow (footer.html in the "navigation" subfolder) do not contain links but you can add some if you wish and they should open in a new window or new tab (target:_blank).
Now, unless you want to get a bigger header or footer, you still will need to edit the "index.html" file to change the name of your site (by default it is calles "My movies") between "title" tags and to specify the page that should load by default in the main frame instead of "INDIV.html" (ie. if your exported individual pages start with "films_xx" and let's say you want the first film to be the default page, then replace "INDIV.html" by "films_1.html"). Don't worry, I have included comments in the page so that you can find what to edit more easily.
Featured below are a few screencaps to show how my site looks like in Firefox 2.
Movie page loaded from the list by categories on the left. Note the animated ruler in the search box !
Same as previous but here you can see that only the part below the titles scrolls up or down (it doesn't work in IE6 so the entire page will actually scroll – IE doesn't recognize the "fixed" position). Also you can see how the form looks like when you click on it to select a category.
Here I've loaded the "Latest Additions" page from the related link in the header frame. This page can be generated with AMC just like a list file with a special list template called "NEW.html" where you'll have to select the most recently added movies you want to export here. A click on the cover thumbnail will load the related page. It doesn't use a table so there can be an odd number of movies, it won't create an empty cell like a table would. Also with a table you couldn't have two columns using an exportation script. Note, the filmstrip logo on the left next to the page heading is animated and the heading doesn't scroll.
Here I've loaded the "Filmographies" page from the related link in the header frame. This page cannot be generated with AMC as the catalogs do no contain such information so in the "pages" subfolder is a template called "actors.html" which you can fill up with your desired data. Pictures must be put in the "images" subfolder.
Here I've loaded an actor's filmography from a link in the previous page. Again a blank template called "filmography.html" is provided in the "pages" subfolder where all copies should go. It must be filled manually but using the cut-and-paste method is not too bad. As you can see, I've also linked the movies I have in my catalog to the related movie page that will load in this frame (target="main"). I'm afraid there is no automated way that I know of to create each link so you'll have to do the whole thing manually. Hope you don't collect too many movies ;)
I have used different colors and a different background picture for my header than the ones provided with this template just to keep a personal touch. The picture I've used on the captures is a collage I've made using various filters.
Should you wish to create your own, I have provided a PNG template named "bghead_template" in the "styles" subfolder as a guide – you will have to export the result in JPEG format as "bgheader.jpg" to replace existing picture in the "styles" subfolder. You should paste your chosen picture in the transparent zone.
I suggest your perform a Google Image search using keywords "panorama" or "panoramic". I also found astounding panoramic photographs on this site but you should ask permission first if your make a public use of your site: http://www.myfourthirds.com/
As for the logo, just enter the name of your site in the "header.html" page. If you would prefer a more sophisticated logo, you should create a graphic and replace the <h1> tags with an <img> tag including the name of your image. If you like the style of my logo, I've used this site to generate the neon style picture: http://www.glassgiant.com/neon/
Finally, I've called the last link in the header "Articles" ("Extra link" by default) so that you decide what you want to put there or just remove it if it's useless for you. Remember to give a proper filename as well to the link.
Just replace the "Your Name" in the copyright by... your name ! Please, do not remove the credits to Eyael for Template Design.
All pages generated with this template should be exported in the "pages" subfolder.
Fields used in left part (fixed in FF/IE7)
$$ITEM_PICTUREFILENAME (.jpg) in "images" subfolder
$$ITEM_CATEGORY
$$ITEM_MEDIA
Fields used in top part (fixed in FF/IE7)
$$ITEM_FORMATTEDTITLE
$$ITEM_ORIGINALTITLE
$$ITEM_SIZE used for Alternative Titles (aka)
$$ITEM_COUNTRY
$$ITEM_YEAR
Fields used in central part (scrolling)
$$ITEM_APPRECIATION (.png) in "styles" subfolder 1 to 5 stars, transparent if no rating
$$ITEM_DESCRIPTION
$$ITEM_DIRECTOR
$$ITEM_PRODUCER used for Story and Script
$$ITEM_ACTORS
$$ITEM_COMMENTS used for Additional Features
Fields used in right part (fixed in FF/IE7)
$$ITEM_VIDEOFORMAT(.png) in "styles" subfolder
$$ITEM_RESOLUTION used for Standard (ie PAL, NTSC, etc.)(.png) in "styles" subfolder
$$ITEM_FRAMERATE used for Image Ratio (ie 2:35, 1:85, etc.)(.png) in "styles" subfolder
$$ITEM_AUDIOFORMAT used for first audio track Language + Audio Format (.png) in "styles" subfolder
$$ITEM_LANGUAGES used for second audio track Language + Audio Format (.png) in "styles" subfolder
$$ITEM_SUBTITLES
$$ITEM_LENGTH
$$ITEM_SOURCE used for video source (ie Original or copy from: DVD, TV, etc.)
$$ITEM_DISKS
$$ITEM_TYPE
$$ITEM_NUMBER
$$ITEM_MEDIA
All star pictures are provided. Some video and audio track pictures are provided as well. You must make sure the filenames are absolutely similar (upper or lower case doesn't matter). If necessary either rename the pictures according to the contents of your catalog or rename the contents of your catalog according to picture filenames as you like best. I could not provide all possible combinations so I'm afraid you may have to create your own.
If you do not wish to have pictures, just text wherever you find an <img> tag replace it by a <p> opening tag with the field name only (no path, no file extension)and end with a closing </p> tag.
Example:
<img title="Audio track 1: $$ITEM_AUDIOFORMAT" alt="$$ITEM_AUDIOFORMAT" src="../styles/$$ITEM_AUDIOFORMAT.png">
would become
<p>$$ITEM_AUDIOFORMAT</p>
All pages generated with this template should be exported in the "navigation" subfolder.
Javascript Form
Each option refers to a category (one movie list to generate per category). I have included options linking to nowhere (optgroups would have been more appropriated but IE6 doesn't recognize them) to make a distinction between DVD/CD and VHS. Delete the second part (see comments inside template) if you have no VHS and also the line "DVD/CD" so you only have a list of category options. Those included are mine and serve as an example. Yours can be different of course so a bit of editing will be necessary there.
IMPORTANT: Do not forget to mirror any change between the <form>and </form> tags in the "search.html" file located in the "navigation" subfolder.
In order to get complete movie list without categories and medias, delete form (tags and options) and script reference between the head tags <script language=language="JavaScript" src="../scripts/cat.js" type="text/javascript></script>). Also delete part refering to Media Type and Category in the line just above the list.
Movie list
Media Type - Category – edit this line accordingly everytime you export
$$TOTALMOVIES
$$ITEM_FORMATTEDTITLE
To export by categories, you first need to group your movies by categories, then use the Search bar in AMC to isolate one media type and finally select the first category group, making sure the option "selected" is checked in the export dialog. Don't forget to edit the "Media Type - Category" line accordingly before clicking "Export" and do not save changes when asked. If you only use one type of media, delete Media Type - for good and keep editing "Category".
Note: To get a "lighter" list, I've used an unused field (URL) where I've entered each movie title the way I want it to appear in lists.
Example:
"The Lords of The Rings - The Fellowship of the Rings"
thus becomes
"The Lord of The Rings 1"
You can use a script to fill this chosen field automatically and then edit manually what needs to be changed. Then in the list template you also need to replace ITEM_FORMATTEDTITLE with $$ITEM_URL (if it's your chosen field).
If you have any questions, please, use the forum to ask them and I'll try to connect regularly to provide the answers or others will. And if you come up with ideas to improve this template, do no hesitate to share them, that's how we can all get better. Have fun !
© 2008 Eyael