Apex Code Development You need to sign in to do that
Don't have an account?
Matthew Allen Background colour and top and bottom banner of detail page
Hi,
I am using the below very basic VF code.
I would like to add a banner at the top and bottom in a colour of my choice that also included a reference to a field, for example Account.Name.
I would also like to change to the background colour to a colour of my choice.
Is this possible?
<apex:page standardController="Account" sidebar="false" showheader="false" readOnly="true" >
<apex:form >
<table width="100%">
<tr>
<td style="width:40%"><apex:outputLabel style="vertical-align:middle; text-align:center;font-family:calibri;font-size:50px;color:#004489;">
<apex:outputField label="AccNAme" value="{!Account.Group_View_Account_Name__c}" /></apex:outputLabel></td>
</tr>
<tr>
<td style="width:40%"><apex:outputLabel style="vertical-align:top; text-align:centre;font-family:calibri;font-size:20px;color:#ffcc00;">
<apex:outputField label="AccNAme" value="{!Account.Powered_by_Salesforce_com__c}" /></apex:outputLabel></td>
</tr>
</table>
</apex:form>
<apex:detail relatedList="false"/>
<apex:relatedList list="Group_Relationships__r"/>
<apex:relatedList list="Activities__r"/>
<apex:relatedList list="Opportunities1__r"/>
<apex:relatedList list="Threats1__r"/>
<apex:relatedList list="Cases__r"/>
</apex:page>
I am using the below very basic VF code.
I would like to add a banner at the top and bottom in a colour of my choice that also included a reference to a field, for example Account.Name.
I would also like to change to the background colour to a colour of my choice.
Is this possible?
<apex:page standardController="Account" sidebar="false" showheader="false" readOnly="true" >
<apex:form >
<table width="100%">
<tr>
<td style="width:40%"><apex:outputLabel style="vertical-align:middle; text-align:center;font-family:calibri;font-size:50px;color:#004489;">
<apex:outputField label="AccNAme" value="{!Account.Group_View_Account_Name__c}" /></apex:outputLabel></td>
</tr>
<tr>
<td style="width:40%"><apex:outputLabel style="vertical-align:top; text-align:centre;font-family:calibri;font-size:20px;color:#ffcc00;">
<apex:outputField label="AccNAme" value="{!Account.Powered_by_Salesforce_com__c}" /></apex:outputLabel></td>
</tr>
</table>
</apex:form>
<apex:detail relatedList="false"/>
<apex:relatedList list="Group_Relationships__r"/>
<apex:relatedList list="Activities__r"/>
<apex:relatedList list="Opportunities1__r"/>
<apex:relatedList list="Threats1__r"/>
<apex:relatedList list="Cases__r"/>
</apex:page>
Yes you can do this by using simple CSS and javascript code.
To change the background color: Add this code to your page section:
<style>
body{
background-color: <User your color code say : #ccc for grey>;
}
<style>
and for adding a banner: add below code (I am using jquery and for that I am using jquery CDN):
Add below code just after <apex:page standardController="Account" sidebar="false" showheader="false" readOnly="true" >
<div id='MyCustomHeaderBanner' style='width: 100%; float: left;'></div>
and add below javascript code
<script>
window.onload = function() {
var myBannerHTML = "<div style='background-color: #555555; width: 100%; float: left;'> My Banner : My Banner Data : {!Account.Name}</div>";
document.getElementById("MyCustomHeaderBanner").innerHTML = myBannerHTML;
};
</script>
Hope this will help you
Thanks,
Sanjay
All Answers
Yes you can do this by using simple CSS and javascript code.
To change the background color: Add this code to your page section:
<style>
body{
background-color: <User your color code say : #ccc for grey>;
}
<style>
and for adding a banner: add below code (I am using jquery and for that I am using jquery CDN):
Add below code just after <apex:page standardController="Account" sidebar="false" showheader="false" readOnly="true" >
<div id='MyCustomHeaderBanner' style='width: 100%; float: left;'></div>
and add below javascript code
<script>
window.onload = function() {
var myBannerHTML = "<div style='background-color: #555555; width: 100%; float: left;'> My Banner : My Banner Data : {!Account.Name}</div>";
document.getElementById("MyCustomHeaderBanner").innerHTML = myBannerHTML;
};
</script>
Hope this will help you
Thanks,
Sanjay