"ChiaScuDVDcovers.html" template question

adambot · Post by **adambot** » Tue Jul 31, 2007 3:27 pm

Greetings,

I am trying to figure out how to put a next page/previous page button on this template. Has anyone ever done something like this before?

thanks!
Adam(bot)

Post by **Conor** » Tue Jul 31, 2007 4:27 pm

The HTML for the buttons is:

Code: Select all

<!--IF_PREVIOUS_PAGE<a href="[Global:PreviousPageURL]">previous</a>END_PREVIOUS_PAGE-->

Code: Select all

<!--IF_NEXT_PAGE<div align="right"><a href="[Global:NextPageURL]">next</a></div>END_NEXT_PAGE-->

If you would like to have an image instead of writing you can replace the next and previous text with an img tag.

In the case of the ChiaScuDVDCovers template you also have to remove the meta tag that tells DVDpedia to export all the DVDs into a single page. The line you want to remove or change to something like 50 DVDs per page is:

Code: Select all

<meta name="PageSplit" content="50000" />

possible alternatives to that line are:

Code: Select all

<meta name="PageSplit" content="50" />

Code: Select all

<meta name="PageSplit" content="SortName" />

Code: Select all

<meta name="PageSplit" content="SortLetter" />

adambot · Post by **adambot** » Wed Aug 01, 2007 11:41 pm

So i have most things working except now I am trying one last thing - rollover images with css and unordered lists

here is my example code:

Code: Select all

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<title> image replacement test </title>

<style type="text/css">

#menu {display:block;}
#menu ul {margin:0; padding:0; list-style-type:none;}
#menu li.list1 {float:right}
#menu li.list2 {float:left;}
#menu li.list1 {background:transparent url(Images/next.gif);}
#menu li.list2 {background:transparent url(Images/back.gif);}
#menu a {display:block; width:87px; height:0; padding-top:28px; color:#000; overflow:hidden;}
#menu a#item1 {background:transparent url(Images/next_on.gif) -130px -90px no-repeat;}
#menu a#item2 {background:transparent url(Images/back_on.gif) -130px -90px no-repeat;}
#menu a#item1:hover {background-position:0 0; z-index:50;}
#menu a#item2:hover {background-position:0 0; z-index:50;}

</style>
</head>

<body>

<div id="menu">
<ul>
<table width="100%" border=1>
<tr>
<td>&nbsp</td>
<td>&nbsp</td>
</tr>
<tr>
<td width="50%">
<li class="list2"><a id="item2" href="[Global:PreviousPageURL]">back</a></li>
</td>
<td width="45%" align="right">
<li class="list1"><a id="item1" href="[Global:NextPageURL]">next</a></li>
</td>
<td width="5%">&nbsp</td>
</tr>
</table>

</ul>
</div>

</body>
</html>

however, once i try to integrate my test code with the template, the images don't show up.

Here is my template code:

Code: Select all

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<meta name="details" content="CinephileDetails.html">
<meta name="PageSplit" content="24" />
<meta name="image-export" content="yes" />
<title>[Global:CollectionName]
</title>
<!-- DVDpedia template created by ChiaroScuro -->
<style type="text/css" media="screen">

body {
	background-color: #000000;
	margin: 20px 20px 20px 20px;
	padding:0px;
	font-family: Lucida Grande, Arial, Helvetica, sans-serif;
	font-weight: bold;
	font-size: 11px;
}

#header{
	margin: 2em 5%;
	}
	
.container{
	margin: 2em 5%;
	background-color: #000000;
}

.thumb{
	width: 135px;
	height: 180px;
	position: relative;
	float: left;
}

.white img{
	border: 2px;
	border-color: #333333;
	border-style: solid;
}

 a.white:hover img{
	border: 2px;
	border-color: #FFFFFF;
	border-style: solid;
}

.dvd {
	padding-top: 15px;
	margin: 0 2em 15px 160px;
}

.text {
	color: #333333;
}
.head {
	color: #003366;
	font-weight: bold;
	line-height: 150%;
}

.total {
	font-size: 12px;
	color: #FFFFFF;
}
.collection {
	font-size: 24px;
	color: #FFFFFF;
}

