function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
sreenathsreenath 

how to change themes of salesforce crm

Hi developers,

                        how can we change the default Salesforce CRM UI.

defaultly some look and feel is observing in CRM but is possible to change as we customize some social networks themes. How can we? plz suggest options.

Pradeep_NavatarPradeep_Navatar

You can not change the theme of salesforce CRM UI, however you can select the options to change theme as latest, which insures that latest changes in UI theme will reflect in your org. For that go to setup-> Customize-> UserInterface-> select the checkbox (Enable New User Interface Theme) and click on save.
sreenathsreenath

Hi Pradeep,

                   I know the enable theme for updation, but i saw some colorful headers with different images of there custom apps. how can we change like the way they change in their apps.

                    

               thanks for your reply........
Etherios DanEtherios Dan

Salesforce comes with uses a stylesheet on all VF pages. You can see the stylesheet  by going to {orgname} /sCSS/Theme2/en/common.css. That way you can see what CSS properties you may want to override on your page.

 

To Completely overide the default stylesheet set ShowHeader to False. 

 

<apex:page showHeader="false" standardStylesheets="false">

 

This will hide the CRM Header.

 

If you want to replace the CRM header, you don't have the ability to do that. You can use theme1, theme2 or hide it.

 

 

Dan Grandquist
Etherios - Technical Architect

 

 
bmabma

When you create an application, you can set the logo for it.

 

1) Setup -> App Setup -> Create -> Apps

2) Select Edit for the application you create

3) Click Edit and replace the logo for the application.
sreenathsreenath

Hi bma,

            Thanks for your reply for logo setup. how to remove standard blue color on top of the account which contains sfdc logo.
bmabma

For Standard App, like Sales, Call Center, and etc, you can't change the logo.

 

What you can do is to add the Account tab into a custom app, and change the logo there.

The blue color would still remain, but the SFDC logo would be replaced by the logo you selected.
HarpreetHarpreet

HI!

Use HTML Home Page Components to set themes for Salesforce. The below mentioned video explains it in a detailed manner.

 

 

http://www.youtube.com/user/forSalesforce#p/a/u/0/EdNJwzhok_M

 

Regrds,

Harpreet
HarpreetSHarpreetS

Hi Sreenath

 

HTML Homepage components can be used as a theme changer if proper info is provided there...

Pasting this in a Visualforce Page or a HTML Home page component should show you changing themes is possible:

 

<br><style>*{text-shadow: 0px 0px .2px green,0px 0px .2px azure ,1px 1px .2px azure ,2px 2px .2px azure ,-2px -2px .2px azure ,-1px -1px .2px azure !important;}.bodyDiv, .bodyDiv *,  #AppBodyHeader,#AppBodyHeader *,.tabNavigation,.tabNavigation *{allowtransparency:true!important;background-image:none!important;border:none!important; background-color:transparent!important;}.sfdcBody{background-image: url(https://dhillon-developer-edition.my.salesforce.com/resource/1312561833000/CarboniteCCPack__png2)!important;background-position: -150px -91px!important;background-repeat:repeat!important;background-attachment:fixed!important;}#userNav{background-color:indigo!important;}.navLinks{background-color:indigo!important;position:fixed!important;top:2px!important;right:14%!important;color:red!important;background-attachment:fixed!important;}#tsid{background-color:indigo!important;position:fixed!important;top:2px!important;right:4%!important;background-attachment:fixed!important;}img#phHeaderLogoImage{opacity:0.0 !important;filter:alpha(opacity=00) !important;}#tabBar{background-color:indigo!important;}.tabNavigation{position:fixed!important;background-color:indigo!important;z-index:200!important;top:2px!important;left:15%!important;}body .x-btn button,\nbody .btn,\nbody .btnImportant,\nbody .btnDisabled,\nbody .btnCancel,\nbody .menuButton .menuButtonButton,\nbody .menuButton .menuButtonMenu a,\nbody .menuButton .menuButtonMenu input.theOption,\nh1, h2, h3, h4, h5, h6\n.reportTab .bWizardBlock .pbWizardTitle,.reportTab .bWizardBlock .chartStep .pbDescription,.bWizardBlock .pbBody .bPageBlock .pbLinks a span,.chatterShowHideFeed a,.chatterFollowUnfollow .followLink a:hover .linkText,body.allTabTab .bPageTitle .ptBody .content,body.allTabTab .bDescription,.sysAdminTab .bPageTitle .ptBody .content,.homeTab .bPageTitle .ptBody .content,.labelCol,.allTabTab .bPageTitle .ptBody .content, #userNav *,#userNav,body .bPageBlock .pbHeader .pbHelp .help a.linkCol:hover .linkSpan,body .bPageBlock .pbBody .pbSubblock .pbSubbody a:hover .helpLink,body .bWizardBlock a:hover .helpLink,body .bPageTitle .tagDropDown .tagDropDownContent .tagHelp a:hover span,body .bMyDashboard .pbHeader .pbHelp a:hover,.tab{text-shadow: 0 0 0.3em white, 0 0 0.3em yellow!important;color:white!important;font-style: auto!important;}a, a *,.dataCol{text-shadow: 0 0 0.3em white, 0 0 0.3em yellow!important;color:indigo!important;}.x-btn, button, .btn, .btnImportant, .btnDisabled, .btnCancel,.menuButton, .menuButtonButton,.tabNavigation,.tabNavigation *{background-image: url(https://dhillon-developer-edition.my.salesforce.com/resource/1312561833000/CarboniteCCPack__png2)!important;background-color:black!important;color:white!important;border:2px solid red!important;}td.searchCell, td.searchCell *,{border:1px solid red!important;color:yellow!important;background-color:darkslateblue!important;}*{background-color: rgba(0, 0, 0, 0.5)!important;}button,.btn,.btnImportant,.btnDisabled,.btnCancel{background-color:rgba(239, 247, 251, .4)!important;border:2px rgba(239, 247, 251, .6)!important;}</style>

 

 

