4

Has anyone found a technique for injecting a custom stylesheets such that I can modify how the standard page layouts look? For example, increasing the size of key fields.

Update

I don't believe there is a supported way to do some or all of this. But is there a more hackish way of accomplish the task?

Ralph Callaway
  • 24,529
  • 17
  • 112
  • 190

3 Answers3

5

There is no native, declarative way to increase the size of fields on a page nor a way to inject your custom CSS into a standard page layout.

You can however create a Visualforce page and use the apex:detail component to show the entire detail of the page and optionally, the related lists. This allows you to surface a page, as defined by the page layout and permissions associated that that user's profile, but through Visualforce. Since it is a Visualforce page, you can include your own CSS that overrides the standard CSS. What I would advise you here though, is that you're ranging into "hacking the page" territory. What Salesforce chooses to call elements and selectors on the page in not guaranteed to stay the same over time so use this method at your own risk.

There are other methods, that I'm less familiar with, like using sidebar components.

greenstork
  • 14,752
  • 2
  • 44
  • 71
  • Oh fantastic, apex:detail is exactly what I was looking for. It used to suck relative to the standard page, but as far as I can tell now it's pretty much equivalent (except for the social contact buttons). – Ralph Callaway Apr 09 '13 at 11:55
  • Also looks like you lose some admin tools ("edit layout" link and Force.com Quick Access menu) and the help text for the related lists disappear. – Ralph Callaway Apr 09 '13 at 12:06
3

Not supported, and a hack, but a pretty common hack: you can put CSS and/or JS into a sidebar component and use that to mess with the page.

Just be aware that due to how SFDC stylesheets work, in many cases you will need to add !important tags to your style definitions.

Depending on what you're doing, you may get better results by using JS/jQuery to change the CSS just on the elements that you're targeting; some of the SFDC styles are re-used in places that you wouldn't expect. Make sure you test your stuff across many pages and all the browsers your users use.

jkraybill
  • 11,228
  • 1
  • 39
  • 70
  • Excellent suggestions about using the jQuery to change the CSS. In the past doing this with just vanilla visualforce pages was always a challenge to avoid unintended effects. And great point about testing cross browser. – Ralph Callaway Apr 09 '13 at 11:57
0

Ralph,

Wanted to point this out, in case you wanted some finer-grain control.

https://appexchange.salesforce.com/listingDetail?listingId=a0N30000009wZkUEAU

Thats a package (free) that lets you convert a page layout to a custom visual force page which you can then restyle ad infinitum. Very handy, Free, and no, I don't work for them.

With this you can have a lot more control and it makes the overriding of CSS much simpler.

Kevin P
  • 7,208
  • 2
  • 27
  • 40
  • Thanks for the suggestion, just don't want to deal with updating a vf page every time a new field comes out. It's a huge maintenance pain in an org with more than a one or two page layouts. – Ralph Callaway Apr 15 '13 at 17:56