Knowledge Base/3.0 Enhance your reader and publication/3.4 Title Widgets

3.4.3 Place an HTML/CSS Link Menu in the widget area

Nathan Virtue
posted this on July 20, 2010 12:08 pm

To place a custom menu in next to your publication in the widget area, first go to manage titles/issues view and click Edit Title:

Manage_Titles_and_Issues.png

Click on Widget>Custom Embed>Activate the custom embed widget and use the below code in the Your Embed Code section.

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' to save the new widget OR click GO BACK to get back to the manage titles/issues screen and discard the changes.

Custom_Embed_Widget.png

 

The result of the above unchanged code looks like this:

HTML-CSS-link-table-flipbook.png