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
amilawamilaw 

Changing Salesforce Theme

Hi All

Some developers suggest to create a home page component with some CSS and JAVASCRIPT and put it into the home page layout which will allow us to change the salesforce standard theme. (Blue color theme). Is this recomended. will this kind of thing affect the normal functionality if salesforce.com changed html structure in a new release.

Thanks.

 

sample for such a CSS and javascript shown below

 

document.getElementsByTagName('nav')[0].style.border="1px solid white";

document.getElementsByClassName('left')[0].style.visibility = 'hidden';

document.getElementById('phHeaderLogoImage').style.visibility = 'visible';

document.getElementsByClassName('right')[0].style.visibility = 'hidden';

document.getElementsByClassName('multiforce')[0].style.visibility = 'visible';

document.getElementsByTagName('nav')[0].style.borderTopLeftRadius = '.5em'; 

document.getElementsByTagName('nav')[0].style.borderTopRightRadius = '.5em'; 

document.getElementsByTagName('nav')[0].style.MozBorderRadiusTopleft = '.5em'; 

document.getElementsByTagName('nav')[0].style.MozBorderRadiusTopright = '.5em'; 

document.getElementsByTagName('nav')[0].style.WebkitBorderTopLeftRadius = '.5em';

document.getElementsByTagName('nav')[0].style.WebkitBorderTopRightRadius = '.5em';



<!--

 @ author Harpreet Dhillon

 @ email hsdmail@yahoo.com

 @ created 06-07-2012 

 @ free to use and modify, please do not remove this comment.

-->

<style>

.sidebarModuleHeader

