Alvar's Sliding Bar for Campaigns

Thought of something everyone else is having trouble with and just wanna help them? Post it here.
Post Reply
User avatar
Warbear
Apprentice
Posts: 49
Joined: Sat Jun 14, 2008 20:24
Location: Canberra, Australia
Contact:

Alvar's Sliding Bar for Campaigns

Post by Warbear » Tue May 19, 2009 14:03

I have had a few requests on how to do this for differing sites, and though I am happy to take ISK to do it, it's time as well, so instead, here is a tutorial on how to do it yourself, however if you REALLY want me to mod your site, or theme it I will be happy to. Also, if you like this, ISK is a great way to say thanks.

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:
Image

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>
Change the above to:

Code: Select all

<table class="contractlist" width="100%" cellpadding="0" cellspacing="0">
  <tr class="contract_header">
    <td>&nbsp;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:""}">&nbsp;</div></td>
  </tr>

  {/foreach}
  
</table>
 
Open the style.css file for the style you are modifying, and at the bottom, add the following code:

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; }

Copy the slider.png file into your STYLE folder (the one you are working on).

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:""}">&nbsp;</div></td>
The work to get the maths right, and the formatting is all SMARTY based, and not well documented, so I am working it through slowly.

I will be continually refining this as I go. But this should get it working for you.

HTH
Image
I do stuff...contact me.

User avatar
pdidoc
Apprentice
Posts: 45
Joined: Sat Jun 14, 2008 20:24
Location: Wiltshire, UK
Contact:

Re: Alvar's Sliding Bar for Campaigns

Post by pdidoc » Tue May 19, 2009 14:56

Warbear your a legend for this mate, thank you ever so much for doing this for us :) I take it name is same in EVE? If so iskies are on its way to ya bro :)

DoC
Regards,
PryMary

User avatar
Warbear
Apprentice
Posts: 49
Joined: Sat Jun 14, 2008 20:24
Location: Canberra, Australia
Contact:

Re: Alvar's Sliding Bar for Campaigns

Post by Warbear » Tue May 19, 2009 16:13

No, in game name is Alvar Ursidae.
Image

I do stuff...contact me.

Post Reply

Return to “Tutorials”

Who is online

Users browsing this forum: No registered users and 1 guest