• Harpreet Dhillon
  • NEWBIE
  • 0 Points
  • Member since 2014

  • Chatter
    Feed
  • 0
    Best Answers
  • 0
    Likes Received
  • 0
    Likes Given
  • 0
    Questions
  • 1
    Replies

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>
  • December 03, 2013
  • Like
  • 0