+ Start a Discussion
Glen SwindellGlen Swindell 

Working with CSS files in VisualForce

Following the instructions on http://www.salesforce.com/us/developer/docs/pages/Content/pages_styling_custom.htm, I have created a style sheet file that contains the following

<style type="text/css">
    .required { font-weight: bold;}
</style>

I then uploaded it as a static resource called tntStyle.


Then in use, I have a visualforce page that includes the style sheet - thus

<apex:page showHeader="false" id="page" sidebar="false" standardController="Feedback__c" action="{!defaultValues}" extensions="FeedbackReturnPageExt" standardStylesheets="false">

<apex:stylesheet value="{!$Resource.tntStyle}"/>

<apex:pagemessages />
    <apex:form id="form">
        <apex:pageBlock mode="maindetail" >

            <apex:pageBlockButtons location="bottom">
                <apex:commandButton action="{!save}" value="Submit" />
               
            </apex:pageBlockButtons>

<apex:pageBlockSection columns="1">
                <apex:pageBlockSectionItem >
                    <apex:outputLabel for="title">title</apex:outputLabel>
                    <apex:inputText id="title" value="{!Feedback__c.Title__c}" />
                </apex:pageBlockSectionItem>
                <apex:inputField value="{!Feedback__c.First_Name__c}" />
                <apex:inputField value="{!Feedback__c.Last_Name__c}" />            
                <apex:pageBlockSectionItem >
                    <apex:outputLabel styleclass="required" for="cor">Country of Residence</apex:outputLabel>
                    <apex:inputText id="cor" required="true" value="{!Feedback__c.Country_of_Residence__c}" />
                </apex:pageBlockSectionItem>                    
                <apex:inputField value="{!Feedback__c.Email__c}" />
                <apex:pageBlockSectionItem >
                    <apex:outputLabel for="emailToCheck">Email verification</apex:outputLabel>
                    <apex:inputText id="emailToCheck" value="{!EmailToCheck}" />
                </apex:pageBlockSectionItem>
               
                <apex:inputField value="{!Feedback__c.Phone__c}" />
                <apex:inputField value="{!Feedback__c.Subject__c}" />
                <apex:pageBlockSectionItem >
                    <apex:outputLabel styleclass="required" for="CustomerComments">Comments</apex:outputLabel>
                    <apex:inputField id="CustomerComments" required="true" value="{!Feedback__c.Customer_Comments__c}" />
                </apex:pageBlockSectionItem>
                <apex:inputField value="{!Feedback__c.Customer_Entered_Account_Number__c}"/>
                <apex:inputField value="{!Feedback__c.Consignment_Number__c}" />
                                                 
        </apex:pageBlockSection>
        </apex:pageBlock>



    </apex:form>
</apex:page>

It does not however seem to change the font of the text to bold, whereas if I include the style "inline" within the page, it does.

Is there some stage I am missing to get this working with a CSS file. 

 

Many thanks

Best Answer chosen by Admin (Salesforce Developers) 
stephanstephan

You don't need the style tag:

 

<style type="text/css">
    .required { font-weight: bold;}
</style>

 

That is used for an inline style block in the VF page itself (which you can do as well). If you externalize the CSS in a separate file and include it, you don't want the tags.

 

All Answers

Edwin VijayEdwin Vijay

Hi Glen,

 

When you use

<apex:pageblock> or <apex:commandbutton> for ex:

 

 

the standard stylesheets of salesforce are also included into your page by default.

 

Having said  this, there might be a clash between your custom CSS and Salesforce's own CSS. Try this

  • Rename your class from required to something else.

Let me know what happens

Glen SwindellGlen Swindell

Hello Edwin,

 

Thanks for the quick reply. Unfortunately, the suggestion of changing the name of the style class did not work. I get exactly the same result.

 

 

ClintLeeClintLee

Hi Glen,

 

Perhaps removing the "." from the class in your CSS file so that it is just "required".

 

For example,

 

<style type="text/css">

 

required { font-weight: bold;}  // no period before required

 

</style>

 

Hope that helps.

 

Clint

stephanstephan

You don't need the style tag:

 

<style type="text/css">
    .required { font-weight: bold;}
</style>

 

That is used for an inline style block in the VF page itself (which you can do as well). If you externalize the CSS in a separate file and include it, you don't want the tags.

 

This was selected as the best answer
stephanstephan

I just checked the documentation, and it is misleading. It will be fixed for the Summer '10 release. Thanks for bringing this up.

 

...stephan

Glen SwindellGlen Swindell

Many thanks all for your responses. The solution in the end was as Stephan suggested - I just needed to remove the tags. It now works a treat.