#menu {display:block;}
#menu ul {margin:0; padding:0; list-style-type:none;}
#menu li.list1 {float:right}
#menu li.list2 {float:left;}
#menu li.list1 {background:transparent url(Images/next.gif);}
#menu li.list2 {background:transparent url(Images/back.gif);}
#menu a {display:block; width:87px; height:0; padding-top:28px; color:#000; overflow:hidden;}
#menu a#item1 {background:transparent url(Images/next_on.gif) -130px -90px no-repeat;}
#menu a#item2 {background:transparent url(Images/back_on.gif) -130px -90px no-repeat;}
#menu a#item1:hover {background-position:0 0; z-index:50;}
#menu a#item2:hover {background-position:0 0; z-index:50;}

</style>
<script language="JavaScript" type="text/javascript">
<!--// Popup window
function NewWindow(mypage, myname, w, h, scroll) {
var winl = (screen.width - w) / 2;
var wint = (screen.height - h) / 2;
winprops = 'height='+h+',width='+w+',top='+wint+',left='+winl+',scrollbars='+scroll+',resizable'
win = window.open(mypage, myname, winprops)
if (parseInt(navigator.appVersion) >= 4) { win.window.focus(); }
}
//--></script>
</head>
<body>
<div id="header">
			<div class="collection" align="center">
				<font color="#d10013" face="Lucida Grande,Arial,Helvetica,Geneva,Swiss">[Global:CollectionName]</font></div>
		</div>
		<div id="header" align="center">
			<div class="collection" align="center">
				
			</div>
		</div>
		<div id="header">
		<table width="100%">
			<tr>
				<td width="50%" align="left" valign="bottom">
					<div class="collection">
					<font size="4" color="#d10013" face="Lucida Grande,Arial,Helvetica,Geneva,Swiss">
							Click on a cover for full film and DVD details!</font>
					</div>
				</td>
				<td width="45%" align="right" valign="bottom">
					<div class="total">
					<font face="Lucida Grande,Arial,Helvetica,Geneva,Swiss">Total number of titles: [Global:TotalEntries]</font>
					</div>
				</td>
				<td width="5%">&nbsp</td>
			</tr>
			<tr>
					<td width="50%">
						<!--IF_PREVIOUS_PAGE<li class="list2"><a id="item2" href="[Global:PreviousPageURL]">back</a></li>END_PREVIOUS_PAGE-->
					</td>
					<td width="45%">
						<!--IF_NEXT_PAGE<li class="list1"><a id="item1" href="[Global:NextPageURL]">next</a></li>END_NEXT_PAGE-->
					</td>
					<td width="5%">&nbsp</td>
			</tr>
		</table>
			
		</div>
		<!-- /header div -->
<div class="container">
  <!--BeginRepeat-->
  <div class="thumb"><a class="white" href="details/page[Key:IncrementalNumber].html" onclick="NewWindow(this.href,'name','840','640','yes');return false;"><img src="[Key:CoverImageURL]" class="img" height="165" width="120"></a></div>

<!--EndRepeat--></div>
<!-- /container div -->
</p>
</body>
</html>

the images that i am using are available here:
http://adambot.googlepages.com/Images.zip

In anyone could offer any help i would appreciate it greatly!

Post by **Conor** » Thu Aug 02, 2007 3:30 am

There are two things you need to do. One is place the next and back code within a div that has the class of menu otherwise the CSS for the rollover does not get applied to the li tags.

The second is you need to create a folder named [NameOfTemplate]Images in the Images folder inside the templates folder with the images so DVDpedia can copy them to the Images folder during export.

I made the changes, [url=dvdpedia://www.bruji.com/download?temp/adam.zip]click here[/url] to install the template with the changes made. You will find a template called ChiaScuAdam.html that has the menu class div added to your template and an ChiaScuAdamImages folder for the rollover images as well as CinephileAdamDetails.html so that you can also makes changes to the details template.

adambot · Post by **adambot** » Thu Aug 02, 2007 9:05 am

Thanks!!! it turns out the only thing i was missing was the

Code: Select all

 <div id="menu"> ... </div>

wrapper

other than that, i will now start customizing the details page, and in the end i will most likely call this project ChiaScu2DVDCovers.

How would i go about getting this posted in the extra's section so everyone can use it (if they want)?

Post by **Conor** » Thu Aug 02, 2007 10:00 am

Just send us the templates and the images folder and we can post it on the extras page. As well as the name you would like to be credited as and any web links to any relevant info, such as your own site or a blog post.