1

I am trying to change the css style of the standard Salesforce page. So far I have successfully changed most of the element style. I created a custom component in the left side bar and have overridden Salesforce css with my own custom css. There is one element I am not able to override. The "Create New" button on the left side bar of the Home page.

I am using the following CSS style to change the buttons color from its default blue to red.

      #sidebarDiv #createNew *{
      background-color: #952828!important;
     }

It works fine except one problem - the button is partially covered and there is small blue portion still visible on the right.

enter image description here The complete css style is as follows:

<script type="text/javascript">
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';
</script>

<style>

/* set the background color of the header and the title of the left side bar components */
.sfdcBody, .sidebarModuleHeader, #AppBodyHeader, #phHeader *{
background-color: #7e0b0b!important;
font-family: "Gill Sans",Georgia,Serif !important;
color: #c0c0c0!important;
}

/* set the background color of main body to grey */
#bodyCell {
background-color: #c0c0c0!important;
}

/* set the font to Gill Sans in the whole body */
#bodyCell *{
font-family: "Gill Sans",Georgia,Serif !important;
}

/*set the background color of the search input field and the text color*/
#phSearchInput {
background-color: #FFFFFF!important;
color: #8d8284!important;
}

/*set the background-color of the search button */
#phSearchButton {
background-color: #c0c0c0!important;
color: #7e0b0b!important;
}

#tsidButton {
background-color: #FFFFFF!important;
}

/* set the background color of the tab container*/
#tabContainer *{
background-color: #c0c0c0!important;
font-family: "Gill Sans",Georgia,Serif !important;
border: none !important;
border-top-left-radius: 0.1em !important;
border-top-right-radius: 0.1em !important;
}

/* set the background color of the left sidebar header*/
.sidebarModuleBody {
background-color: #952828!important;
font-family: "Gill Sans",Georgia,Serif !important;
}

/*the create new button on the left sidebar */
#sidebarDiv #createNew *{
background-color: #952828!important;
}

/*set the color of user name button to grey on hover */
.linkElements:hover {
background-color: #c0c0c0!important;
}

#tsidButton{
background-color: #c0c0c0!important;
}

#tsidLabel, #tsid-arrow {
color: none!important;
}

#home_Tab, #Contact_Tab, #report_Tab, #Dashboard_Tab, #AllTab_Tab{
color: #c0c0c0!important;
background-image: none!important;
background-color: #c0c0c0!important;
}

.tabNavigation .allTabsArrow, .tabMenu .allTabsArrow {
    height: 12px !important;
    width: 12px !important;
    font-family: "Gill Sans",Georgia,Serif !important;
    background-color: #952828!important;
}
.outer, #sidebarCell *{
font-family: "Gill Sans",Georgia,Serif !important;
color: #FFFFFF!important;
}

</style>

I am not able to understand why that small blue portion remains. The CSS might be little crude as I am still working on most of the things so please feel free to let me know if I have done anything wrong or if there is a better way to do it.

Thanks.

2
  • I notice that you have a lot of !important in your styles -- you may have better luck targeting your style tweaks by taking advantage of CSS specificity - coding.smashingmagazine.com/2007/07/27/… – Benj May 24 '13 at 12:32
  • Thanks, I will see how I can improve the css using specificity. – codeinprogress May 24 '13 at 14:03
1

Try to insert this overriden style:

#sidebarDiv .menuButton {
    background: none;
}

This is my result (tested in Chrome26, Firefox21 and IE8):

enter image description here

5
  • It did not made any difference. That small blue portion still remains. – codeinprogress May 24 '13 at 13:29
  • @Neeraj I've updated my answer. See the screenshot. Maybe you just test my css without your whole code? – Sergej Utko May 24 '13 at 13:36
  • Dude, its still not working :( I even added that style without my other code but that blue still stays. – codeinprogress May 24 '13 at 13:48
  • @Neeraj What browser? – Sergej Utko May 24 '13 at 13:50
  • I am using Chrome – codeinprogress May 24 '13 at 13:59

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.