up vote 3 down vote favorite

Good evening everyone.

I would like to know if it is possible to change a visualforce page color the same way we choose a color for each object.

At the moment, I have this VF page that can be either of type ObjectA or ObjectB. My question is, if I can change the theme color of the page accordingly to the type of object I will have in my constructor. Imagine I work with ObjectA__c which has green color/theme in its settings. Other times ObjectB might be the one I'm working with, but the color would also change along with it. I'm not sure if I'm making myself very clear, so I'm sorry if I'm explaining myself rather awfully.

share|improve this question
  • can you share your vf code here? – Mohith Shrivastava Jan 8 '14 at 16:48
  • Sorry if I'm being rude but does it make a difference in this case? I'm still going to create the VF page but I'll only do so if something like the above is possible. I just want to like, "extract" the Object's color scheme and use it on the page. Thank you for your reply. – Rui Rocha Jan 8 '14 at 17:07
  • looks like inspect element and finding the CSS and then dynamically getting the CSS from the controller code as alternative.But thinking still of any other solution thats cleaner – Mohith Shrivastava Jan 8 '14 at 17:28
  • I've actually thought of that also, the problem is I can't use javascript/jquery due to mobile devices not being able to support these dynamics. Unless you're thinking of doing it using another way of course. – Rui Rocha Jan 8 '14 at 17:34
up vote 5 down vote accepted

You can bind a "tabStyle" to the page, which causes the color theme/icon to match the named tab or object tab (Custom__Tab or CustomObject__c). However, this value cannot be dynamic, so you may need to use a template page or component that contains the logic you want to encapsulate for each object individually, then include that page in two other pages that have the desired tabStyle set.

Common.page: 

<apex:page ...>
</apex:page>

Tabstyle1.page:

<apex:page tabStyle="objectA__c">
    <apex:include pageName="common"/>
</apex:page>

Tabstyle2.page:

<apex:page tabStyle="objectb__c"/>
    <apex:include pageName="common"/>
</apex:page>

This "trick" works because the CSS will be dynamically selected, and all subelements will take on the appropriate color attributes.

If the page itself does not need to be styled differently, but you want to change the style of individual page blocks, you can do this as well:

<apex:pageBlock title="Contacts" tabStyle="Contact"> ... This area is purple. </apex:pageBlock>
<apex:pageBlock title="Accounts" tabStyle="Account"> ... This area is blue. </apex:pageBlock>
share|improve this answer
  • I see, it seems just like the thing I want. Thank you for such a direct and complete answer! – Rui Rocha Jan 9 '14 at 9:49

Your Answer

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

Not the answer you're looking for? Browse other questions tagged or ask your own question.