html conditional template color

chander · Post by **chander** » Thu Nov 15, 2007 4:49 am

Hi,

I'm using a modified html template (dfmetalbox) for my collection of comics but i would like to know if there is a way to have directly a different background color for an album if this album is signed (condition signed=yes). I'm all but a pro with html temlate so any help would be greatly appreciated...

Here is my modified template :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta name="PageSplit" content="SortLetter" />
<meta name="image-width" content="300" />
<meta name="image-height" content="420" />
<meta name="keywords" content="Bookpedia, book collection, Books, Mac, Catalog" />
<meta name="description" content="My book collection created using Bookpedia" />
<meta name="author" content="Dan Friml, http://www.friml.com" />
<meta name="robots" content="index, follow" />
<title>[global:collectionName]</title>
<script type="text/javascript" src="Images/js.js"></script>
<link rel="stylesheet" href="Images/style.css" type="text/css" media="screen" charset="utf-8" />
</head>
<body id="pageTop">
<div id="whole">

<h1>[global:collectionName]</h1>

<div id="topInfo">
<div id="topInfoL">
<strong>Updated:</strong> [global:dateUpdated]<br />
<strong>Total number of titles:</strong> [global:totalEntries]
</div>
<div id="topInfoR">
<strong>Page number:</strong> [global:pageNumber]<br />
<strong>Pages:</strong> [global:totalNumberOfPages]
</div>
<div class="clearBoth"> </div>
</div>

<h2>[global:sortedBy] : [global:sortedEntry]</h2>

<div class="nav">


 <div class="clearBoth"> </div>
</div>



<div class="album">

<img class="albumBorder" src="Images/album-top.gif" />
<div class="albumBG">
<div class="albumInner">

<div id="hideSmallCover[key:incrementalNumber]" class="albumCover" style="display: yes;">
<a href="#" onclick="view('showCover[key:incrementalNumber]'); view('hideSmallCover[key:incrementalNumber]'); view('moveInfo[key:incrementalNumber]'); view('albumCenter[key:incrementalNumber]'); view('showCoverActive[key:incrementalNumber]'); return false;"><img src="[key:coverImageURL]" alt="Cover Zoom [+]" title="Cover Zoom [+]" /></a>
</div>

<div id="showCover[key:incrementalNumber]" class="coverWindow" style="display: none;">
<a href="#" onclick="view('showCover[key:incrementalNumber]'); view('hideSmallCover[key:incrementalNumber]'); view('moveInfo[key:incrementalNumber]'); view('albumCenter[key:incrementalNumber]'); view('showCoverActive[key:incrementalNumber]'); return false;"><img src="[key:coverImageURL]" alt="Cover Zoom [-]" title="Cover Zoom [-]" /></a>
<a class="closeWindow" href="#" onclick="view('showCover[key:incrementalNumber]'); view('hideSmallCover[key:incrementalNumber]'); view('moveInfo[key:incrementalNumber]'); view('albumCenter[key:incrementalNumber]'); view('showCoverActive[key:incrementalNumber]'); view('closeWindow[key:incrementalNumber]'); return false;"><img src="Images/m.gif" alt="" onmouseover="view('closeWindow[key:incrementalNumber]'); return false;" /><img id="closeWindow[key:incrementalNumber]" src="Images/closeWindow.gif" alt="Cover Zoom [-]" title="Cover Zoom [-]" style="display: none;" onmouseout="view('closeWindow[key:incrementalNumber]'); return false;" /></a>
</div>

<div class="albumRight">
<div class="innerLeft">

<div id="moveInfo[key:incrementalNumber]" class="movedInfo" style="display: none;">
<p><strong class="artist">[key:author] </strong></p>
<p>[key:title] </p>