Warm Regards,

Harpreet Dhillon
HarpreetSHarpreetS
Sreenath,  also if someone knows Javascript,  please help completing the easiest color changer for Salesforce that can be made possible. 
Paste this in an HTML Homepage component and choose your  colors yourself courtesy JSColor:
The only shortcoming is the ability to save colors permanently..
<script type="text/javascript" src="http://jscolor.com/jscolor/jscolor.js">var elms = document.getElementsByTagName('html')[0].style.backgroundColor;</script>Header Color:&nbsp;<input class="color {pickerFaceColor:'transparent',pickerFace:3,pickerBorder:0,pickerInsetColor:'black'}" onchange="document.getElementsByTagName('tbody')[0].style.backgroundColor = '#'+this.color" onfocus="document.getElementsByTagName('html')[0].style.backgroundColor = '#'+this.color" autocomplete="off" style="background-color: rgb(255, 255, 255); color: rgb(0, 0, 0); "><p></p>Tabs and Body Color:&nbsp;<input class="color {pickerFaceColor:'transparent',pickerFace:3,pickerBorder:0,pickerInsetColor:'black'}" onchange="document.getElementsByTagName('tr')[3].style.backgroundColor = '#'+this.color" onfocus="document.getElementsByTagName('tr')[3].style.backgroundColor = '#'+this.color" autocomplete="off" style="background-color: rgb(255, 255, 255); color: rgb(0, 0, 0); "><p></p>HTML1 Color:&nbsp;<input class="color {pickerFaceColor:'transparent',pickerFace:3,pickerBorder:0,pickerInsetColor:'black'}" onchange="document.getElementsByTagName('tr')[2].style.backgroundColor = '#'+this.color" onfocus="document.getElementsByTagName('tr')[2].style.backgroundColor = '#'+this.color" autocomplete="off" style="background-color: rgb(255, 255, 255); color: rgb(0, 0, 0); "><p></p>TBody1:&nbsp;<input class="color {pickerFaceColor:'transparent',pickerFace:3,pickerBorder:0,pickerInsetColor:'black'}" onchange="document.getElementsByTagName('tr')[4].style.backgroundColor = '#'+this.color" onfocus="document.getElementsByTagName('tr')[5].style.backgroundColor = '#'+this.color" autocomplete="off" style="background-color: rgb(255, 255, 255); color: rgb(0, 0, 0); "><br>
Regards,
Harpreet Dhillon
Marco_MaltesiMarco_Maltesi

hi,

i copied this code into a salesforce page but i dont know how tu use it (to activate the new theme)

thinks
MadhanMohan1234MadhanMohan1234

It is not working while we are copying this Java script in the home page components and added in the home page layout
Raghavendra reddy.dRaghavendra reddy.d
<apex:page >
  <style>
*
  {
  background-color-black!important;
  background-image:none!important;
  color:orange!important;
  font:style:bold!important;
  border:blue!important;
  }
  </style>
</apex:page>
krishn chaithanyakrishn chaithanya
Hi,
    The above code i have copied and add it in home page components and added in the home page layout.......
  And my home page was not changed.... can u please explain a littile more...
 
AhmedPotAhmedPot
I wanted to change salesforce header using javascript in home page components. But looks like Salesforce doesn't support it anymore.

"Salesforce does not recommend or support the use of JavaScript in HTML home page components (and never has) -- particularly if the JavaScript is used to interact with markup served by Salesforce, because we can't guarantee that our page markup will remain the same between releases."

https://help.salesforce.com/apex/HTViewSolution?urlname=Home-Page-Components-Changes-Starting-Summer-14&
Muhammad Usman 36Muhammad Usman 36
one of my fav t (https://www.opportunitiescircle.com/)heme. best guys. thumbs up. nice work
Gary RalstonGary Ralston
Hi sreenath, 

Yes, it is possible to customize the look and feel of the Salesforce CRM UI. Here are some options to consider :
  • Custom Themes : Salesforce provides an easy way to create custom themes using the Theme Builder. With this tool, you can change the color, font, and background of your UI components to match your branding.
  • Custom CSS : If you have some knowledge of CSS, you can create custom CSS styles to apply to your Salesforce UI. You can use CSS to customize fonts, colors, layout, and more.
  • Custom Lightning Components : Salesforce's Lightning Component Framework allows you to create your own components that can be used within your CRM. You can use this framework to create custom UI components, including custom pages, forms, and popups.
  • Third-Party Apps : There are several third-party apps available on the Salesforce AppExchange that can help you customize your CRM UI. These apps offer various features such as custom themes, layouts, and branding.
If you're interested in enabling dark mode in Salesforce, I would recommend visiting the article at https://arrify.com/salesforce-dark-mode/. This resource offers comprehensive guidance on the steps to activate dark mode, along with its associated benefits.
 
ISRAEL JeremiahISRAEL Jeremiah
It is not working while we are copying (https://empowermentopportunities.com)this Java script in the home page components and added in the home page layout