Apex Cloud: CSS in Vf page

Hello
Some time we guys need to make website in salesforce. To implement that requirement we use site.com. The pages what are added in site.com may be accessed publicly. Each page of the website requires some css to make attractive look. So having this type of requirement in mind i am going to post the vf page code. In this page you will be able to use mouseOn and menuOff. This post is aslo helpful to use javascript in the vf page. Using the java script you will be able to show a time bar on vf page according to the Country.

<apex:page sidebar="false" showHeader="false">
<apex:form >
<apex:stylesheet value="{!$Resource.StyleCss}"/>
<apex:includeScript value="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"/>
<apex:includeScript value="http://techtricky.com/wp-content/jquery/jquery.jclock.js"/>
<script type="text/javascript">
$(document).ready(
function() {
//$('#time').jclock();
$("#zones").change(function(){
if ($('#time-cont .time').length>0){ $('#time-cont .time').remove();}
var offset = $(this).val();
if (offset == '') return;
$('#time-cont').append('<div class="time"></div>');
var options = {
format:'<span class=\"dt\">%A, %d %B %I:%M:%S %P</span>',
timeNotation: '12h',
am_pm: true,
fontFamily: 'Verdana, Times New Roman',
fontSize: '20px',
foreground: 'black',
background: 'yellow',
utc:true,
utc_offset: offset
}

$('#time-cont .time').jclock(options);

});
});
</script>

<style>
td.menuon { background-color: #0000FF; }
td.menuoff { background-color: #00008B; }
table tr td a font{

backgroundcolor:# white;
}

table tr td a font: hover{

backgroundcolor:#0000FF;
}
a.changeBlue:link { /* default link color */
color: white;
}
a.changeBlue:hover { /* change to blue on mouseover */
color: pink;
}
</style>
<table bgcolor="yellow" width="100%" style="position:fixed;">
<tr>
<td>
<center><table border="0" width= "80%">
<tr>
<td style="width:400px">
<apex:commandButton image="{!$Resource.FbImage}"/>  
<apex:commandButton image="{!$Resource.twitterImage}"/>  
<apex:commandButton image="{!$Resource.LinkedInImage}"/>
</td>
<td align="center" bgcolor="#DC143C">
<a class="changeBlue" href="#" style="text-decoration: none;"><font face="Blackadder ITC" size="4">services</font></a>
</td>
<td align="center" bgcolor="#DC143C">
<a class="changeBlue" href="#" style="text-decoration: none;"><font face="Blackadder ITC" size="4">trablehe cansio</font></a>
</td>
<td align="center" bgcolor="#DC143C">
<a class="changeBlue" href="#" style="text-decoration: none;"><font face="Blackadder ITC" size="4">portal do cleinte</font></a>
</td>
<td align="center" bgcolor="#DC143C">
<a class="changeBlue" href="#" style="text-decoration: none;"><font face="Blackadder ITC" size="4">contacto</font></a>
</td>
</tr>
</table>
</center>
</td>
</tr>
</table><br/><br/><br/><br/><br/><br/>
<center><table>
<tr>
<td>
<select id="zones">
<option value="">--Select--</option>
<option value="10">Australia</option>
<option value="-3">Brazil</option>
<option value="-5">Canada</option>
<option value="8">China</option>
<option value="1">Germany</option>
<option value="5.5">India</option>
<option value="9">Japan</option>
<option value="8">Malaysia</option>
<option value="12">Newzealand</option>
<option value="0">UK</option>
<option value="-5">US EST</option>
</select>
<div id="time-cont"></div>
</td></tr></table></center>
<center><table width="80%">
<tr>
<td style="width:400px">
<apex:image value="{!$Resource.Aimage}" height="100" width="100"/>
</td>
<td>
<table border="0" width="100%" >
<tr>
<td align="center" class="menuoff" onmouseover="className='menuon';" onmouseout="className='menuoff';">
<a href="#" style="text-decoration: none;"><font color="white" size="3">initial</font></a>
</td>
<td align="center" class="menuoff" onmouseover="className='menuon';" onmouseout="className='menuoff';">
<a href="#" style="text-decoration: none;"><font color="white" size="3">queem somas</font></a>
</td>
<td align="center" class="menuoff" onmouseover="className='menuon';" onmouseout="className='menuoff';">
<a href="#" style="text-decoration: none;"><font color="white" size="3">flag</font></a>
</td>
<td align="center" class="menuoff" onmouseover="className='menuon';" onmouseout="className='menuoff';">
<a href="#" style="text-decoration: none;"><font color="white" size="3">portfolio</font></a>
</td>
</tr>
</table>
</td>
</tr>
</table></center>
<center><table>

<tr>
<td>
<font color="#8B008B" size="6">Bem Vindo</font><br/>
          
          
<font color="#FF8C00" size="6">ao futro</font><br/>
<font color="#4169E1" size="6">em gesto de negocias</font>
</td>
<td>
<apex:image value="{!$Resource.Proffesion}" height="300" width="400"/>
</td>
</tr>
</table></center>
<table border="0" bgcolor="#0000FF" width="100%" >
<tr>
<td>
<center>
<table border="1" bgcolor="#0000FF" width="80%">
<tr>
<td align="center">
<font color="yellow" size="3">Salesforce CRM</font><br/>
<apex:image value="{!$Resource.network}" height="100" width="100"/><br/>
<font color="white" size="1">Tenha uma visão 360° de tudo o que está acontecendo na sua empresa.</font>

</td>
<td align="center">
<font face="Blackadder ITC" color="yellow" size="3">Business Intelligency</font><br/>
<apex:image value="{!$Resource.BrainImage}" height="100" width="100"/><br/>
<font color="white" size="1">Mensure os resultados do seu negócio em tempo real com indicadores de desempenho.</font>
</td>
<td align="center">
<font style="font-family: DakotaRegular" color="yellow" size="3">Marketing BPO</font><br/>
<apex:image value="{!$Resource.bulbimage}" height="100" width="100"/><br/>
<font color="white" size="1">A Atile.branding possui uma equipe de profissionais especializados para servir sua empresa da maneira mais eficiente possível.</font>
</td>
<td align="center">
<font color="yellow" size="3">Desimolvimento web</font><br/>
<apex:image value="{!$Resource.searchimage}" height="100" width="100"/><br/>
<font color="white" size="1">Equipes treinadas e preparadas para a solução que a sua empresa precisa..</font>
</td>
</tr>
</table>
</center>
</td>
</tr>
</table>
</apex:form>
</apex:page>

For Demo Use Following Link:-
http://vikasgaur-developer-edition.ap1.force.com/AtilePage

Apex Cloud

Thursday, January 23, 2014

CSS in Vf page

No comments:

Post a Comment

About Me

Blog Archive