<img class="stars" src="[key:starRatingURL]" />
<p class="incrNum">(#[key:incrementalNumber]) </p>
</div>
<p><strong>[translate:releaseDate] :</strong> [key:releaseDate]</p>
<p><strong>[translate:publisher] :</strong> [key:publisher]</p>

<p><strong>[translate:genre] :</strong> [key:genre]</p>
<p><strong>[translate:format] :</strong> [key:format]</p>

<p><strong>[translate:purchasedOn] :</strong> [key:purchasedOn]</p>
</div>

<div class="innerRight">
<a class="m01" href="#pageTop"><img src="Images/m01.gif" alt="Back to top" title="Back to top" onmouseover="view('topActive[key:incrementalNumber]'); return false;" /><img id="topActive[key:incrementalNumber]" src="Images/m01x.gif" style="display: none;" alt="Back to top" title="Back to top" onmouseout="view('topActive[key:incrementalNumber]'); return false;" /></a>
<a class="m02" href="#" onclick="view('cdInfo[key:incrementalNumber]'); view('cdInfoActive[key:incrementalNumber]'); return false;"><img src="Images/m02.gif" alt="Expanded Info" title="Expand Info" /><img id="cdInfoActive[key:incrementalNumber]" src="Images/m02x.gif" style="display: none;" alt="Collapse Info" title="Collapse Info" /></a>
<a class="m03" href="#" onclick="view('showCover[key:incrementalNumber]'); view('hideSmallCover[key:incrementalNumber]'); view('moveInfo[key:incrementalNumber]'); view('albumCenter[key:incrementalNumber]'); view('showCoverActive[key:incrementalNumber]'); return false;"><img src="Images/m03.gif" alt="Cover Zoom [+]" title="Cover Zoom [+]" /><img id="showCoverActive[key:incrementalNumber]" src="Images/m03x.gif" style="display: none;" alt="Cover Zoom [-]" title="Cover Zoom [-]" /></a>
</div>
<div class="clearBoth"> </div>
</div>

<div id="albumCenter[key:incrementalNumber]" class="albumCenter" style="display: yes;">
<p><strong class="artist">[key:title] </strong></p>
<p>[key:author] </p>

<img class="stars" src="[key:starRatingURL]" />
<p class="incrNum">(#[key:incrementalNumber]) </p>
</div>
<div class="clearBoth"> </div>

<div id="cdInfo[key:incrementalNumber]" class="cdInfo" style="display: none;">
<img class="albumLine" src="Images/line.gif" />
<div class="tracklist">
<br />
<strong>[translate:summary] :</strong> [key:summary]<br />
<br />
<strong>[translate:comments] :</strong> [key:comments]
</div>
<div class="moreInfo">
<div class="inner">
<p><strong>[translate:edition] :</strong> [key:edition]</p>


<p><strong>ISBN:</strong> [key:isbn]</p>


</div>
</div>
<div class="clearBoth"> </div>
</div>

</div>
</div>
<img class="albumBorder" src="Images/album-bottom.gif" />

</div>


<div class="nav">



</div>

<div id="footer">
created using <a title="Bruji - A Mac's best friend" href="http://www.bruji.com/" onclick="window.open(this.href); return false"><strong>Bookpedia</strong></a> ···
template designed by <a title="Dan Friml - Professional design" href="http://www.friml.com/" onclick="window.open(this.href); return false"><strong>dan.friml.com</strong></a>
<span id="version">df.Metal.Box v1.0 © 2007</span>
</div>

</div>
</body>
</html>

Many thanks...

Post by **Conor** » Thu Nov 15, 2007 6:33 am

You can conditional change the HTML with . The problem here is that this template is quite complicated and uses a number of background that match with each other. So you have to set the conditional in several places.

One option is to make a second image that is similar to album-body.gif so that it matches the surroundings, maybe with stripes that fade out near the top (does not need to be the same size). Then you would change:

Code: Select all

<div class="albumInner">

for:

Code: Select all

<div class="albumInner" <!--IFsigned style="background-image:url('../Images/mynewbackground.gif'); /*[key:signed]*/"  ENDsigned-->

(You have to include the [key:signed] once somewhere, otherwise the if statements are never looked for due to optimization during the export, here it's included as a comment.)

But something more simple would be change the color of the title:

Code: Select all

<p><strong class="artist">[key:title] </strong></p>

for:

Code: Select all

<p><strong class="artist"> <!--IFsigned <span style="color: red; /*[key:signed]*/"> ENDsigned-->[key:title] <!--IFsigned </span> ENDsigned-->  </strong></p>

You can also drop the signed key from the comments and place it as an actual field so you can see it when expanded and it makes the "if signed" statement simpler. Below is the template with a blue title when signed as well as the signed included as a field, it will give you the best idea on how to go about it (look for  to find the changes I made)

Code: Select all

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
<head> 
<meta http-equiv="Content-type" content="text/html; charset=utf-8" /> 
<meta name="PageSplit" content="SortLetter" /> 
<meta name="image-width" content="300" /> 
<meta name="image-height" content="420" /> 
<meta name="keywords" content="Bookpedia, book collection, Books, Mac, Catalog" /> 
<meta name="description" content="My book collection created using Bookpedia" /> 
<meta name="author" content="Dan Friml, www.friml.com" /> 
<meta name="robots" content="index, follow" /> 
<title>[global:collectionName]</title> 
<script type="text/javascript" src="Images/js.js"></script> 
<link rel="stylesheet" href="Images/style.css" type="text/css" media="screen" charset="utf-8" /> 
</head> 
<body id="pageTop"> 
<div id="whole"> 

<h1>[global:collectionName]</h1> 

<div id="topInfo"> 
<div id="topInfoL"> 
<strong>Updated:</strong> [global:dateUpdated]<br /> 
<strong>Total number of titles:</strong> [global:totalEntries] 
</div> 
<div id="topInfoR"> 
<strong>Page number:</strong> [global:pageNumber]<br /> 
<strong>Pages:</strong> [global:totalNumberOfPages] 
</div> 
<div class="clearBoth"> </div> 
</div> 

<h2>[global:sortedBy] : [global:sortedEntry]</h2> 

<div class="nav"> 
<!--IFIndex <div class="index"> [Divider: | ] </div> ENDIndex--> 
<!--IF_PREVIOUS_PAGE <div class="prev"><a href="[global:previousPageURL]" >« Previous Page</a></div> END_PREVIOUS_PAGE--> 
<!--IF_NEXT_PAGE <div class="next"><a href="[global:nextPageURL]" >Next Page »</a></div> 
END_NEXT_PAGE--> <div class="clearBoth"> </div> 
</div> 

<!--BeginRepeat--> 

<div class="album"> 

<img class="albumBorder" src="Images/album-top.gif" /> 
<div class="albumBG"> 
<div class="albumInner"> 

<div id="hideSmallCover[key:incrementalNumber]" class="albumCover" style="display: yes;"> 
<a href="#" onclick="view('showCover[key:incrementalNumber]'); view('hideSmallCover[key:incrementalNumber]'); view('moveInfo[key:incrementalNumber]'); view('albumCenter[key:incrementalNumber]'); view('showCoverActive[key:incrementalNumber]'); return false;"><img src="[key:coverImageURL]" alt="Cover Zoom [+]" title="Cover Zoom [+]"  /></a> 
</div><!-- albumCover //--> 

<div id="showCover[key:incrementalNumber]" class="coverWindow" style="display: none;"> 
<a href="#" onclick="view('showCover[key:incrementalNumber]'); view('hideSmallCover[key:incrementalNumber]'); view('moveInfo[key:incrementalNumber]'); view('albumCenter[key:incrementalNumber]'); view('showCoverActive[key:incrementalNumber]'); return false;"><img src="[key:coverImageURL]" alt="Cover Zoom [-]" title="Cover Zoom [-]" /></a> 
<a class="closeWindow" href="#" onclick="view('showCover[key:incrementalNumber]'); view('hideSmallCover[key:incrementalNumber]'); view('moveInfo[key:incrementalNumber]'); view('albumCenter[key:incrementalNumber]'); view('showCoverActive[key:incrementalNumber]'); view('closeWindow[key:incrementalNumber]'); return false;"><img src="Images/m.gif" alt="" onmouseover="view('closeWindow[key:incrementalNumber]'); return false;" /><img id="closeWindow[key:incrementalNumber]" src="Images/closeWindow.gif" alt="Cover Zoom [-]" title="Cover Zoom [-]" style="display: none;" onmouseout="view('closeWindow[key:incrementalNumber]'); return false;" /></a> 
</div><!-- showCover[key:incrementalNumber] //--> 

<div class="albumRight"> 
<div class="innerLeft"> 

<div id="moveInfo[key:incrementalNumber]" class="movedInfo" style="display: none;"> 
<p><strong class="artist">[key:author] </strong></p> 
<p>[key:title] </p> 
<!--IFpages<p>[key:pages] pages </p>ENDpages--> 
<img class="stars" src="[key:starRatingURL]" /> 

<p><strong>[translate:signed] :</strong> [key:signed]<p> <!--CHANGE-->

<p class="incrNum">(#[key:incrementalNumber]) </p> 
</div><!-- albumCenter //--> 
<p><strong>[translate:releaseDate] :</strong> [key:releaseDate]</p> 
<p><strong>[translate:publisher] :</strong> [key:publisher]</p> 
<!--IFeditor<p><strong>Collection :</strong> [key:editor]</p>ENDeditor--> 
<p><strong>[translate:genre] :</strong> [key:genre]</p> 
<p><strong>[translate:format] :</strong> [key:format]</p> 

<p><strong>[translate:purchasedOn] :</strong> [key:purchasedOn]</p> 

</div><!-- innerLeft //--> 

<div class="innerRight"> 
<a class="m01" href="#pageTop"><img src="Images/m01.gif" alt="Back to top" title="Back to top" onmouseover="view('topActive[key:incrementalNumber]'); return false;" /><img id="topActive[key:incrementalNumber]" src="Images/m01x.gif" style="display: none;" alt="Back to top" title="Back to top" onmouseout="view('topActive[key:incrementalNumber]'); return false;" /></a> 
<a class="m02" href="#" onclick="view('cdInfo[key:incrementalNumber]'); view('cdInfoActive[key:incrementalNumber]'); return false;"><img src="Images/m02.gif" alt="Expanded Info" title="Expand Info" /><img id="cdInfoActive[key:incrementalNumber]" src="Images/m02x.gif" style="display: none;" alt="Collapse Info" title="Collapse Info" /></a> 
<a class="m03" href="#" onclick="view('showCover[key:incrementalNumber]'); view('hideSmallCover[key:incrementalNumber]'); view('moveInfo[key:incrementalNumber]'); view('albumCenter[key:incrementalNumber]'); view('showCoverActive[key:incrementalNumber]'); return false;"><img src="Images/m03.gif" alt="Cover Zoom [+]" title="Cover Zoom [+]" /><img id="showCoverActive[key:incrementalNumber]" src="Images/m03x.gif" style="display: none;" alt="Cover Zoom [-]" title="Cover Zoom [-]" /></a> 
</div><!-- innerRight //--> 
<div class="clearBoth"> </div> 
</div><!-- albumLeft //--> 

<div id="albumCenter[key:incrementalNumber]" class="albumCenter" style="display: yes;"> 

<p><strong class="artist"><!--IFsigned <span style="color: blue;"> ENDsigned-->[key:title]<!--IFsigned </span> ENDsigned--> </strong></p> <!--CHANGE-->

<p>[key:author] </p> 
<!--IFpages<p>[key:pages] pages </p>ENDpages--> 
<img class="stars" src="[key:starRatingURL]" /> 
<p class="incrNum">(#[key:incrementalNumber]) </p> 
</div><!-- albumCenter //--> 
<div class="clearBoth"> </div> 

<div id="cdInfo[key:incrementalNumber]" class="cdInfo" style="display: none;"> 
<img class="albumLine" src="Images/line.gif" /> 
<div class="tracklist"> 

<br /> 
<strong>[translate:summary] :</strong> [key:summary]<br /> 
<br /> 
<strong>[translate:comments] :</strong> [key:comments] 
</div><!-- tracklist //--> 
<div class="moreInfo"> 
<div class="inner"> 
<p><strong>[translate:edition] :</strong> [key:edition]</p> 
<!--IFprice<p><strong>[translate:price] :</strong> [key:price]</p>ENDprice--> 
<!--IFpaid<p><strong>Cote :</strong> [key:paid]</p>ENDpaid--> 
<p><strong>ISBN:</strong> [key:isbn]</p> 
<!--IFcustom4<p><strong>[translate:custom4] :</strong> [key:custom4]</p>ENDcustom4--> 

</div><!-- inner //--> 
</div><!-- moreInfo //--> 
<div class="clearBoth"> </div> 
</div><!-- cdInfo[key:incrementalNumber] //--> 

</div><!-- albumInner //--> 
</div><!-- albumBG //--> 
<img class="albumBorder" src="Images/album-bottom.gif" /> 

</div><!-- album //--> 
<!--EndRepeat--> 

<div class="nav"> 
<!--IF_PREVIOUS_PAGE <div class="prev"><a href="[global:previousPageURL]" >« Previous Page</a></div> END_PREVIOUS_PAGE--> 
<!--IF_NEXT_PAGE <div class="next"><a href="[global:nextPageURL]" >Next Page »</a></div> 
END_NEXT_PAGE--> 
<!--IFIndex <div class="index"> [Divider: | ] </div> ENDIndex--> 
</div> 

<div id="footer"> 
created using <a title="Bruji - A Mac's best friend" href="http://www.bruji.com/" onclick="window.open(this.href); return false"><strong>Bookpedia</strong></a> ··· 
template designed by <a title="Dan Friml - Professional design" href="http://www.friml.com/" onclick="window.open(this.href); return false"><strong>dan.friml.com</strong></a> 
<span id="version">df.Metal.Box v1.0 © 2007</span> 
</div> 

</div> 
</body> 
</html>

chander · Post by **chander** » Thu Nov 15, 2007 6:51 am

Great !

I'm very impressed !

A thousand thanks for the very very quick answer anf your overall reactivity !