html conditional template color

Any trouble you encounter with the Pedias, here's the place to ask for help.
Post Reply
chander
Junior Member
Junior Member
Posts: 4
Joined: Tue Oct 23, 2007 4:13 pm

html conditional template color

Post by chander »

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">
<!--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 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">[key:title] </strong></p>
<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>
Many thanks...
User avatar
Conor
Top Dog
Posts: 5345
Joined: Sat Jul 03, 2004 12:58 pm
Contact:

Post by Conor »

You can conditional change the HTML with <!--IFsigned ... ENDsigned-->. 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 <!--CHANGE--> 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
Junior Member
Junior Member
Posts: 4
Joined: Tue Oct 23, 2007 4:13 pm

Post by chander »

Great !

I'm very impressed !

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