[SalesForce] How to show the field label name in color in Visualforce page

I have a Visualforce page created on a custom object. This page is related to a list button as"edit all". When user clicks on this button for editing the VF page, it should show the editing field label names in red color. Any suggestion plz.

Best Answer

There are several different ways you can do this, take a look at the help docs here.

For HTML tags , you can define inline CSS code just like in a regular HTML page:

<apex:page>
    <style type="text/css">
        p { font-weight: bold; }
    </style>

    <p>This is some strong text!</p>
</apex:page>

The above example should work if you wanted to change all of your labels to red, something like this: 

<style type="text/css">
    label { color: red; }
</style>

The following example shows how to reference a stylesheet that is defined as a static resource. First, create a stylesheet like the one below and upload it as a static resource named customCSS:

h1 { color: #f00; }
p { background-color: #eec; }
newLink { color: #f60; font-weight: bold; }

Next, create a page that refers to this static resource:

    <apex:page showHeader="false">
        <apex:stylesheet value="{!$Resource.customCSS}" />
        <h1>Testing Custom Stylesheets</h1>
        <p>This text could go on forever...<br/><br/>
           But it won't!</p>

        <apex:outputLink value="http://www.salesforce.com" styleClass="newLink">
            Click here to switch to www.salesforce.com
        </apex:outputLink>
    </apex:page>

Tip

To shrink the size of your page, you can prevent the standard Salesforce stylesheets from loading by setting the standardStylesheets attribute on the component to false:

    <apex:page standardStylesheets="false">
        <!-- page content here -->
    </apex:page>

Note that if you don’t load these style sheets, components that require Salesforce CSS might not display correctly, and their styling may change between releases.

All Visualforce components that produce HTML have pass-through style and styleClass attributes. They allow you to use your own styles and style classes to control the look and feel of any HTML tag. For example, the following code sets the class of the and applies a style:

    <apex:page>
            <style type="text/css">
                .italicText { font-style: italic; }
            </style>
            <apex:outputText styleClass="italicText" value="This is kind of fancy."/>
        </apex:page>

The above here would work if you were using the <apex:outputLabel> tag and could use the styleClass="redText", something like: 

    <style type="text/css">
        .redText { color: red; }
    </style>

EDIT2: Similar to the above example for columns you could also use headerClass to modify the style: 

<style>
    .headerRow .tableTitle {
        color: red !important; 
    }
</style>
<apex:column value="{!acct.Name}" headerClass="tableTitle"/>

Another way that I've seen it done is to create the style and just put the tags in the labels themselves, something like:

<style type="text/css">
    redText { color: red; }
</style>  
<apex:inputField value="{!Account.Name}" label="<redText>Acct Name</redText>"/>

EDIT: This also works with headers in combination with facets like this: 

<apex:facet name="header"><redText>Acct Name</redText></apex:facet>

If you want to apply a style using a DOM ID, you must use CSS attribute selectors for the style definition. Attribute selectors rely on the definition of an attribute, rather than an HTML tag, to apply a CSS style. You can set the id value on any Visualforce component; however, that id is sometimes preprended with the id of parent components. For instance, the id of the following code is j_id0:myId:

    <apex:page>
        <apex:outputText id="myId" value="This is less fancy."/>
    </apex:page>

Your CSS should take this into consideration by using an attribute selector: 

    <apex:page>
        <style type="text/css">
            [id*=myId] { font-weight: bold; }
        </style>
        <apex:outputText id="myId" value="This is way fancy !"/>
    </apex:page>

If you intend to use images in your stylesheet, zip the images with the CSS file and upload it as a single static resource. For example, if your CSS file has a line like the following:

body { background-image: url("images/dots.gif") }

Add the entire images directory and the parent CSS file into a single zip file. For example, if the zip file resource name is myStyles, refer to it like this:

<apex:stylesheet value="{!URLFOR($Resource.myStyles, 'styles.css')}"/>

Warning

If a stylesheet has an empty string in a url value, you won’t be able to render that page as a PDF. For example, the style rule body { background-image: url(""); } will prevent any page that includes it from being rendered as a PDF.

Related Topic