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, 2013 at 12:32
  • Thanks, I will see how I can improve the css using specificity. May 24, 2013 at 14:03

1 Answer 1

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. May 24, 2013 at 13:29
  • @Neeraj I've updated my answer. See the screenshot. Maybe you just test my css without your whole code? May 24, 2013 at 13:36
  • Dude, its still not working :( I even added that style without my other code but that blue still stays. May 24, 2013 at 13:48
  • @Neeraj What browser? May 24, 2013 at 13:50
  • I am using Chrome May 24, 2013 at 13:59

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .