2

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

Improve this question
3
  • 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
    Commented Jul 3, 2017 at 17:21
  • I added a snapshot and i am using standard components.
    – ijason03
    Commented Jul 3, 2017 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
    Commented Jul 3, 2017 at 18:10

2 Answers 2

Reset to default
0

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
2

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

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

    <head>
      <apex:slds/> 
    </head>

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

    </apex:page>
Improve this answer

You must log in to answer this question.

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