0

I want to change below homepage components header color. Can we change the color where Support is written.

Can we create below type of design and color -

Desired Functionality Mockup

Improve this question
2
  • Is this component created by you? I mean can you manage it?
    – Ruslan Vekua
    Commented May 3, 2016 at 17:32
  • no i hvnt done it .. but trying to do it by vf page... i just wanted to know can change the blue color header
    – sfdc_to_learn
    Commented May 3, 2016 at 17:35

2 Answers 2

Reset to default
1

Well, here you go.

Step 1 - create VF page like below:

<apex:page sidebar="false" showHeader="false">
  <head>
  <style>
  .sidebarModuleHeader h2 {
    padding: 5px 9px;
    display: block;
    background: transparent url('/img/alohaSkin/sidebar_sprite.png') -9px bottom no-repeat;
}
 .sidebarModuleHeader {
    padding: 0;
    color: #fff;
    background: #1797c0 url('/img/alohaSkin/sidebar_sprite.png') -209px -2px no-repeat;
        background-color: green;
}
 .sidebarModule {
    background: #cfeef8 url('/img/alohaSkin/sidebar_sprite.png') -9px bottom no-repeat;
}
</style>

  </head>
    <body>
        <div class="recentItemModule sidebarModule">
            <div class="sidebarModuleHeader brandPrimaryBgr">
                <h2 class="brandPrimaryFgr">Support</h2>
            </div>
            <div class="sidebarModuleBody">
                <div class="SidebarShortcut">
                    <div class="mruItem">
                        <ul>
                            <li><a href="/item1">Item 1</a></li>
                            <li><a href="/item2">Item 2</a></li>
                            <li><a href="/item3">Item 3</a></li>
                        </ul>                                                                
                    </div>
                </div>
            </div>
        </div>
    </body>    
</apex:page>

Step 2 - create Home Page Component and make sure "Show label" is unchecked(this hides the component header that is outside of an iframe.)

Look at the VF page above. There is line <h2 class="brandPrimaryFgr">Support</h2> this will be your header.

Home page component creation: Home page component creation

Result:
result

Step 3 - Edit your HTML and CSS styles depending on your requirement.

Hope this helps you.

Improve this answer
2
  • I believe even the background of item1, 2,3 can be changed from sky blue to some other color.
    – sfdc_to_learn
    Commented May 4, 2016 at 5:59
  • Yes, it can be changed.
    – Ruslan Vekua
    Commented May 4, 2016 at 12:17
0

Hi @Sid it can't be possible even I'm also try to change background color of homepage and apps Selection.But previously it is supported with custom visualforce page.

But It's disabled by salesforce.Even you try to add that component to homepage it shows our custom code there.

Better you have to search in Lightning..

Improve this answer

You must log in to answer this question.

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