Step One - Required Graphics
We need 3 graphics to use with the CSS - Attached at the end of the post
trans_logo.gif
trans_hd_bg.gif
footer.gif
The 3 graphics need to be placed here:
cd /opt/share/www
as we cannot access graphic files from the /opt/share/www/cgi-bin directory
Step Two - Replace the CSS in the transmission.cgi
Here is the CSS for my design
<!--
BODY {
padding:0;
margin:0;
width: auto;
color: #2f2f2f;
font-family:tahoma;
font-size:11px;
background: #FFF url(../trans_hd_bg.gif) repeat-x left top;
}
#logo{
padding:0;
margin:0;
}
A:link { color: #0000A0 }
A:visited { color: #A000A0 }
table {
background-color: #fafafa;
border-top: 1px #5c5c5c solid;
border-collapse: collapse;
border-spacing: 0px;
width:95%;
font-size:11px;
}
td {
border-bottom: 1px #7d7d7d dotted;
text-align: left;
font-family: Tahoma, sans-serif, Arial;
font-weight: normal;
padding-top: 4px;
padding-bottom: 4px;
padding-left: 8px;
padding-right: 0px;
}
THEAD {
background: #7d7d7d;
color: #fff;
font-weight:bold;
text-transform:uppercase;
font-size:10px;
}
TBODY {
background-color: #fafafa;
}
input{
padding:4px 7px;
margin:0 0 0 0;
color:#fff;
font-family:tahoma;
font-size:11px;
font-weight:normal;
background-color:#5c5c5c;
border: none;
}
td input{
padding:0;
margin:0;
color:#fff;
font-weight:normal;
background-color:#fff;
border: none;
}
form{
padding:20px;
margin:0px;
background-color:#FFF9D8;
}
p{
padding:0px;
margin:10px;
color:#008000;
}
#footer{
padding:0;
margin:0;
background: #FFF url(../footer.gif) repeat-x left top;
}
//-->
I used nano to edit the file
nano /opt/share/www/cgi-bin/transmission.cgi
just replace the CSS with the code above at this point in the file (it's near the end)
....<html>
<head>
<title>Transmission</title>
<style type="text/css">
REPLACE THE CSS CODE HERE
</style>
</head>
<body>........
Step Three - Add 2 div tags to the HTML in the transmission.cgi
In the same file after the <body> tag starts add the following tag
<div id="logo"><img src="../trans_logo.gif"></div>
here
....</head>
<body>
<div id="logo"><img src="../trans_logo.gif"></div>
<form action=transmission.cgi method=get>....
and near the very end add the following tag
<div id="footer"> </div>
here
</form>
<div id="footer"> </div>
</body>
</html>
The final bit I did was delete the Links to "Work, Target and Source" directories as I never use them... but that's optional
Hope this is of help to someone and thanks again to oleo for such a useful package!