PDA

Bekijk de volledige versie : Transmission Questions & Reskin



velcrow
23-05-2007, 10:18
Firstly, Thanks to Oleo and Moody Blue for getting me this far...

Transmission Reskin:

My background is in design (css) so I have started to change the CSS used in the transmission.cgi to "clean up" the look and feel. My approach is to not change the code just the inline css and redefine the look and feel of the tags used.

My question is can the trasmission.cgi use an external css instead of the inline style that are currenly used?

oleo
23-05-2007, 14:27
It could be done with external css. But I think that it is better to include it as as string in /opt/etc/transmission.conf
Then users would have a choice to upgrade without changing .conf or cgi.

velcrow
23-05-2007, 17:56
Thanks Oleo,

Here is an image of what I am aiming for - ( based on the main transmission site )

again I am trying to do this without impacting on the cgi script just the CSS... as for how it would be deployed - no idea yet!

charming
01-06-2007, 14:50
Thanks Oleo,

Here is an image of what I am aiming for - ( based on the main transmission site )

again I am trying to do this without impacting on the cgi script just the CSS... as for how it would be deployed - no idea yet!

I like this.
Can you provide it?
Thank you.

velcrow
13-06-2007, 14:24
In short, yes but I need time to write a simple "readme" with install instructions -

I have just changed the inline CSS and added the graphics to a folder.

Will look at it on the weekend

fireandy
22-06-2007, 10:11
velcrow, I really like what I can see :-)
Its a professional-like reskin...would like to have it too...

Can you share your work with the community - it looks like it would be fully functional, so I would like to give it a try.

Thx
fireandy

oleo
23-06-2007, 00:33
velcrow, I really like what I can see :-)
Its a professional-like reskin...would like to have it too...

Professional like reskin that looks like Transmission homepage (http://transmission.m0k.org/about.php) would be great, but the problem is with top image that should be splitted in two parts to allow stretchable header. And border should be smaller to accomodate text. And so on.

velcrow
11-09-2007, 20:39
Have been playing around with this for a while and here is the design I am currently using - It's simple and clean and not too web 2.0.

I know there are probably much better ways to achieve this ( e.g. using the .conf file) but here is what I did - see next post >>

velcrow
11-09-2007, 21:02
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">&nbsp;</div>

here


</form>
<div id="footer">&nbsp;</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!

mistraller
11-09-2007, 23:44
Wow, looks great!

raas
12-09-2007, 20:59
yeah.

looks really great.!
Thanks

TearTox
13-09-2007, 15:29
Thanks, Looks Great!

realfolkblues
15-09-2007, 02:35
I just applyed your skin looks great and much easier to read the text!

velcrow
15-09-2007, 20:18
Thanks for the feedback - Good to know this is of use

morfy
20-06-2008, 15:43
would you be able please directly post the file cgi? I have tried to modify my file on my wl500w but it doesn't work me

velcrow
21-06-2008, 17:00
Here is the cgi - download and change the extension .txt to .cgi

Remember to set your own root "username" in this file and to place the images ( contained in the previous post) in the www folder