<apex:page standardController="opportunity" showHeader="false" sidebar="false" standardStylesheets="false"> | |
<style> | |
.starWar{ | |
border-radius: 0px 2px 2px 0px; | |
display: block; | |
width: 0%; | |
background-color: #fff; | |
height: 8px; | |
width: {!opportunity.Probability}%; | |
font-size:8px; | |
text-align: center; | |
} | |
.vader{ | |
box-shadow:0px 0px 10px 1px #FD4275, 0 0 1px #FD4275, 0 0 1px #FD4275, 0 0 1px #FD4275, 0 0 1px #FD4275, 0 0 1px #FD4275, 0 0 1px #FD4275; | |
} | |
.yoda{ | |
box-shadow:0px 0px 10px 1px #68B37A, 0 0 1px #68B37A, 0 0 1px #68B37A, 0 0 1px #68B37A, 0 0 1px #68B37A, 0 0 1px #68B37A, 0 0 1px #68B37A; | |
} | |
.obi{ | |
box-shadow:0px 0px 10px 1px #3B8CF8, 0 0 1px #3B8CF8, 0 0 1px #3B8CF8, 0 0 1px #3B8CF8, 0 0 1px #3B8CF8, 0 0 1px #3B8CF8, 0 0 1px #3B8CF8; | |
} | |
.windu{ | |
box-shadow:0px 0px 10px 1px #AC85B4, 0 0 1px #AC85B4, 0 0 1px #AC85B4, 0 0 1px #AC85B4, 0 0 1px #AC85B4, 0 0 1px #AC85B4, 0 0 1px #AC85B4; | |
} | |
</style> | |
<div> | |
<table style="border-spacing: 0px;width:100%;"> | |
<tr> | |
<td style="width: 114px;"> | |
<img src="{! $Resource.Sword }"/> | |
</td> | |
<td> | |
<!--Replace Class name below for different swords like : yoda,obi,windu--> | |
<span class="vader starWar" title="{!opportunity.Probability}%">{!opportunity.Probability}%</span> | |
</td> | |
</tr> | |
</table> | |
</div> | |
</apex:page> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment