function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
JeriMorrisJeriMorris 

Display pageBlock and pageBlockSections with new UI Theme

I'm working in a Developer Edition org in which the new UI theme is enabled. When I create a VF page like this:

 

<apex:page standardController="Contact" tabStyle="Contact">
<apex:form >
<apex:sectionHeader title="{!contact.Name}" subTitle="Contact"/>
<apex:pageBlock title="Details">
  <apex:pageBlockSection title="Basic Information" columns="2">
    <apex:outputField value="{!contact.FirstName}" />
    <apex:outputField value="{!contact.Phone}" />
  </apex:pageBlockSection>
</apex:pageBlock>
</apex:form>
</apex:page>

 

the page renders using the old theme -- it has purple borders and pageBlockSection bars. How do I get these components to render using the new UI theme?

Edwin VijayEdwin Vijay

Sounds strange!! The new UI theme is automatically applied to your visualforce pages....

 

Do your standard salesforce pages display with the new UI theme??
JeriMorrisJeriMorris

Yes, when I look at a standard Contact page, it's definitely using the new UI Theme. But my Visualforce page uses the old theme.
MycodexMycodex

Was there ever a solution for this? I'm finding I'm having the same issue. I thought it was because I didn't have standardStylesheets="true" but that didn't do anything either.
JeriMorrisJeriMorris

I never found a solution to this issue. I'm sorry you're having the same problem, but also kind of glad that I'm not the only one!
MycodexMycodex

Its not like I'm losing any functionality but it just looks ugly compared to the rest of the UI. I only tried this in one of our sandboxes so I'm not sure if the issue exists in production as well. I have a case open with support. Their initial reply was for me to make sure the new UI was activated. Tier 1 support kills me sometimes... I explicitly stated in my case that its enabled.
MycodexMycodex

Looks like I got it figured out. Its all related to the mode attribute in the pageBlock. If you exclude mode, it defaults to "detail" which you probably don't want. Here is the text from the component reference:

 

 

The default user mode for the pageBlock component's child elements. This value determines whether lines are drawn separating field values. Possible values are: "detail", in which data is displayed to the user with colored lines; "maindetail", in which data is displayed to the user with colored lines and a white background, just like the main detail page for records; and "edit", in which data is displayed to the user without field lines. If not specified, this value defaults to "detail". These lines have nothing to do with requiredness, they are merely visual separators, that make it easier to scan a detail page.

 

Using maindetail and edit made everything look like all the other pages. Give it a try and report back.