+ Start a Discussion
Matthew AllenMatthew 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;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <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;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <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>

 
Best Answer chosen by Matthew Allen
SKSANJAYSKSANJAY
Hi Matthew,

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

SKSANJAYSKSANJAY
Hi Matthew,

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
This was selected as the best answer
Matthew AllenMatthew Allen
Thanks for this, a big help.