Beautifying server output
Posted: Sat May 27, 2006 8:41 pm
Appologies in advance if this has already been covered elsewhere and I overlooked it.
In setting up the server for our group I was looking for some way of changing the look of the output from black and white. Since I couldn't see any way to do it directly in Bookends what I did was embed the main page in another page and use javascript to add a link to a style sheet after the page is generated by bookends.
In my case this meant going from black and white to
. For anyone else that is interested here is how I did it.
Copy and paste the text below and save it as 'bookends.html' (note you can call it almost anything but default.html or index.html) in the library/application support/bookends folder
Change the server name in the line <frame src="http://serenity.local:2001" ... to the name of your server (ie localhost or somewhere.someinstitution.org:2001)
Copy and paste the text below and save it as 'main.css' in the same folder as the previous file.
This is a basic style sheet that changes the default font (to sans serif), the font colour (to #505367) etc.
In a web browser go your_bookends_server:2001/bookends.html (for example using the unmodified document above it is serenity.local:2001/bookends.html). If everything is OK you should see a styled version of the server output.
Limitations - obviously javascript has to be turned on in users browsers for this to work. If it isn't or if their browser doesn't support the actions (IE macintosh for example) then it should fail without error and they will just get the raw server output displayed. I have only tested this on Safari and Firefox (mac) and IE(mac). If users open links in a new page or new tab then the server output is no longer held in the frame with the javascript so the style is not applied (although with more scripting you could probably force the link into a frame).
The bookends guide explains how to add html code to the output references if you want to tweak the output further (e.g. $<div id="reference">$a. d. t. f v (i): p-.$</div> - place them in a div with an id reference that can be individually styled in the stylesheet).
Cheers Kev
In setting up the server for our group I was looking for some way of changing the look of the output from black and white. Since I couldn't see any way to do it directly in Bookends what I did was embed the main page in another page and use javascript to add a link to a style sheet after the page is generated by bookends.
In my case this meant going from black and white to
. For anyone else that is interested here is how I did it.Copy and paste the text below and save it as 'bookends.html' (note you can call it almost anything but default.html or index.html) in the library/application support/bookends folder
Code: Select all
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Database search</title>
<link rel="stylesheet" type="text/css" media="screen" href="main.css">
<script language="JavaScript" type="text/javascript">
<!-- function from http://www.faqts.com/knowledge_base/view.phtml/aid/12721 -->
<!-- inserts the style sheet from the base page into the page loaded into the frame -->
function insertStyleSheets () {
<!-- check that the browser supports this -->
if (document.styleSheets && document.getElementById && document.createElement) {
<!-- get the stylesheet link from this document -->
for (var i = 0; i < document.styleSheets.length; i++) {
var ownerNode = document.styleSheets[i].ownerNode ? document.styleSheets[i].ownerNode : document.styleSheets[i].owningElement;
if (ownerNode.nodeName && ownerNode.nodeName.toLowerCase() == 'link')
<!-- add the stylesheet reference to each frame in this document -->
for (var f = 0; f < frames.length; f++) {
var link = frames[f].document.createElement('link');
link.type = ownerNode.type;
link.href = ownerNode.href;
link.rel = ownerNode.rel;
frames[f].document.getElementsByTagName('head')[0].appendChild(link);
}
}
}
}
</script>
</head>
<frameset >
<frame src="http://serenity.local:2001" scrolling="auto" name="bookends" onload="parent.insertStyleSheets();"/>
</frameset>
</html> Copy and paste the text below and save it as 'main.css' in the same folder as the previous file.
Code: Select all
body
{
margin: 0;
padding: 0;
font: 85% arial, hevetica, sans-serif;
text-align: center;
color: #505367;
background-color: #f4f4f4;
}
/* no ugly blue border for images */
img {
border: 0px;
}
In a web browser go your_bookends_server:2001/bookends.html (for example using the unmodified document above it is serenity.local:2001/bookends.html). If everything is OK you should see a styled version of the server output.
Limitations - obviously javascript has to be turned on in users browsers for this to work. If it isn't or if their browser doesn't support the actions (IE macintosh for example) then it should fail without error and they will just get the raw server output displayed. I have only tested this on Safari and Firefox (mac) and IE(mac). If users open links in a new page or new tab then the server output is no longer held in the frame with the javascript so the style is not applied (although with more scripting you could probably force the link into a frame).
The bookends guide explains how to add html code to the output references if you want to tweak the output further (e.g. $<div id="reference">$a. d. t. f v (i): p-.$</div> - place them in a div with an id reference that can be individually styled in the stylesheet).
Cheers Kev