{

background-image: transparent!important;

background-color: #3B5998!important;

color: #FFFFFF!important;

background-image: url(http://www.glittergraphicsite.com/background/pattern/background-pattern-005.jpg)!important;

<!-- 

Upload the file to your static resourse, and change the backround-image's url to the direct link of the static resourse. 

It is a much better way of using images. Is strongly recommended, there are no secuirty risks.

Steps to retireive direct link:

1. Upload image to Static Resource.

2. Click on Static Resource's Name from the list.

3. Right click the View File link on the Static Resource's detail page, and select Copy Link Location.

4. The Static Resource's Link comes in this format: https://na11.salesforce.com/resource/1295402480000/xyz

-->

background-repeat: repeat!important;

background-attachment: fixed!important;

}



.sfdcBody, #AppBodyHeader, #AppBodyHeader *{

background-image: url(http://www.glittergraphicsite.com/background/pattern/background-pattern-005.jpg)!important;

<!-- 

Upload the file to your static resourse, and change the backround-image's url to the direct link of the static resourse. 

It is a much better way of using images. Is strongly recommended, there are no secuirty risks.

Steps to retireive direct link:

1. Upload image to Static Resource.

2. Click on Static Resource's Name from the list.

3. Right click the View File link on the Static Resource's detail page, and select Copy Link Location.

4. The Static Resource's Link comes in this format: https://na11.salesforce.com/resource/1295402480000/xyz

-->

background-repeat: repeat!important;

background-attachment: fixed!important;

background-color: none!important;

color: #FFFFFF!important;}

#AppBodyHeader{

background-image: none!important;

}

.tabNavigation .allTabsArrow, .tabMenu .allTabsArrow {

    background-image: url("/img/alohaSkin/addTabs.png")!important;

    height: 12px !important;

    width: 12px !important;

}

<!--The below mentioned line removes the Logo from the page's top left corner. Remove it in case its not required-->

#phHeaderLogoImage {display:none!important;}

</style>
Best Answer chosen by Admin (Salesforce Developers) 
bob_buzzardbob_buzzard

Its not recommended as its fragile - if Salesforce change the structure/styles that they use in their pages then all of your customizations will disappear.  More information at:

 

http://www.salesforce.com/us/developer/docs/pages/Content/pages_styling_salesforce.htm

 

note the warnings near the bottom of the article. I'd never do this for a customer without them agreeing in writing that they accept it might break at any time and not be fixable.

 

Using !important can also be considered bad practice, as it effectively fixes the style and overrides not just the Salesforce style, but any others that use those classes. For a discussion on when it is appropriate to use this see:

 

http://css-tricks.com/when-using-important-is-the-right-choice/

 

All Answers

bob_buzzardbob_buzzard

Its not recommended as its fragile - if Salesforce change the structure/styles that they use in their pages then all of your customizations will disappear.  More information at:

 

http://www.salesforce.com/us/developer/docs/pages/Content/pages_styling_salesforce.htm

 

note the warnings near the bottom of the article. I'd never do this for a customer without them agreeing in writing that they accept it might break at any time and not be fixable.

 

Using !important can also be considered bad practice, as it effectively fixes the style and overrides not just the Salesforce style, but any others that use those classes. For a discussion on when it is appropriate to use this see:

 

http://css-tricks.com/when-using-important-is-the-right-choice/

 

This was selected as the best answer
Harpreet DhillonHarpreet Dhillon

Hello Bob, Ami,

 

I wrote that code 18 months ago and it still works today.

I also totally agree with you Bob, it's fragile, and may break or fail any day. 

 

But, even if it breaks or fails, I am sure I know how to fix that because:

1. Salesforce.com only uses html, css and/or javascript to design their pages (and nothing else).

2. If you are good in Javascript styling and CSS styling, there is no such thing on a page which you cannot modify using them.


In the screenshots below, you can see how much flexibile a SF page can be:

1. https://db.tt/8O3FMqQw (http://db.tt/8O3FMqQw" target="_blank)

2. https://db.tt/G6uYznpz (https://db.tt/G6uYznpz" target="_blank)


And, the reason I write !important next to every CSS line is due to the fact that I always want it to override what SF is using. Suppose that I want to make SF page's header brown, but don't write !important next to it. 

It may or may not become brown (which is not what we want). Writing !important; would always make it brown though (what we want).

 

Thanks!
Harpreet_DhillonHarpreet_Dhillon
Thank you Salah, I am glad to know that you liked the video!

For finding more keywords like phHeaderLogoImage:
  1. Open an SF page in Google Chrome.
  2. Right click the section which you want to modify and select Inspect Element.
  3. In the console which opens up at the bottom of a page, note down the id and class of that particular section. It's better to note the section's parent id/class and it's child's id/class because sometimes using the section's id wouldn't work.

To test whether you've identified the section correctly or not:
You can create a test VF page and enable "Development Mode" for your user if its not enabled
Try writing code for the section's Id or class which you found using Inspect element.

For replacing the initial SF logo, you can hide the initial logo first, and then add a logo in its parent div (phHeader).
You need to make sure that the new logo is wide enough to cover most of the page's width.
In case you need to use a small logo, you can create a transparent png image which has company's logo positioned at its top left.

In my example I'll use this image as the logo:
http://www.microsoft.com/africa/4afrika/images/banner_access.png

I'll use Javascript styling and css to get the desired result.
Kindly create a test VF page and paste the code mentioned below to see how it would look:
<apex:page>
<script>
document.getElementById('phHeaderLogoImage').style.visibility = 'hidden';
</script>
<style>
#phHeader
{
background: url(http://www.microsoft.com/africa/4afrika/images/banner_access.png) no-repeat top left fixed!important; //replace it with your company's logo URL
  -webkit-background-size: cover!important;
  -moz-background-size: cover!important;
  -o-background-size: cover!important;
  background-size: cover!important;
}
</style>
</apex:page>

Do let me know in case you need additional information on it, or if you have any other concern (which I would be glad to answer).

Thanks,
Harpreet
Harpreet_DhillonHarpreet_Dhillon

No problem Salah!

There's no limit in general about the way a standard page could be modified: https://www.dropbox.com/s/pp1de0m65skew6j/theme1.png

Regarding showing the stylesheet on pages which don't show a home page component (Dashboards, Setup, Report, Chatter, etc.), there's no place from where we can apply our stylesheet on these pages. If SF can provide a way for us to add html code on these pages as well (like we can do via html home page components in a sidebar), we can easily change what is being displayed.

Regarding your question about hiding loading of the page which shows the SF page and its former stylesheet, I am not 100% sure whether it is possible; but I believe that there should be some easy javascript code which we can use to not display the page contents until the page has completely loaded.

Thanks,

Harpreet