I have a visualforce page embedded in the Case layout and the buttons and text boxes don't match the styling in service console. I used view source to view the css file in the service console and I thought about referencing them in my page but the css files have this at the top:

  • This code is for Internal Salesforce use only, and subject to change without notice.
  • Customers shouldn't reference this file in any web pages.

Does anyone have an easier way to style visualforce pages to match the service console?

Serial Search button doesn't match

  • You can copy those CSS and make your own static resource but it is not recommended. But if you use standard components it must have the same look. can you please post a snap for better understanding – Avijit Chakraborty Jul 3 '17 at 17:21
  • I added a snapshot and i am using standard components. – ijason03 Jul 3 '17 at 17:48
  • Thanks for adding. Have you tried copying class attribute of those button to styleClass of the command button? Are you viewing the above section in lightning then I will suggest using apex:slds . developer.salesforce.com/docs/atlas.en-us.pages.meta/pages/… – Avijit Chakraborty Jul 3 '17 at 18:10

You need to use Salesforce Lightning Design System stylesheet which closely matches with Salesforce Console.

Approach 1: Include the css in static resource and start using it

<apex:stylesheet value="/resource/slds/assets/styles/salesforce-lightning-design-system-ltng.css"/>

Approach 2: Using apex:slds

Allows Visualforce pages to reference Lightning Design System styling. Use this component instead of uploading the Lightning Design System as a static resource.

Include in a Visualforce page to use Lightning Design System stylesheets in the page.

In general, the Lightning Design System is already scoped. If you set applyBodyTag or applyHtmlTag to false, however, you must include the scoping class slds-scope. Within the scoping class, your markup can reference Lightning Design System styles and assets.

| improve this answer | |

This will take care of your page to match lightning style see here

<apex:page showHeader="false" applyHtmlTag="false" applyBodyTag="false">


    <div class="slds-scope">
      <!-- Your SLDS-styled content -->
    <button class="slds-button slds-button_neutral">Button</button>

| improve this answer | |

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.