Here's a sample code to place a customized HTML/CSS link table in the widget area of your flipbook reader. You will need to change all values in BOLD to your own customized colors, fonts,settings, web URLs. See the comments within the /* and */ for explanation of the custom changes required. Best to try it out and experiment with different colors and settings to get your desired link table look.
<!-- START COPYING HERE //-->
<html>
<head>
<style type="text/css">
body, html
{
background-color:#eeeeee;
/* Widget background color: replace "#eeeeee" with your flipbook background's hexadecimal HTML color code, found in title settings>appearance/options */
}
/* For each of the four link states below, change to your custom value: #FFFFFF to the color you want for your link, 16 to the size of the link text, verdana to your desired font style */
a:link {color:#FFFFFF; font-size:16; font-family: verdana;}
/* link appearance before any clicks*/
a:visited {color:#FFFFFF; font-size:16; font-family: verdana;}
/* link appearance if already visited*/
a:hover {color:#FFFFFF; font-size:16;font-family: verdana;}
/* link appearance while mouse cursor is on top */
a:active {color:#FFFFFF; font-size:16;font-family: verdana;}
/* link appearance during click */
td { vertical-align: middle;}
div.link{
background-color:#333333; height:40px;}
/* Link area background color, choose your hexadecimal/HTML color code and your height pixels*/
</style>
</head>
<body>
<br><br><br>
<!--Below are the defined link areas and link destination settings. You must change the values within each div area. The values you must change are the web addresses within the quotes which is the destination if the link is clicked, and the Link Text values which is what will appear on the screen as a link. If you would like more links or fewer links, add or remove an entire <div class="link">......</div> section. Remember to include or remove a line break <br> between each div section. This example contains 5 link areas //-->
<div class="link"><table height="100%" width="100%"><tr><td>
<a STYLE="text-decoration:none" href="http://linktext1webaddress.com" target="_blank">
<center>Link Text 1</center>
</a></td></tr></table></div>
<br>
<div class="link"><table height="100%" width="100%"><tr><td>
<a STYLE="text-decoration:none" href="http://linktext2webaddress.com" target="_blank">
<center>Link Text 2</center>
</a></td></tr></table></div>
<br>
<div class="link"><table height="100%" width="100%"><tr><td>
<a STYLE="text-decoration:none" href="http://linktext3webaddress.com" target="_blank">
<center>Link Text 3</center>
</a></td></tr></table></div>
<br>
<div class="link"><table height="100%" width="100%"><tr><td>
<a STYLE="text-decoration:none" href="http://linktext4webaddress.com" target="_blank">
<center>Link Text 4</center>
</a></td></tr></table></div>
<br>
<div class="link"><table height="100%" width="100%"><tr><td>
<a STYLE="text-decoration:none" href="http://linktext5webaddress.com" target="_blank">
<center>Link Text 5</center>
</a></td></tr></table></div>
</body></html><!-- END COPYING HERE //-->
Copy the code and paste it in the Widget section within the title you want to modify.
Click 'Update Title'.
The result of the above unchanged code looks like this:
Comments
0 comments
Please sign in to leave a comment.