+ Start a Discussion

Customizing Salesforce Style

First of all, I'm a complete newbie to SF development. I tried reading the visual force documentation and all I get his source code, but no idea where it goes, how to start, or even do the simplest thing. Basically, what I would like to do is customize the existing salesforce pages, and then eventually work my way towards building custom pages. Here are two things that have really been bugging me:


How do you change the logo to your company logo? This is an unacceptable product to demo our operations to outside customers with SalesForce written all over it.


How can I apply my own style to salesforce globally as depicted in this screenshot? http://www.zendesk.com/images/partners/getsatisfaction/screenshot_sf_main_lg.png


To add your own logo to the top left corner of Salesforce you will need to:


  1. Upload the image into your Documents object. The image will need to be 230px wide by 55px high.
  2. Create a custom App - when you do this, you will see you have the ability to add a custom logo.
The image you have linked to does not show a custom style - rather, this is the new Salesforce.com UI (user interface). This is publicly available for all Salesforce Orgs. You will need to activate it and this can only be done Org-wide - not per user or per profile. To activate go to:
Setup > Customise > User Interface
Then check the box next to 'Enable New User Interface Theme'. You will need to be a System Administrator, or have the 'Customize Application' permission to do this.
You could create a custom skin for Salesforce using a custom CSS, but to implement it you would need to recreate every one of your pages using Visualforce pages (which you can make look however you like). There would be a lot of work involved and you would need to have at least a basic understanding of CSS and HTML code.
Hope that helps.
The Doctor



You can include CSS and javascript in your pages to modify the looks of Salesforce. But its not nice. you shouldn't, i dont know if its within the eula either.


As someone suggested if you need to customize the pages you have to create custom Visual force pages.



<apex:page showHeader="true" > 

	<style type="text/css">
			padding:60px 60px 60px 0;
			background: url(http://www.wonderbackgrounds.com/nature/cloud/backgrounds/cloud_2.gif);
			background: #fff;
			border: solid 2px #555;
			border-top: none;
		.tabNavigation  {
			border-bottom:2px solid #555;
			background: none !important;
		.multiforce #toolbar {
		.bPageHeader, .bPageHeader td.left {
			border-right: solid 2px #555;
			border-left: solid 2px #555;
		.noTableFooter {

 (Styles are horrible, its just for showing that you can change it all)


And you can override styles of the standard ui. Thats the closest you can. BUT still you gotta create custom pages, you could add a Visualforce page to the layout of your objects and include it to only add the css, or stuff like that, but its not pretty.



Awesome guys thanks. I was able to get the new style going and it looks great. Now about the logo.... I am a web developer so I am proficient in css/html.


I can practice on the custom object I have called Claims. Where do I go to create a visual force for this object's layout, and insert the CSS?