The idea of this is to NICELY display a graphic to show the efficiency of a campaign on your killboard so it can be easily noticed. It uses a single image that modifies it's position based on a set of rules being in place, using some maths in the efficiency calculations, and then a little additions to the style.css file for the EDK's style being used.
Sample of output from this tutorial:
In Use (test EDK):
http://alvar.bl4ck.org/testkb/
Files to be edited:
./templates/contractlisttable.tpl
./style/style_being_modified/style.css
Files to download as a base, used in this tutorial (no hotlinking or you get goatporn on your site):
http://www.bl4ck.org/bl4ck/edk15013apoc ... slider.png
Original contractlisttable.tpl file:
Code: Select all
<table class="kb-table" width="98%" align="center" cellspacing="1">
<tr class="kb-table-header"><td class="kb-table-cell" width="180">Name</td>
<td class="kb-table-cell" width="80" align=center>Start date</td>
{if $contract_getactive == "no"}
<td class="kb-table-cell" width="80" align="center">End date</td>
{/if}
<td class="kb-table-cell" width="50" align="center">Kills</td>
<td class="kb-table-cell" width="70" align="center">ISK (B)</td>
<td class="kb-table-cell" width="50" align="center">Losses</td>
<td class="kb-table-cell" width="70" align="center">ISK (B)</td>
<td class="kb-table-cell" width="70" align="center" colspan=2>Efficiency</td>
</tr>
{cycle reset=true print=false name=ccl values="kb-table-row-even,kb-table-row-odd"}
{foreach from=$contracts item=i}
<tr class="{cycle advance=false name=ccl}" onmouseover="this.className='kb-table-row-hover';"
onmouseout="this.className='{cycle name=ccl}';" onClick="window.location.href='?a=cc_detail&ctr_id={$i.id}';">
<td class="kb-table-cell"><b>{$i.name}</b></td>
<td class="kb-table-cell" align="center">{$i.startdate|truncate:10:""}</td>
{if $contract_getactive == "no"}
{if $i.enddate}
<td class="kb-table-cell" align="center">{$i.enddate|truncate:10:""}</td>
{else}
<td class="kb-table-cell" align="center">Active</td>
{/if}
{/if}
<td class="kl-kill" align="center">{$i.kills}</td>
<td class="kl-kill" align="center">{$i.killisk/1000000|string_format:"%.2f"}</td>
<td class="kl-loss" align="center">{$i.losses}</td>
<td class="kl-loss" align="center">{$i.lossisk/1000000|string_format:"%.2f"}</td>
<td class="kb-table-cell" align="center" width="40"><b>{$i.efficiency}</b></td>
<td class="kb-table-cell" align="left" width="75">{$i.bar}</td>
</tr>
{/foreach}
</table>
Code: Select all
<table class="contractlist" width="100%" cellpadding="0" cellspacing="0">
<tr class="contract_header">
<td> Name of Campaign / Contract</td>
<td width="70" align=center>Start date</td>
<td width="70" align="center">End date</td>
<td width="50" align="center">Kills</td>
<td width="60" align="center">ISK (B)</td>
<td width="50" align="center">Losses</td>
<td width="60" align="center">ISK (B)</td>
<td width="70" align="center" colspan=2>Efficiency</td>
</tr>
{cycle reset=true print=false name=ccl values="kb-table-row-even,kb-table-row-odd"}
{foreach from=$contracts item=i}
<tr class="is_{if $i.enddate}{$i.enddate|truncate:10:""}{else}Active{/if}" onClick="window.location.href='?a=cc_detail&ctr_id={$i.id}';">
<td class="kb-table-cell"><b>{$i.name}</b></td>
<td class="kb-table-cell" align="center">{$i.startdate|date_format}</td>
{if $i.enddate}<td class="kb-table-cell" align="center">{$i.enddate|date_format}</td>{else}<td class="kb-table-cell" align="center">Active</td>{/if}
<td class="kl-kill" align="center">{$i.kills}</td>
<td class="kl-kill" align="center">{$i.killisk/1000000|string_format:"%.2f"}</td>
<td class="kl-loss" align="center">{$i.losses}</td>
<td class="kl-loss" align="center">{$i.lossisk/1000000|string_format:"%.2f"}</td>
<td class="kb-table-cell" align="center" width="40"><b>{$i.efficiency|string_format:"%.2f"}</b>%</td>
<td class="kb-table-cell" align="left" width="65" height="9"><div class="pie size{$i.efficiency-1|truncate:2:""}"> </div></td>
</tr>
{/foreach}
</table>
Code: Select all
/*
STYLES USED TO CREATE THE ALVAR COMPAIGN SLIDER BAR
*/
.contract_header {
background-image: url("header.jpg");
background-position: right top;
background-position: -20px;
background-repeat:no-repeat;
border-bottom: 1px solid #4f4f4f ;
height: 20px;
font-size:11px;
font-weight: bold;
color: #FFCC33;
text-transform:uppercase;
}
.contractlist tr {
color: white;
font-size: 10px;
}
.pie {
display: block;
margin: 0;
padding: 0;
width: 61px;
height: 9px;
background-image: url('slider.png');
background-repeat:no-repeat;
}
.size0 { background-position: 0px 0px; }
.size1, .size2, .size3, .size4, .size5 { background-position: 0px -9px; }
.size6, .size7, .size8, .size9, .size10 { background-position: 0px -18px; }
.size11, .size12, .size13, .size14, .size15 { background-position: 0px -27px; }
.size16, .size17, .size18, .size19, .size20 { background-position: 0px -36px; }
.size21, .size22, .size23, .size24, .size25 { background-position: 0px -45px; }
.size26, .size27, .size28, .size29, .size30 { background-position: 0px -54px; }
.size31, .size32, .size33, .size34, .size35 { background-position: 0px -63px; }
.size36, .size37, .size38, .size39, .size40 { background-position: 0px -72px; }
.size41, .size42, .size43, .size44, .size45 { background-position: 0px -81px; }
.size46, .size47, .size48, .size49, .size50 { background-position: 0px -90px; }
.size51, .size52, .size53, .size54, .size55 { background-position: 0px -99px; }
.size56, .size57, .size58, .size59, .size60 { background-position: 0px -108px; }
.size61, .size62, .size63, .size64, .size65 { background-position: 0px -117px; }
.size66, .size67, .size68, .size69, .size70 { background-position: 0px -126px; }
.size71, .size72, .size73, .size74, .size75 { background-position: 0px -135px; }
.size76, .size77, .size78, .size79, .size80 { background-position: 0px -144px; }
.size81, .size82, .size83, .size84, .size85 { background-position: 0px -153px; }
.size86, .size87, .size88, .size89, .size90 { background-position: 0px -162px; }
.size91, .size92, .size93, .size94, .size95 { background-position: 0px -171px; }
.size96, .size97, .size98, .size99, .size100 { background-position: 0px -180px; }
That should be it.
Some notes:
Due to the nature of the truncating, using the below code, if you set the number to 3, and get the 100% efficiency, it throws the others out, by making them 2 digits, 100% actually looks like 10%. The solution was a little bit of maths to drop the efficiency by 1, and then truncate it. This makes 100% 99%, and as I have the numbers between 95% and 100% being one block, it makes it work.
I am working on different options for doing the work atm, and if I can get it to work, I will have it doing it perfectly. Till then this method works and does so well. The option I thought of, and will do a test on, is to devide the efficiency % by 10, and then round it off, see how that works.
Code with math doing the calculations for the efficiency.
Code: Select all
<td class="kb-table-cell" align="center" width="40"><b>{$i.efficiency|string_format:"%.2f"}</b>%</td>
<td class="kb-table-cell" align="left" width="65" height="9"><div class="pie size{$i.efficiency-1|truncate:2:""}"> </div></td>I will be continually refining this as I go. But this should get it working for you.
HTH
I take it name is same in EVE? If so iskies are on its way to ya bro